From 01d145bd72078e0384913fd82a0dd18c9296e647 Mon Sep 17 00:00:00 2001 From: Fabian Freund Date: Sun, 11 Jan 2026 19:05:18 +0100 Subject: [PATCH] reorganize app colors --- app/lib/core/design/app_colors.dart | 88 ++++++++++++++++--- app/lib/core/providers/defaults.dart | 4 +- app/lib/core/providers/defaults.g.dart | 4 +- .../browser/presentation/dialogs/qr_code.dart | 5 +- .../presentation/dialogs/tab_tree.dart | 3 +- .../browser/presentation/screens/browser.dart | 8 +- .../browser_modules/app_bar_title.dart | 5 +- .../browser_modules/bottom_app_bar.dart | 9 +- .../widgets/browser_modules/browser_view.dart | 5 +- .../widgets/tab_view/tab_list_view.dart | 3 +- .../widgets/tab_view/tab_preview.dart | 25 +++--- .../search/presentation/screens/search.dart | 5 +- .../screens/general_settings.dart | 6 +- .../tor/presentation/screens/tor_proxy.dart | 19 ++-- .../tor/presentation/widgets/tor_dialog.dart | 3 +- .../widgets/tor_notification.dart | 14 +-- app/lib/main.dart | 8 +- 17 files changed, 152 insertions(+), 62 deletions(-) diff --git a/app/lib/core/design/app_colors.dart b/app/lib/core/design/app_colors.dart index 6bf8d2b0..5fc73b63 100644 --- a/app/lib/core/design/app_colors.dart +++ b/app/lib/core/design/app_colors.dart @@ -1,21 +1,85 @@ import 'package:flutter/material.dart'; -class AppColors { - AppColors._(); +@immutable +class AppColors extends ThemeExtension { + const AppColors._({ + this.seedColor = const Color(0xFF167C80), + this.privateTabPurple = const Color(0xFF8000D7), + this.privateTabBackground = const Color(0xFF25003E), + this.privateSelectionOverlay = const Color(0x648000D7), + this.torPurple = const Color(0xFF7D4698), + this.torActiveGreen = const Color(0xFF68B030), + this.torBackgroundGrey = const Color(0xFF333A41), + }); - static const Color seedColor = Color(0xFF167C80); + final Color seedColor; + final Color privateTabPurple; + final Color privateTabBackground; + final Color privateSelectionOverlay; + final Color torPurple; + final Color torActiveGreen; + final Color torBackgroundGrey; - static const Color privateTabPurple = Color(0xFF8000D7); + static const light = AppColors._(); + static const dark = AppColors._(); - static const Color privateTabBackground = Color(0xFF25003E); + @override + AppColors copyWith({ + Color? seedColor, + Color? privateTabPurple, + Color? privateTabBackground, + Color? privateSelectionOverlay, + Color? torPurple, + Color? torActiveGreen, + Color? torBackgroundGrey, + }) { + return AppColors._( + seedColor: seedColor ?? this.seedColor, + privateTabPurple: privateTabPurple ?? this.privateTabPurple, + privateTabBackground: privateTabBackground ?? this.privateTabBackground, + privateSelectionOverlay: + privateSelectionOverlay ?? this.privateSelectionOverlay, + torPurple: torPurple ?? this.torPurple, + torActiveGreen: torActiveGreen ?? this.torActiveGreen, + torBackgroundGrey: torBackgroundGrey ?? this.torBackgroundGrey, + ); + } - static const Color privateSelectionOverlay = Color(0x648000D7); + @override + AppColors lerp(covariant ThemeExtension? other, double t) { + if (other is! AppColors) { + return this; + } - static const Color torPurple = Color(0xFF7D4698); + return AppColors._( + seedColor: Color.lerp(seedColor, other.seedColor, t)!, + privateTabPurple: Color.lerp( + privateTabPurple, + other.privateTabPurple, + t, + )!, + privateTabBackground: Color.lerp( + privateTabBackground, + other.privateTabBackground, + t, + )!, + privateSelectionOverlay: Color.lerp( + privateSelectionOverlay, + other.privateSelectionOverlay, + t, + )!, + torPurple: Color.lerp(torPurple, other.torPurple, t)!, + torActiveGreen: Color.lerp(torActiveGreen, other.torActiveGreen, t)!, + torBackgroundGrey: Color.lerp( + torBackgroundGrey, + other.torBackgroundGrey, + t, + )!, + ); + } - static const Color torActiveGreen = Color(0xFF68B030); - - static const Color torBackgroundGrey = Color(0xFF333A41); - - static const Color dialogOverlay = Color(0x44000000); + /// Get AppColors from the current theme + static AppColors of(BuildContext context) { + return Theme.of(context).extension() ?? light; + } } diff --git a/app/lib/core/providers/defaults.dart b/app/lib/core/providers/defaults.dart index 6020fac8..f2e3357e 100644 --- a/app/lib/core/providers/defaults.dart +++ b/app/lib/core/providers/defaults.dart @@ -24,10 +24,10 @@ import 'package:weblibre/core/design/app_colors.dart'; part 'defaults.g.dart'; @Riverpod(keepAlive: true) -Color lightSeedColorFallback(Ref ref) => AppColors.seedColor; +Color lightSeedColorFallback(Ref ref) => AppColors.light.seedColor; @Riverpod(keepAlive: true) -Color darkSeedColorFallback(Ref ref) => AppColors.seedColor; +Color darkSeedColorFallback(Ref ref) => AppColors.dark.seedColor; @Riverpod(keepAlive: true) Uri docsUri(Ref ref) => Uri.parse('https://docs.weblibre.eu/'); diff --git a/app/lib/core/providers/defaults.g.dart b/app/lib/core/providers/defaults.g.dart index 5a572654..0ddc2871 100644 --- a/app/lib/core/providers/defaults.g.dart +++ b/app/lib/core/providers/defaults.g.dart @@ -49,7 +49,7 @@ final class LightSeedColorFallbackProvider } String _$lightSeedColorFallbackHash() => - r'd5fb3ead5795c1cadd6c3a5f91ef84c3cbdaa3c1'; + r'851efdcb11e4367ea2e54f1884a73fd4cd841d4a'; @ProviderFor(darkSeedColorFallback) final darkSeedColorFallbackProvider = DarkSeedColorFallbackProvider._(); @@ -91,7 +91,7 @@ final class DarkSeedColorFallbackProvider } String _$darkSeedColorFallbackHash() => - r'a383dbf6edf4fee54a8215bc52a98f26354e4645'; + r'161a8c4318108c31d5c300441bc3332d08c24496'; @ProviderFor(docsUri) final docsUriProvider = DocsUriProvider._(); diff --git a/app/lib/features/geckoview/features/browser/presentation/dialogs/qr_code.dart b/app/lib/features/geckoview/features/browser/presentation/dialogs/qr_code.dart index 43fc15b1..f7d4e7e5 100644 --- a/app/lib/features/geckoview/features/browser/presentation/dialogs/qr_code.dart +++ b/app/lib/features/geckoview/features/browser/presentation/dialogs/qr_code.dart @@ -21,6 +21,7 @@ import 'package:flutter/material.dart'; import 'package:pretty_qr_code/pretty_qr_code.dart'; Future showQrCode(BuildContext context, String data) { + final colorScheme = Theme.of(context).colorScheme; return showDialog( context: context, builder: (context) { @@ -39,9 +40,9 @@ Future showQrCode(BuildContext context, String data) { Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( - color: Colors.white, + color: colorScheme.surface, borderRadius: BorderRadius.circular(12), - border: Border.all(color: Colors.grey.shade300), + border: Border.all(color: colorScheme.outline), ), child: PrettyQrView.data( data: data, diff --git a/app/lib/features/geckoview/features/browser/presentation/dialogs/tab_tree.dart b/app/lib/features/geckoview/features/browser/presentation/dialogs/tab_tree.dart index 78ed5cd4..5d80eec5 100644 --- a/app/lib/features/geckoview/features/browser/presentation/dialogs/tab_tree.dart +++ b/app/lib/features/geckoview/features/browser/presentation/dialogs/tab_tree.dart @@ -27,7 +27,6 @@ import 'package:graphview/GraphView.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:nullability/nullability.dart'; import 'package:skeletonizer/skeletonizer.dart'; -import 'package:weblibre/core/design/app_colors.dart'; import 'package:weblibre/core/routing/routes.dart'; import 'package:weblibre/features/geckoview/domain/controllers/bottom_sheet.dart'; import 'package:weblibre/features/geckoview/domain/providers/selected_tab.dart'; @@ -83,7 +82,7 @@ class TabTreeDialog extends HookConsumerWidget { return Dialog.fullscreen( child: Scaffold( appBar: AppBar( - backgroundColor: AppColors.dialogOverlay, + backgroundColor: Theme.of(context).colorScheme.surface, elevation: 0, leading: const CloseButton(), ), diff --git a/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart b/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart index 35994304..acbe3863 100644 --- a/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart +++ b/app/lib/features/geckoview/features/browser/presentation/screens/browser.dart @@ -44,8 +44,8 @@ import 'package:weblibre/features/geckoview/features/browser/presentation/contro import 'package:weblibre/features/geckoview/features/browser/presentation/controllers/tab_view_controllers.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_fab.dart'; -import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/draggable_fab.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_view.dart'; +import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/browser_modules/draggable_fab.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/sheets/view_tab.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/tab_view/tab_grid_view.dart'; import 'package:weblibre/features/geckoview/features/browser/presentation/widgets/tab_view/tab_list_view.dart'; @@ -183,8 +183,9 @@ class _TabBar extends HookConsumerWidget { useOnStreamChange( pointerMoveEvents, onData: (event) { - if (!ref.read(generalSettingsWithDefaultsProvider).autoHideTabBar) + if (!ref.read(generalSettingsWithDefaultsProvider).autoHideTabBar) { return; + } final diff = event.dy; if (diff < 0) { if (diffAcc.value > 0) { @@ -502,6 +503,7 @@ class _SheetContainer extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final colorScheme = Theme.of(context).colorScheme; // Memoize maxChildSize to prevent keyboard from affecting sheet size final stableMaxChildSize = useMemoized(() => relativeSafeArea, []); @@ -520,7 +522,7 @@ class _SheetContainer extends HookConsumerWidget { ref.read(bottomSheetControllerProvider.notifier).requestDismiss(); }, child: ColoredBox( - color: Colors.black54, // Scrim + color: colorScheme.scrim, child: GestureDetector( onTap: () {}, // Prevent tap from propagating to parent child: Align( diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/app_bar_title.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/app_bar_title.dart index c2388c7a..177ef760 100644 --- a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/app_bar_title.dart +++ b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/app_bar_title.dart @@ -34,6 +34,7 @@ class AppBarTitle extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final theme = Theme.of(context); + final appColors = AppColors.of(context); final tabState = ref.watch(selectedTabStateProvider); final isTabTuneledAsync = ref.watch(isTabTunneledProvider(tabState?.id)); @@ -108,9 +109,9 @@ class AppBarTitle extends HookConsumerWidget { icon, const SizedBox(width: 4), if (tabState.isPrivate) ...[ - const Icon( + Icon( MdiIcons.dominoMask, - color: AppColors.privateTabPurple, + color: appColors.privateTabPurple, size: 14, ), const SizedBox(width: 4), diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart index d22a7080..8023a876 100644 --- a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart +++ b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/bottom_app_bar.dart @@ -482,6 +482,7 @@ class QuickTabSwitcher extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); final selectedTabId = ref.watch(selectedTabProvider); final tabStates = (switch (quickTabSwitcherMode) { @@ -521,11 +522,11 @@ class QuickTabSwitcher extends HookConsumerWidget { child: Text(item.title), ), if (item.isPrivate) - const Padding( - padding: EdgeInsets.only(left: 8.0), + Padding( + padding: const EdgeInsets.only(left: 8.0), child: Icon( MdiIcons.dominoMask, - color: AppColors.privateTabPurple, + color: appColors.privateTabPurple, size: 20, ), ), @@ -834,7 +835,7 @@ class NavigationMenuButton extends HookConsumerWidget { return Badge( isLabelVisible: torConnected, - backgroundColor: AppColors.torActiveGreen, + backgroundColor: AppColors.of(context).torActiveGreen, child: child, ); }, diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_view.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_view.dart index 6cdcaf72..7aac46cc 100644 --- a/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_view.dart +++ b/app/lib/features/geckoview/features/browser/presentation/widgets/browser_modules/browser_view.dart @@ -97,6 +97,7 @@ class _BrowserViewState extends ConsumerState @override Widget build(BuildContext context) { + final colorScheme = Theme.of(context).colorScheme; final initializationCompleter = useMemoized(() => Completer()); useOnInitialization(() async { @@ -313,7 +314,9 @@ class _BrowserViewState extends ConsumerState ), if (!hasTab) Positioned.fill( - child: SizedBox.expand(child: Container(color: Colors.grey[800])), + child: SizedBox.expand( + child: Container(color: colorScheme.surfaceContainerHighest), + ), ), ], ), diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_list_view.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_list_view.dart index f1e045d4..50c04ce3 100644 --- a/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_list_view.dart +++ b/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_list_view.dart @@ -41,6 +41,7 @@ class _TabDraggable extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final colorScheme = Theme.of(context).colorScheme; final activeTab = ref.watch(selectedTabProvider); final dragData = ref.watch( @@ -102,7 +103,7 @@ class _TabDraggable extends HookConsumerWidget { DeleteDropData() => Opacity( opacity: 0.3, child: ColorFiltered( - colorFilter: const ColorFilter.mode(Colors.red, BlendMode.modulate), + colorFilter: ColorFilter.mode(colorScheme.error, BlendMode.modulate), child: tab, ), ), diff --git a/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_preview.dart b/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_preview.dart index d34a29ca..9c84c834 100644 --- a/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_preview.dart +++ b/app/lib/features/geckoview/features/browser/presentation/widgets/tab_view/tab_preview.dart @@ -51,6 +51,7 @@ class GridTabItemContainer extends StatelessWidget { @override Widget build(BuildContext context) { final colorScheme = Theme.of(context).colorScheme; + final appColors = AppColors.of(context); return Container( decoration: BoxDecoration( @@ -62,7 +63,7 @@ class GridTabItemContainer extends StatelessWidget { ), child: Material( color: isPrivate - ? AppColors.privateTabBackground + ? appColors.privateTabBackground : colorScheme.surfaceContainerHighest, borderRadius: const BorderRadius.all(Radius.circular(14.0)), child: child, @@ -97,6 +98,9 @@ class GridTabPreview extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final colorScheme = Theme.of(context).colorScheme; + final appColors = AppColors.of(context); + final tabState = ref.watch( tabStateWithFallbackProvider( @@ -127,7 +131,7 @@ class GridTabPreview extends HookConsumerWidget { tabState.titleOrAuthority, maxLines: 2, style: tabState.isPrivate - ? const TextStyle(color: Colors.white) + ? TextStyle(color: colorScheme.onSurface) : null, ), ), @@ -178,13 +182,13 @@ class GridTabPreview extends HookConsumerWidget { child: Text( tabState.url.authority, style: Theme.of(context).textTheme.bodySmall?.copyWith( - color: tabState.isPrivate ? Colors.white : null, + color: tabState.isPrivate ? colorScheme.onSurface : null, ), ), ), if (tabState.isPrivate) ...[ const SizedBox(width: 6.0), - const SizedBox( + SizedBox( height: 16, width: 24, child: Stack( @@ -194,7 +198,7 @@ class GridTabPreview extends HookConsumerWidget { top: -4, child: Icon( MdiIcons.dominoMask, - color: AppColors.privateTabPurple, + color: appColors.privateTabPurple, ), ), ], @@ -259,6 +263,7 @@ class ListTabPreview extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final colorScheme = Theme.of(context).colorScheme; + final appColors = AppColors.of(context); final tabState = ref.watch( @@ -272,7 +277,7 @@ class ListTabPreview extends HookConsumerWidget { return Container( decoration: BoxDecoration( - color: tabState.isPrivate ? AppColors.privateTabBackground : null, + color: tabState.isPrivate ? appColors.privateTabBackground : null, border: isActive ? Border.all(color: colorScheme.primary) : null, borderRadius: const BorderRadius.all(Radius.circular(4.0)), ), @@ -297,15 +302,15 @@ class ListTabPreview extends HookConsumerWidget { tabState.titleOrAuthority, maxLines: 2, style: tabState.isPrivate - ? const TextStyle(color: Colors.white) + ? TextStyle(color: colorScheme.onSurface) : null, ), subtitle: Row( children: [ if (tabState.isPrivate) ...[ - const Icon( + Icon( MdiIcons.dominoMask, - color: AppColors.privateTabPurple, + color: appColors.privateTabPurple, size: 14, ), const SizedBox(width: 4), @@ -314,7 +319,7 @@ class ListTabPreview extends HookConsumerWidget { child: UriBreadcrumb( uri: tabState.url, style: Theme.of(context).textTheme.bodySmall?.copyWith( - color: tabState.isPrivate ? Colors.white : null, + color: tabState.isPrivate ? colorScheme.onSurface : null, ), ), ), diff --git a/app/lib/features/geckoview/features/search/presentation/screens/search.dart b/app/lib/features/geckoview/features/search/presentation/screens/search.dart index 077929d7..6a934608 100644 --- a/app/lib/features/geckoview/features/search/presentation/screens/search.dart +++ b/app/lib/features/geckoview/features/search/presentation/screens/search.dart @@ -55,6 +55,7 @@ class SearchScreen extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); final formKey = useMemoized(() => GlobalKey()); final createChildTabsOption = ref.watch( @@ -190,13 +191,13 @@ class SearchScreen extends HookConsumerWidget { TabType.regular => null, TabType.private => SegmentedButton.styleFrom( selectedBackgroundColor: - AppColors.privateSelectionOverlay, + appColors.privateSelectionOverlay, ), TabType.child => (currentTabTabType == TabType.private) ? SegmentedButton.styleFrom( selectedBackgroundColor: - AppColors.privateSelectionOverlay, + appColors.privateSelectionOverlay, ) : null, }, diff --git a/app/lib/features/settings/presentation/screens/general_settings.dart b/app/lib/features/settings/presentation/screens/general_settings.dart index f37fbbec..bb8eba10 100644 --- a/app/lib/features/settings/presentation/screens/general_settings.dart +++ b/app/lib/features/settings/presentation/screens/general_settings.dart @@ -143,6 +143,7 @@ class _NewTabDefaultSection extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); final defaultCreateTabType = ref.watch( generalSettingsWithDefaultsProvider.select((s) => s.defaultCreateTabType), ); @@ -193,7 +194,7 @@ class _NewTabDefaultSection extends HookConsumerWidget { style: switch (defaultCreateTabType) { TabType.regular => null, TabType.private => SegmentedButton.styleFrom( - selectedBackgroundColor: AppColors.privateSelectionOverlay, + selectedBackgroundColor: appColors.privateSelectionOverlay, ), TabType.child => null, }, @@ -210,6 +211,7 @@ class _ExternalLinkHandlingSection extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); final tabIntentOpenSetting = ref.watch( generalSettingsWithDefaultsProvider.select((s) => s.tabIntentOpenSetting), ); @@ -265,7 +267,7 @@ class _ExternalLinkHandlingSection extends HookConsumerWidget { style: switch (tabIntentOpenSetting) { TabIntentOpenSetting.regular => null, TabIntentOpenSetting.private => SegmentedButton.styleFrom( - selectedBackgroundColor: AppColors.privateSelectionOverlay, + selectedBackgroundColor: appColors.privateSelectionOverlay, ), TabIntentOpenSetting.ask => null, }, diff --git a/app/lib/features/tor/presentation/screens/tor_proxy.dart b/app/lib/features/tor/presentation/screens/tor_proxy.dart index bec35f14..79d857ec 100644 --- a/app/lib/features/tor/presentation/screens/tor_proxy.dart +++ b/app/lib/features/tor/presentation/screens/tor_proxy.dart @@ -37,6 +37,7 @@ class TorProxyScreen extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); final bootstrapProgress = ref.watch( torProxyServiceProvider.select( (value) => value.value?.bootstrapProgress ?? 0, @@ -125,7 +126,7 @@ class TorProxyScreen extends HookConsumerWidget { Set states, ) { if (states.isEmpty) { - return AppColors.torBackgroundGrey; + return appColors.torBackgroundGrey; } return null; // Use the default color. }), @@ -147,20 +148,20 @@ class TorProxyScreen extends HookConsumerWidget { fillColor: WidgetStateColor.resolveWith((states) { return Colors.white; }), - checkColor: WidgetStateProperty.all(AppColors.torPurple), + checkColor: WidgetStateProperty.all(appColors.torPurple), ), iconTheme: const IconThemeData(color: Colors.white), ), child: SafeArea( child: ColoredBox( - color: AppColors.torPurple, + color: appColors.torPurple, child: CustomScrollView( slivers: [ SliverAppBar( pinned: true, title: SwitchListTile.adaptive( inactiveThumbColor: Colors.white, - activeThumbColor: AppColors.torActiveGreen, + activeThumbColor: appColors.torActiveGreen, thumbIcon: WidgetStateProperty.resolveWith(( Set states, ) { @@ -199,8 +200,8 @@ class TorProxyScreen extends HookConsumerWidget { children: [ if (torPendingRequest.value != false && torIsBusy) LinearProgressIndicator( - backgroundColor: AppColors.torBackgroundGrey, - color: AppColors.torActiveGreen, + backgroundColor: appColors.torBackgroundGrey, + color: appColors.torActiveGreen, value: bootstrapProgress / 100, ), Padding( @@ -289,7 +290,7 @@ class TorProxyScreen extends HookConsumerWidget { SwitchListTile.adaptive( inactiveThumbColor: Colors.white, - activeThumbColor: AppColors.torActiveGreen, + activeThumbColor: appColors.torActiveGreen, thumbIcon: WidgetStateProperty.resolveWith(( Set states, ) { @@ -327,7 +328,7 @@ class TorProxyScreen extends HookConsumerWidget { ), SwitchListTile.adaptive( inactiveThumbColor: Colors.white, - activeThumbColor: AppColors.torActiveGreen, + activeThumbColor: appColors.torActiveGreen, thumbIcon: WidgetStateProperty.resolveWith(( Set states, ) { @@ -362,7 +363,7 @@ class TorProxyScreen extends HookConsumerWidget { if (torSettings.config == TorConnectionConfig.auto) ...[ SwitchListTile.adaptive( inactiveThumbColor: Colors.white, - activeThumbColor: AppColors.torActiveGreen, + activeThumbColor: appColors.torActiveGreen, value: torSettings.requireBridge, contentPadding: const EdgeInsets.only( left: 56, diff --git a/app/lib/features/tor/presentation/widgets/tor_dialog.dart b/app/lib/features/tor/presentation/widgets/tor_dialog.dart index f01dbfa1..6065b211 100644 --- a/app/lib/features/tor/presentation/widgets/tor_dialog.dart +++ b/app/lib/features/tor/presentation/widgets/tor_dialog.dart @@ -27,8 +27,9 @@ class TorDialog extends StatelessWidget { @override Widget build(BuildContext context) { + final appColors = AppColors.of(context); return AlertDialog( - icon: const Icon(TorIcons.onionAlt, color: AppColors.torPurple), + icon: Icon(TorIcons.onionAlt, color: appColors.torPurple), title: const Text('Tor™ Proxy'), content: const Text( 'This container requires a Tor proxy for secure connections, which is not currently running.', diff --git a/app/lib/features/tor/presentation/widgets/tor_notification.dart b/app/lib/features/tor/presentation/widgets/tor_notification.dart index 58023a54..c7e91c82 100644 --- a/app/lib/features/tor/presentation/widgets/tor_notification.dart +++ b/app/lib/features/tor/presentation/widgets/tor_notification.dart @@ -28,6 +28,8 @@ import 'package:weblibre/presentation/widgets/animate_gradient_shader.dart'; class TorNotification extends HookConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { + final appColors = AppColors.of(context); + ref.listen(torProxyServiceProvider, (previous, next) { if (next.hasValue & next.requireValue.isRunning && next.requireValue.bootstrapProgress == 100) { @@ -37,7 +39,7 @@ class TorNotification extends HookConsumerWidget { return SafeArea( child: ColoredBox( - color: AppColors.torPurple, + color: appColors.torPurple, child: SizedBox( height: 56 + 12, width: MediaQuery.of(context).size.width, @@ -52,9 +54,9 @@ class TorNotification extends HookConsumerWidget { duration: const Duration(milliseconds: 500), primaryEnd: Alignment.bottomLeft, secondaryEnd: Alignment.topRight, - primaryColors: const [ - AppColors.torActiveGreen, - AppColors.torActiveGreen, + primaryColors: [ + appColors.torActiveGreen, + appColors.torActiveGreen, ], secondaryColors: const [Colors.white, Colors.white], child: const Padding( @@ -87,8 +89,8 @@ class TorNotification extends HookConsumerWidget { ); return LinearProgressIndicator( - backgroundColor: AppColors.torBackgroundGrey, - color: AppColors.torActiveGreen, + backgroundColor: AppColors.of(context).torBackgroundGrey, + color: AppColors.of(context).torActiveGreen, value: bootstrapProgress / 100, ); }, diff --git a/app/lib/main.dart b/app/lib/main.dart index e270487e..0acd9875 100644 --- a/app/lib/main.dart +++ b/app/lib/main.dart @@ -30,6 +30,7 @@ import 'package:flutter_mozilla_components/flutter_mozilla_components.dart' import 'package:home_widget/home_widget.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:logger/logger.dart'; +import 'package:weblibre/core/design/app_colors.dart'; import 'package:weblibre/core/error_observer.dart'; import 'package:weblibre/core/filesystem.dart'; import 'package:weblibre/core/logger.dart'; @@ -141,10 +142,15 @@ class _MainWidget extends HookConsumerWidget { return MainApp( key: rootKey, - theme: ThemeData(useMaterial3: true, colorScheme: lightColorScheme), + theme: ThemeData( + useMaterial3: true, + colorScheme: lightColorScheme, + extensions: const >[AppColors.light], + ), darkTheme: ThemeData( useMaterial3: true, colorScheme: darkColorScheme, + extensions: const >[AppColors.dark], ), themeMode: themeMode, );