Introduce YaruTheme widget

README.md

@@ -13,31 +13,36 @@ To be able to use this package follow this steps:
     ```dart
     import 'package:yaru/yaru.dart';
     ```
-3. Inside your `MaterialApp` set `theme` to `yarulight` which is the standard light theme and `darkTheme` to `yaruDark` to get the yaru dark theme. The `darkTheme` property is used when you toggle your system theme to dark:
+3. Create `YaruTheme`
 
     ```dart
     MaterialApp(
-          theme: yaruLight,
-          darkTheme: yaruDark,
-          home: Scaffold(
-            appBar: AppBar(
-              title: Text('Yaru Theme'),
-            ),
-            body: Container(),
+      home: YaruTheme(
+        child: Scaffold(
+          appBar: AppBar(
+            title: Text('Yaru Theme'),
           ),
-        );
+          body: Container(),
+        ),
+      ),
+    );
     ```
 
-## yaru.dart flavors
+## Flavors and accent colors
 
-Yaru comes in 7x2 different versions:
-- `yaruLight` & `yaruDark`
-- `yaruXubuntuLight` & `yaruXubuntuDark`
-- `yaruKubuntuLight` & `yaruKubuntuDark`
-- `yaruLubuntuLight` & `yaruLubuntuDark`
-- `yaruUbuntuStudioLight` & `yaruUbuntuStudioDark`
-- `yaruMateLight` & `yaruMateDark`
-- `yaruUbuntuBudgieLight` & `yaruUbuntuBudgieDark`
+Yaru comes in several flavors and accent colors. The `YaruTheme` widget detects
+the appropriate flavor and accent color from the system on Linux, and defaults
+to `YaruFlavor.ubuntu` and `YaruAccent.orange` on other platforms. Applications
+may choose a specific flavor and accent color by manually setting the `accent`
+and `flavor` properties, respectively.
+
+   ```dart
+   YaruTheme(
+     accent: YaruAccent.red,
+     flavor: YaruFlavor.ubuntu,
+     child: ...
+   )
+   ```
 
 ## Contributing to yaru.dart
 

example/lib/main.dart

@@ -1,40 +1,47 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 import 'package:yaru/yaru.dart';
 import 'package:yaru_example/view/home_page.dart';
 
 void main() {
-  runApp(MultiProvider(
-    providers: [
-      ChangeNotifierProvider(create: (_) => LightTheme(yaruLight)),
-      ChangeNotifierProvider(create: (_) => DarkTheme(yaruDark)),
-      ChangeNotifierProvider(create: (_) => AppTheme(ThemeMode.light)),
-    ],
-    child: MyApp(),
-  ));
+  runApp(MyApp());
 }
 
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
-      home: HomePage(),
+      home: Builder(builder: (context) {
+        return YaruTheme(
+          data: AppTheme.of(context),
+          child: HomePage(),
+        );
+      }),
       debugShowCheckedModeBanner: false,
-      themeMode: context.watch<AppTheme>().value,
-      theme: context.watch<LightTheme>().value,
-      darkTheme: context.watch<DarkTheme>().value,
     );
   }
 }
 
-class LightTheme extends ValueNotifier<ThemeData> {
-  LightTheme(ThemeData value) : super(value);
-}
-
-class DarkTheme extends ValueNotifier<ThemeData> {
-  DarkTheme(ThemeData value) : super(value);
-}
+class AppTheme {
+  static YaruThemeData of(BuildContext context) {
+    return SharedAppData.getValue(context, 'theme', () => YaruThemeData());
+  }
 
-class AppTheme extends ValueNotifier<ThemeMode> {
-  AppTheme(ThemeMode value) : super(value);
+  static void apply(
+    BuildContext context, {
+    YaruAccent? accent,
+    YaruFlavor? flavor,
+    bool? highContrast,
+    ThemeMode? themeMode,
+  }) {
+    SharedAppData.setValue(
+      context,
+      'theme',
+      AppTheme.of(context).copyWith(
+        themeMode: themeMode,
+        accent: accent,
+        flavor: flavor,
+        highContrast: highContrast,
+      ),
+    );
+  }
 }

example/lib/view/home_page.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 import 'package:yaru/yaru.dart';
 import 'package:yaru_example/main.dart';
 import 'package:yaru_example/view/color_disk.dart';
@@ -41,9 +40,7 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
-    final themeMode = context.watch<AppTheme>();
-    final lightTheme = context.read<LightTheme>();
-    final darkTheme = context.read<DarkTheme>();
+    final theme = YaruTheme.of(context);
     return Scaffold(
       appBar: AppBar(
         leading: SizedBox(
@@ -54,34 +51,29 @@ class _HomePageState extends State<HomePage> {
                 style: TextButton.styleFrom(
                     padding: const EdgeInsets.all(0),
                     shape: const CircleBorder()),
-                onPressed: () => themeMode.value == ThemeMode.light
-                    ? themeMode.value = ThemeMode.dark
-                    : themeMode.value = ThemeMode.light,
-                child: Icon(themeMode.value == ThemeMode.light
+                onPressed: () => AppTheme.apply(context,
+                    themeMode: theme.themeMode == ThemeMode.light
+                        ? ThemeMode.dark
+                        : ThemeMode.light),
+                child: Icon(theme.themeMode == ThemeMode.light
                     ? Icons.dark_mode
                     : Icons.light_mode)),
           ),
         ),
         actions: [
           ColorDisk(
-              color: themeMode.value == ThemeMode.light
+              color: theme.themeMode == ThemeMode.light
                   ? Colors.black
                   : Colors.white,
-              selected: (lightTheme.value == yaruHighContrastLight ||
-                  darkTheme.value == yaruHighContrastDark),
-              onPressed: () {
-                lightTheme.value = yaruHighContrastLight;
-                darkTheme.value = yaruHighContrastDark;
-              }),
+              selected: theme.highContrast == true,
+              onPressed: () => AppTheme.apply(context, highContrast: true)),
           for (final accent in YaruAccent.values)
             ColorDisk(
-                color: getYaruLightTheme(accent).primaryColor,
-                selected: Theme.of(context).primaryColor ==
-                    getYaruLightTheme(accent).primaryColor,
-                onPressed: () {
-                  lightTheme.value = getYaruLightTheme(accent);
-                  darkTheme.value = getYaruDarkTheme(accent);
-                }),
+              color: getYaruLightTheme(accent).primaryColor,
+              selected: accent == theme.accent && theme.highContrast != true,
+              onPressed: () =>
+                  AppTheme.apply(context, accent: accent, highContrast: false),
+            ),
           SizedBox(
             width: 20,
           ),

example/pubspec.yaml

@@ -9,7 +9,6 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  provider: ^6.0.2
   yaru:
     path: ../