Themes: link flutter and gtk themes

lib/main.dart

@@ -30,6 +30,8 @@ void main() async {
       providers: [
         ChangeNotifierProvider(create: (_) => LightTheme(yaruLight)),
         ChangeNotifierProvider(create: (_) => DarkTheme(yaruDark)),
+        ChangeNotifierProvider(create: (_) => LightGtkTheme('Yaru')),
+        ChangeNotifierProvider(create: (_) => DarkGtkTheme('Yaru-dark')),
         ChangeNotifierProvider(
           create: (_) => AppTheme(themeSettings),
         ),

lib/view/app_theme.dart

@@ -1,24 +1,28 @@
 import 'package:flutter/material.dart';
 import 'package:settings/services/settings_service.dart';
+import 'package:yaru/yaru.dart';
 
 class AppTheme extends ValueNotifier<ThemeMode> {
   AppTheme(this._settings) : super(ThemeMode.system);
 
   final Settings _settings;
 
-  void apply(Brightness brightness) {
+  void apply(Brightness brightness, String lightGtkTheme, String darkGtkTheme) {
     switch (brightness) {
       case Brightness.dark:
         value = ThemeMode.dark;
-        _settings.setValue('gtk-theme', 'Yaru-dark');
+        _settings.setValue('gtk-theme', darkGtkTheme);
         break;
       case Brightness.light:
         value = ThemeMode.light;
-        _settings.setValue('gtk-theme', 'Yaru');
+        _settings.setValue('gtk-theme', lightGtkTheme);
         break;
     }
   }
 
+  void setGtkTheme(String gtkTheme) =>
+      _settings.setValue('gtk-theme', gtkTheme);
+
   @override
   void dispose() {
     _settings.dispose();
@@ -33,3 +37,89 @@ class LightTheme extends ValueNotifier<ThemeData> {
 class DarkTheme extends ValueNotifier<ThemeData> {
   DarkTheme(ThemeData value) : super(value);
 }
+
+class LightGtkTheme extends ValueNotifier<String> {
+  LightGtkTheme(String value) : super(value);
+}
+
+class DarkGtkTheme extends ValueNotifier<String> {
+  DarkGtkTheme(String value) : super(value);
+}
+
+final List<GlobalTheme> globalThemeList = [
+  GlobalTheme(
+    lightTheme: yaruLight,
+    darkTheme: yaruDark,
+    lightGtkTheme: 'Yaru',
+    darkGtkTheme: 'Yaru-dark',
+    primaryColor: YaruColors.ubuntuOrange,
+  ),
+  // GlobalTheme(
+  //     lightTheme: yaruSageLight,
+  //     darkTheme: yaruSageDark,
+  //     lightGtkTheme: 'Yaru-sage',
+  //     darkGtkTheme: 'Yaru-sage-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruBarkLight,
+  //     darkTheme: yaruBarkDark,
+  //     lightGtkTheme: 'Yaru-bark',
+  //     darkGtkTheme: 'Yaru-bark-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruOliveLight,
+  //     darkTheme: yaruOliveDark,
+  //     lightGtkTheme: 'Yaru-olive',
+  //     darkGtkTheme: 'Yaru-olive-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruViridianLight,
+  //     darkTheme: yaruViridianDark,
+  //     lightGtkTheme: 'Yaru-viridian',
+  //     darkGtkTheme: 'Yaru-viridian-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruPrussianGreenLight,
+  //     darkTheme: yaruPrussianGreenDark,
+  //     lightGtkTheme: 'Yaru-prussiangreen',
+  //     darkGtkTheme: 'Yaru-prussiangreen-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruBlueLight,
+  //     darkTheme: yaruBlueDark,
+  //     lightGtkTheme: 'Yaru-blue',
+  //     darkGtkTheme: 'Yaru-blue-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruPurpleLight,
+  //     darkTheme: yaruPurpleDark,
+  //     lightGtkTheme: 'Yaru-purple',
+  //     darkGtkTheme: 'Yaru-purple-dark'),
+  // GlobalTheme(
+  //     lightTheme: yarMagentaLight,
+  //     darkTheme: yaruMagentaDark,
+  //     lightGtkTheme: 'Yaru-magenta',
+  //     darkGtkTheme: 'Yaru-magenta-dark'),
+  // GlobalTheme(
+  //     lightTheme: yaruRedLight,
+  //     darkTheme: yaruRedDark,
+  //     lightGtkTheme: 'Yaru-red',
+  //     darkGtkTheme: 'Yaru-red-dark'),
+  GlobalTheme(
+    lightTheme: yaruKubuntuLight,
+    darkTheme: yaruKubuntuDark,
+    lightGtkTheme: 'Adwaita',
+    darkGtkTheme: 'Adwaita-dark',
+    primaryColor: FlavorColors.kubuntuBlue,
+  )
+];
+
+class GlobalTheme {
+  final ThemeData lightTheme;
+  final ThemeData darkTheme;
+  final String lightGtkTheme;
+  final String darkGtkTheme;
+  final MaterialColor primaryColor;
+
+  GlobalTheme({
+    required this.lightTheme,
+    required this.darkTheme,
+    required this.lightGtkTheme,
+    required this.darkGtkTheme,
+    required this.primaryColor,
+  });
+}

lib/view/pages/appearance/color_disk.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class ColorDisk extends StatelessWidget {
+  const ColorDisk(
+      {Key? key,
+      required this.onPressed,
+      required this.color,
+      required this.selected})
+      : super(key: key);
+
+  final VoidCallback onPressed;
+  final Color color;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 42,
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: TextButton(
+          style: TextButton.styleFrom(
+            padding: const EdgeInsets.all(0),
+            shape: CircleBorder(
+                side: BorderSide(
+                    color: selected
+                        ? Theme.of(context).primaryColor
+                        : Colors.transparent)),
+          ),
+          onPressed: onPressed,
+          child: SizedBox(
+            height: 20,
+            width: 20,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(100), color: color),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/view/pages/appearance/dark_mode_section.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:settings/constants.dart';
 import 'package:settings/view/app_theme.dart';
+import 'package:settings/view/pages/appearance/color_disk.dart';
 import 'package:yaru/yaru.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
@@ -14,6 +15,9 @@ class DarkModeSection extends StatelessWidget {
     final theme = context.watch<AppTheme>();
     final lighTheme = context.watch<LightTheme>();
     final darkTheme = context.watch<DarkTheme>();
+    final lightGtkTheme = context.watch<LightGtkTheme>();
+    final darkGtkTheme = context.watch<DarkGtkTheme>();
+
     return YaruSection(
       width: kDefaultWidth,
       headline: 'Theme',
@@ -36,41 +40,31 @@ class DarkModeSection extends StatelessWidget {
                   ),
             value: Theme.of(context).brightness == Brightness.dark,
             onChanged: (_) {
-              theme.apply(Theme.of(context).brightness == Brightness.dark
-                  ? Brightness.light
-                  : Brightness.dark);
+              theme.apply(
+                  Theme.of(context).brightness == Brightness.dark
+                      ? Brightness.light
+                      : Brightness.dark,
+                  lightGtkTheme.value,
+                  darkGtkTheme.value);
             }),
         YaruRow(
             trailingWidget: const Text('Change theme'),
             actionWidget: Row(
               children: [
-                YaruColorPickerButton(
-                    color: yaruLight.primaryColor,
-                    onPressed: () {
-                      lighTheme.value = yaruLight;
-                      darkTheme.value = yaruDark;
-                    }),
-                const SizedBox(
-                  width: 10,
-                ),
-                YaruColorPickerButton(
-                    color: yaruKubuntuLight.primaryColor,
-                    onPressed: () {
-                      lighTheme.value = yaruKubuntuLight;
-                      darkTheme.value = yaruKubuntuDark;
-                    }),
-                const SizedBox(
-                  width: 10,
-                ),
-                YaruColorPickerButton(
-                    color: yaruMateLight.primaryColor,
-                    onPressed: () {
-                      lighTheme.value = yaruMateLight;
-                      darkTheme.value = yaruMateDark;
-                    }),
-                const SizedBox(
-                  width: 10,
-                ),
+                for (var globalTheme in globalThemeList)
+                  ColorDisk(
+                      onPressed: () {
+                        lighTheme.value = globalTheme.lightTheme;
+                        darkTheme.value = globalTheme.darkTheme;
+                        lightGtkTheme.value = globalTheme.lightGtkTheme;
+                        darkGtkTheme.value = globalTheme.darkGtkTheme;
+                        theme.setGtkTheme(theme.value == ThemeMode.light
+                            ? lightGtkTheme.value
+                            : darkGtkTheme.value);
+                      },
+                      color: globalTheme.primaryColor,
+                      selected: Theme.of(context).primaryColor ==
+                          globalTheme.primaryColor),
               ],
             ),
             enabled: true)

pubspec.lock

@@ -977,7 +977,7 @@ packages:
       name: yaru
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.2.2"
+    version: "0.2.4"
   yaru_icons:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -31,7 +31,7 @@ dependencies:
   safe_change_notifier: ^0.1.0
   udisks: ^0.3.0
   upower: ^0.6.2
-  yaru: ^0.2.2
+  yaru: ^0.2.4
   yaru_icons: ^0.1.3
   yaru_widgets: ^1.0.6
   flutter_svg: ^1.0.0

test/widgets/app_theme_test.dart

@@ -18,7 +18,7 @@ void main() {
         (realInvocation) async {},
       );
 
-      theme.apply(Brightness.dark);
+      theme.apply(Brightness.dark, 'Yaru', 'Yaru-dark');
       verify(settings.setValue('gtk-theme', 'Yaru-dark')).called(1);
     },
   );
@@ -33,7 +33,7 @@ void main() {
         (realInvocation) async {},
       );
 
-      theme.apply(Brightness.light);
+      theme.apply(Brightness.light, 'Yaru', 'Yaru-dark');
       verify(settings.setValue('gtk-theme', 'Yaru')).called(1);
     },
   );