Sync update: 2026-05-19 23:27:14

whatsapp_app/lib/theme/app_theme.dart

@@ -1,39 +1,56 @@
 import 'package:flutter/material.dart';
 
 class AppTheme {
-  // Dark WhatsApp Palette
-  static const Color background     = Color(0xff111b21);
-  static const Color surface        = Color(0xff1f2c34);
-  static const Color surfaceLight   = Color(0xff2a3942);
-  static const Color primary        = Color(0xff00a884);
-  static const Color primaryDark    = Color(0xff005c4b);
-  
-  static const Color outgoingMsg    = Color(0xff005c4b);
-  static const Color incomingMsg    = Color(0xff1f2c34);
-  
-  static const Color textPrimary    = Color(0xffe9edef);
-  static const Color textSecondary  = Color(0xff8696a0);
-  static const Color iconColor      = Color(0xff8696a0);
+  // ── WhatsApp Dark Palette ────────────────────────────────────────────────
+  static const Color darkBackground   = Color(0xff111b21);
+  static const Color darkSurface      = Color(0xff1f2c34);
+  static const Color darkSurfaceLight = Color(0xff2a3942);
+  static const Color darkOutgoingMsg  = Color(0xff005c4b);
+  static const Color darkIncomingMsg  = Color(0xff1f2c34);
+  static const Color darkTextPrimary  = Color(0xffe9edef);
+  static const Color darkTextSecondary= Color(0xff8696a0);
 
+  // ── WhatsApp Light Palette ───────────────────────────────────────────────
+  static const Color lightBackground   = Color(0xffffffff);
+  static const Color lightSurface      = Color(0xff075e54); // WhatsApp green header
+  static const Color lightSurfaceLight = Color(0xfff0f2f5);
+  static const Color lightOutgoingMsg  = Color(0xffd9fdd3);
+  static const Color lightIncomingMsg  = Color(0xffffffff);
+  static const Color lightTextPrimary  = Color(0xff111b21);
+  static const Color lightTextSecondary= Color(0xff667781);
+  static const Color lightChatBg      = Color(0xffe5ddd5); // WhatsApp chat wallpaper bg
+
+  // ── Shared Colors ────────────────────────────────────────────────────────
+  static const Color primary     = Color(0xff25d366); // WhatsApp green
+  static const Color primaryDark = Color(0xff128c7e);
+  static const Color teal        = Color(0xff075e54);
+  static const Color blueTick    = Color(0xff53bdeb); // WhatsApp blue double tick
+  static const Color greyTick    = Color(0xff667781);
+
+  // ── Dark Theme ───────────────────────────────────────────────────────────
   static ThemeData get dark {
-    return ThemeData.dark().copyWith(
-      scaffoldBackgroundColor: background,
-      primaryColor: primary,
+    return ThemeData(
+      brightness: Brightness.dark,
+      scaffoldBackgroundColor: darkBackground,
+      primaryColor: teal,
       colorScheme: const ColorScheme.dark(
         primary: primary,
-        background: background,
-        surface: surface,
+        secondary: primaryDark,
+        surface: darkSurface,
+        background: darkBackground,
       ),
       appBarTheme: const AppBarTheme(
-        backgroundColor: surface,
+        backgroundColor: darkSurface,
+        foregroundColor: darkTextPrimary,
         elevation: 0,
-        iconTheme: IconThemeData(color: iconColor),
+        iconTheme: IconThemeData(color: darkTextSecondary),
         titleTextStyle: TextStyle(
-          color: textPrimary,
+          color: darkTextPrimary,
           fontSize: 20,
           fontWeight: FontWeight.bold,
         ),
       ),
+      dividerColor: darkSurfaceLight,
       textSelectionTheme: const TextSelectionThemeData(
         cursorColor: primary,
         selectionColor: primaryDark,
@@ -41,4 +58,70 @@ class AppTheme {
       ),
     );
   }
+
+  // ── Light Theme ──────────────────────────────────────────────────────────
+  static ThemeData get light {
+    return ThemeData(
+      brightness: Brightness.light,
+      scaffoldBackgroundColor: lightBackground,
+      primaryColor: teal,
+      colorScheme: const ColorScheme.light(
+        primary: teal,
+        secondary: primary,
+        surface: lightSurface,
+        background: lightBackground,
+      ),
+      appBarTheme: const AppBarTheme(
+        backgroundColor: teal,
+        foregroundColor: Colors.white,
+        elevation: 0,
+        iconTheme: IconThemeData(color: Colors.white),
+        titleTextStyle: TextStyle(
+          color: Colors.white,
+          fontSize: 20,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      dividerColor: Color(0xffe0e0e0),
+      textSelectionTheme: const TextSelectionThemeData(
+        cursorColor: teal,
+        selectionColor: primary,
+        selectionHandleColor: teal,
+      ),
+    );
+  }
+
+  // ── Context-aware helpers ─────────────────────────────────────────────────
+  static bool isDark(BuildContext context) =>
+      Theme.of(context).brightness == Brightness.dark;
+
+  static Color background(BuildContext context) =>
+      isDark(context) ? darkBackground : lightBackground;
+
+  static Color surface(BuildContext context) =>
+      isDark(context) ? darkSurface : lightSurface;
+
+  static Color surfaceLight(BuildContext context) =>
+      isDark(context) ? darkSurfaceLight : lightSurfaceLight;
+
+  static Color outgoingMsg(BuildContext context) =>
+      isDark(context) ? darkOutgoingMsg : lightOutgoingMsg;
+
+  static Color incomingMsg(BuildContext context) =>
+      isDark(context) ? darkIncomingMsg : lightIncomingMsg;
+
+  static Color chatBackground(BuildContext context) =>
+      isDark(context) ? darkBackground : lightChatBg;
+
+  static Color textPrimary(BuildContext context) =>
+      isDark(context) ? darkTextPrimary : lightTextPrimary;
+
+  static Color textSecondary(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : lightTextSecondary;
+
+  static Color iconColor(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : Colors.white;
+
+  static Color subtitleIconColor(BuildContext context) =>
+      isDark(context) ? darkTextSecondary : lightTextSecondary;
 }