ui(Theme): Improve legibility

- Set primary to "primaryColor" instead of "primaryColorLight" - Do not use primary for text on EditingPage - Dark mode: Use white color on TextButtons
iakdis · Mar 22, 2023 · ef1b38f · ef1b38f
1 parent 66b1f26
commit ef1b38f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 41 deletions.
diff --git a/lib/src/pages/editing_page.dart b/lib/src/pages/editing_page.dart
@@ -324,21 +324,22 @@ class EditingPageState extends State<EditingPage> with WindowListener {
       children: [
         SelectableText(
           title,
-          style: TextStyle(
-              fontSize: 22.0,
-              fontWeight: FontWeight.bold,
-              color: Theme.of(context).colorScheme.primary),
+          style: const TextStyle(fontSize: 22.0, fontWeight: FontWeight.bold),
         ),
         TextButton.icon(
           onPressed: () {
             checkUnsavedBeforeFunction(
                 context: context, function: () => setState(() => setVisible()));
           },
-          label: Text(visible
-              ? Localization.appLocalizations().hide
-              : Localization.appLocalizations().show),
+          label: Text(
+            visible
+                ? Localization.appLocalizations().hide
+                : Localization.appLocalizations().show,
+            style: TextStyle(color: Theme.of(context).colorScheme.onBackground),
+          ),
           icon: Icon(
             visible ? Icons.expand_less : Icons.expand_more,
+            color: Theme.of(context).colorScheme.onBackground,
           ),
         ),
       ],
@@ -427,10 +428,7 @@ class EditingPageState extends State<EditingPage> with WindowListener {
                         //width: 64,
                         child: ReorderableDragStartListener(
                           index: index,
-                          child: Icon(
-                            Icons.drag_handle,
-                            color: Theme.of(context).colorScheme.primary,
-                          ),
+                          child: const Icon(Icons.drag_handle),
                         ),
                       ),
                     hugoWidgets[index],
@@ -684,8 +682,14 @@ class EditingPageState extends State<EditingPage> with WindowListener {
     return TextButton.icon(
       onPressed: () =>
           openCurrentPathInFolder(path: path, keepPathTrailing: false),
-      icon: const Icon(Icons.open_in_new),
-      label: Text(path.substring(path.indexOf('content'))),
+      icon: Icon(
+        Icons.open_in_new,
+        color: Theme.of(context).colorScheme.onBackground,
+      ),
+      label: Text(
+        path.substring(path.indexOf('content')),
+        style: TextStyle(color: Theme.of(context).colorScheme.onBackground),
+      ),
     );
   }
 
@@ -799,11 +803,9 @@ class EditingPageState extends State<EditingPage> with WindowListener {
                                       : Localization.appLocalizations()
                                           .error_DirectoryDoesNotExist(
                                               '"${Preferences.getCurrentPath()}"'),
-                                  style: TextStyle(
+                                  style: const TextStyle(
                                     fontSize: 36.0,
                                     fontWeight: FontWeight.bold,
-                                    color:
-                                        Theme.of(context).colorScheme.primary,
                                   ),
                                 ),
                                 if (directoryExists)
@@ -853,10 +855,9 @@ class EditingPageState extends State<EditingPage> with WindowListener {
                       return Center(
                         child: SelectableText(
                           Localization.appLocalizations().noFileSelected,
-                          style: TextStyle(
+                          style: const TextStyle(
                             fontSize: 36.0,
                             fontWeight: FontWeight.bold,
-                            color: Theme.of(context).colorScheme.primary,
                           ),
                         ),
                       );
@@ -915,10 +916,10 @@ class EditingPageState extends State<EditingPage> with WindowListener {
                               snapshot.data != null
                                   ? title.substring(0, title.length - 3)
                                   : 'No snapshot data',
-                              style: TextStyle(
-                                  fontSize: 32.0,
-                                  fontWeight: FontWeight.bold,
-                                  color: Theme.of(context).colorScheme.primary),
+                              style: const TextStyle(
+                                fontSize: 32.0,
+                                fontWeight: FontWeight.bold,
+                              ),
                             ),
                             const SizedBox(height: 8.0),
                             _openInFolderButton(path: path),

diff --git a/lib/src/pages/settings_page.dart b/lib/src/pages/settings_page.dart
@@ -17,7 +17,6 @@ import '../logic/buho_functions.dart';
 import '../ssg/hugo.dart';
 import '../widgets/buttons/language_dropdown.dart';
 import '../widgets/theme_selector.dart';
-import 'editing_page.dart';
 import 'onboarding_page.dart';
 
 class SettingsButton extends StatelessWidget {
@@ -237,7 +236,7 @@ class _SettingsPageState extends State<SettingsPage> {
               : Preferences.getThemeMode() == ThemeMode.light.name
                   ? const Icon(Icons.light_mode)
                   : const Icon(Icons.dark_mode),
-          value: Themes.getThemeModeFromName(Preferences.getThemeMode()),
+          value: ThemeMode.values.byName(Preferences.getThemeMode()),
           items: [
             DropdownMenuItem(
               value: ThemeMode.system,

diff --git a/lib/src/provider/app/theme_provider.dart b/lib/src/provider/app/theme_provider.dart
@@ -8,7 +8,7 @@ class ThemeProvider extends ChangeNotifier {
 
   ThemeMode? themeMode() {
     _themeMode = Preferences.getThemeMode().isNotEmpty
-        ? Themes.getThemeModeFromName(Preferences.getThemeMode())
+        ? ThemeMode.values.byName(Preferences.getThemeMode())
         : ThemeMode.system;
     return _themeMode;
   }
@@ -54,7 +54,7 @@ class Themes {
     return FlexThemeData.dark(
       primary: FlexThemeData.light(
         scheme: FlexScheme.values.elementAt(colorSchemeIndex ?? 0),
-      ).primaryColorLight,
+      ).primaryColor,
       secondary: FlexThemeData.light(
         scheme: FlexScheme.values.elementAt(colorSchemeIndex ?? 0),
       ).colorScheme.secondary,
@@ -80,18 +80,11 @@ class Themes {
         toolbarHeight: 46,
         titleSpacing: 0,
       ),
+      textButtonTheme: const TextButtonThemeData(
+        style: ButtonStyle(
+          foregroundColor: MaterialStatePropertyAll(Colors.white),
+        ),
+      ),
     );
   }
-
-  static ThemeMode getThemeModeFromName(String themeModeName) {
-    if (themeModeName == ThemeMode.system.name) {
-      return ThemeMode.system;
-    } else if (themeModeName == ThemeMode.light.name) {
-      return ThemeMode.light;
-    } else if (themeModeName == ThemeMode.dark.name) {
-      return ThemeMode.dark;
-    } else {
-      return ThemeMode.system;
-    }
-  }
 }
diff --git a/lib/src/widgets/theme_selector.dart b/lib/src/widgets/theme_selector.dart
@@ -74,13 +74,15 @@ class _ThemeSelectorState extends State<ThemeSelector> {
         }
       }
 
+      final isSelected = Preferences.getColorSchemeIndex() == realIndex;
+
       list.add(
         Tooltip(
           message: schemesList()[index].name,
           child: FlexThemeModeOptionButton(
             optionButtonBorderRadius: 12,
-            height: Preferences.getColorSchemeIndex() == realIndex ? 26 : 20,
-            width: Preferences.getColorSchemeIndex() == realIndex ? 26 : 20,
+            height: isSelected ? 26 : 20,
+            width: isSelected ? 26 : 20,
             padding: const EdgeInsets.all(0.4),
             optionButtonMargin: EdgeInsets.zero,
             borderRadius: 0,
@@ -89,7 +91,7 @@ class _ThemeSelectorState extends State<ThemeSelector> {
                 color: Theme.of(context).primaryColorLight, width: 5),
             onSelect: () => Provider.of<ThemeProvider>(context, listen: false)
                 .setColorScheme(realIndex),
-            selected: Preferences.getColorSchemeIndex() == realIndex,
+            selected: isSelected,
             backgroundColor: Theme.of(context).colorScheme.surface,
             flexSchemeColor: schemesList()[index].light,
           ),