From 6fe89fdc0e5e2525897a54b52fb44c7dca5ddbf5 Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Fri, 8 Aug 2025 12:05:08 +0530 Subject: [PATCH] Add theme configuration and update color scheme in recovery key and lock screen pages --- mobile/apps/auth/lib/main.dart | 2 + .../accounts/lib/pages/recovery_key_page.dart | 4 +- .../lib/ui/lock_screen_confirm_pin.dart | 2 +- .../lock_screen/lib/ui/lock_screen_pin.dart | 2 +- mobile/packages/ui/lib/theme/colors.dart | 49 +++++++++++++++++++ mobile/packages/ui/lib/theme/ente_theme.dart | 11 +++-- .../packages/ui/lib/theme/theme_config.dart | 14 ++++++ 7 files changed, 76 insertions(+), 8 deletions(-) create mode 100644 mobile/packages/ui/lib/theme/theme_config.dart diff --git a/mobile/apps/auth/lib/main.dart b/mobile/apps/auth/lib/main.dart index 3f7d5f2fea..100ac405c1 100644 --- a/mobile/apps/auth/lib/main.dart +++ b/mobile/apps/auth/lib/main.dart @@ -30,6 +30,7 @@ import 'package:ente_lock_screen/ui/lock_screen.dart'; import 'package:ente_logging/logging.dart'; import 'package:ente_network/network.dart'; import 'package:ente_strings/l10n/strings_localizations.dart'; +import 'package:ente_ui/theme/theme_config.dart'; import 'package:flutter/foundation.dart'; import "package:flutter/material.dart"; import 'package:flutter_displaymode/flutter_displaymode.dart'; @@ -90,6 +91,7 @@ void main() async { } Future _runInForeground() async { + AppThemeConfig.initialize(EnteApp.auth); final savedThemeMode = _themeMode(await AdaptiveTheme.getThemeMode()); final configuration = Configuration.instance; return await _runWithLogs(() async { diff --git a/mobile/packages/accounts/lib/pages/recovery_key_page.dart b/mobile/packages/accounts/lib/pages/recovery_key_page.dart index a4ad8cb4aa..00f083d4c5 100644 --- a/mobile/packages/accounts/lib/pages/recovery_key_page.dart +++ b/mobile/packages/accounts/lib/pages/recovery_key_page.dart @@ -149,7 +149,7 @@ class _RecoveryKeyPageState extends State { begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: [ - getEnteColorScheme(context).primary500, + getEnteColorScheme(context).primary700, getEnteColorScheme(context).primary300, ], stops: const [0.0, 0.9753], @@ -248,7 +248,7 @@ class _RecoveryKeyPageState extends State { childrens.add( SizedBox( height: 56, - child: OutlinedButton( + child: ElevatedButton( onPressed: () async { await _saveKeys(); }, diff --git a/mobile/packages/lock_screen/lib/ui/lock_screen_confirm_pin.dart b/mobile/packages/lock_screen/lib/ui/lock_screen_confirm_pin.dart index ecb4418968..e162c50bd2 100644 --- a/mobile/packages/lock_screen/lib/ui/lock_screen_confirm_pin.dart +++ b/mobile/packages/lock_screen/lib/ui/lock_screen_confirm_pin.dart @@ -86,7 +86,7 @@ class _LockScreenConfirmPinState extends State { width: 48, padding: const EdgeInsets.only(top: 6.0), decoration: BoxDecoration( - border: Border.all(color: colorTheme.primary500), + border: Border.all(color: const Color.fromRGBO(45, 194, 98, 1.0)), borderRadius: BorderRadius.circular(15.0), ), ); diff --git a/mobile/packages/lock_screen/lib/ui/lock_screen_pin.dart b/mobile/packages/lock_screen/lib/ui/lock_screen_pin.dart index 603ebdd67d..81f9f0a484 100644 --- a/mobile/packages/lock_screen/lib/ui/lock_screen_pin.dart +++ b/mobile/packages/lock_screen/lib/ui/lock_screen_pin.dart @@ -130,7 +130,7 @@ class _LockScreenPinState extends State { width: 48, padding: const EdgeInsets.only(top: 6.0), decoration: BoxDecoration( - border: Border.all(color: colorTheme.primary500), + border: Border.all(color: const Color.fromRGBO(45, 194, 98, 1.0)), borderRadius: BorderRadius.circular(15.0), ), ); diff --git a/mobile/packages/ui/lib/theme/colors.dart b/mobile/packages/ui/lib/theme/colors.dart index 17a641037f..ac4bc24138 100644 --- a/mobile/packages/ui/lib/theme/colors.dart +++ b/mobile/packages/ui/lib/theme/colors.dart @@ -1,3 +1,4 @@ +import "package:ente_ui/theme/theme_config.dart"; import 'package:flutter/material.dart'; /// This color scheme provides all the colors needed for a modern Flutter app, @@ -24,6 +25,54 @@ import 'package:flutter/material.dart'; /// ); /// ``` class EnteColorScheme extends ThemeExtension { + factory EnteColorScheme.fromApp( + EnteApp app, { + Brightness brightness = Brightness.light, + }) { + final appColors = switch (app) { + EnteApp.auth => ( + primary700: const Color.fromARGB(255, 164, 0, 182), + primary500: const Color.fromARGB(255, 204, 10, 101), + primary400: const Color.fromARGB(255, 122, 41, 193), + primary300: const Color.fromARGB(255, 152, 77, 244), + gradientButtonBgColor: const Color(0xFF531DAB), + gradientButtonBgColors: const [ + Color.fromARGB(255, 122, 41, 193), + Color.fromARGB(255, 122, 41, 193), + ], + ), + EnteApp.locker => ( + primary700: const Color.fromARGB(255, 0, 122, 255), + primary400: const Color.fromARGB(255, 52, 152, 255), + primary500: const Color.fromARGB(255, 102, 178, 255), + primary300: const Color.fromARGB(255, 153, 204, 255), + gradientButtonBgColor: const Color.fromRGBO(0, 122, 255, 1), + gradientButtonBgColors: const [ + Color.fromRGBO(0, 122, 255, 1), + Color.fromRGBO(52, 152, 255, 1), + ], + ), + }; + + return brightness == Brightness.light + ? EnteColorScheme.light( + primary700: appColors.primary700, + primary500: appColors.primary500, + primary400: appColors.primary400, + primary300: appColors.primary300, + gradientButtonBgColor: appColors.gradientButtonBgColor, + gradientButtonBgColors: appColors.gradientButtonBgColors, + ) + : EnteColorScheme.dark( + primary700: appColors.primary700, + primary500: appColors.primary500, + primary400: appColors.primary400, + primary300: appColors.primary300, + gradientButtonBgColor: appColors.gradientButtonBgColor, + gradientButtonBgColors: appColors.gradientButtonBgColors, + ); + } + // Background Colors final Color backgroundBase; final Color backgroundElevated; diff --git a/mobile/packages/ui/lib/theme/ente_theme.dart b/mobile/packages/ui/lib/theme/ente_theme.dart index 1fac82d428..3fb07b8022 100644 --- a/mobile/packages/ui/lib/theme/ente_theme.dart +++ b/mobile/packages/ui/lib/theme/ente_theme.dart @@ -2,6 +2,7 @@ import 'package:ente_ui/theme/colors.dart'; import 'package:ente_ui/theme/effects.dart'; import "package:ente_ui/theme/ente_theme_data.dart"; import 'package:ente_ui/theme/text_style.dart'; +import "package:ente_ui/theme/theme_config.dart"; import 'package:flutter/material.dart'; class EnteTheme { @@ -49,10 +50,12 @@ EnteColorScheme getEnteColorScheme( return colorScheme; } - // Fallback to old system if new system is not available - return inverse - ? Theme.of(context).colorScheme.inverseEnteTheme.colorScheme - : Theme.of(context).colorScheme.enteTheme.colorScheme; + final brightness = Theme.of(context).brightness; + + return EnteColorScheme.fromApp( + AppThemeConfig.currentApp, + brightness: brightness, + ); } EnteTextTheme getEnteTextTheme( diff --git a/mobile/packages/ui/lib/theme/theme_config.dart b/mobile/packages/ui/lib/theme/theme_config.dart new file mode 100644 index 0000000000..a008370504 --- /dev/null +++ b/mobile/packages/ui/lib/theme/theme_config.dart @@ -0,0 +1,14 @@ +enum EnteApp { + auth, + locker; +} + +class AppThemeConfig { + static EnteApp? _currentApp; + + static void initialize(EnteApp app) { + _currentApp = app; + } + + static EnteApp get currentApp => _currentApp ?? EnteApp.auth; +}