Automatically use dark mode based on system settings

Fixes #193

assets/langs/en.yaml

@@ -14,8 +14,12 @@ settings:
       invalid: Please enter a valid email
   display:
     title: Display Settings
-    darkTheme: Dark Theme
     homeScreen: Home Screen
+    theme: Theme
+  theme:
+    light: Light
+    dark: Dark
+    default: System Default
   gitAuthor: Git Author Settings
   versionInfo: Version Info
   analytics: Analytics

changelog.yml

@@ -5,6 +5,7 @@
     - text: "Ignore folders with a .gjignore file. It's a temporary hack untill we start reading the .gjignore files like the .gitignore files"
     - text: "Add a working Experimental Markdown Toolbar"
     - text: "Basic Undo/Redo support for Raw Editor"
+    - text: "Automatically use dark mode based on system settings - #193"
 
 - version: "1.73"
   date: 2020-11-15

lib/app.dart

@@ -5,7 +5,6 @@ import 'package:flutter/foundation.dart' as foundation;
 import 'package:flutter/material.dart';
 
 import 'package:device_info/device_info.dart';
-import 'package:dynamic_theme/dynamic_theme.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:easy_localization_loader/easy_localization_loader.dart';
 import 'package:flutter_sentry/flutter_sentry.dart';
@@ -281,14 +280,6 @@ class _JournalAppState extends State<JournalApp> {
 
   @override
   Widget build(BuildContext context) {
-    return DynamicTheme(
-      defaultBrightness: Brightness.light,
-      data: (b) => b == Brightness.light ? Themes.light : Themes.dark,
-      themedWidgetBuilder: buildApp,
-    );
-  }
-
-  MaterialApp buildApp(BuildContext context, ThemeData themeData) {
     var stateContainer = Provider.of<Repository>(context);
     var settings = Provider.of<Settings>(context);
     var appSettings = Provider.of<AppSettings>(context);
@@ -303,7 +294,10 @@ class _JournalAppState extends State<JournalApp> {
       supportedLocales: EasyLocalization.of(context).supportedLocales,
       locale: EasyLocalization.of(context).locale,
 
-      theme: themeData,
+      theme: Themes.light,
+      darkTheme: Themes.dark,
+      themeMode: settings.theme.toThemeMode(),
+
       navigatorObservers: <NavigatorObserver>[
         AnalyticsRouteObserver(),
       ],

lib/screens/settings_screen.dart

@@ -2,7 +2,6 @@ import 'dart:io';
 
 import 'package:flutter/material.dart';
 
-import 'package:dynamic_theme/dynamic_theme.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:email_validator/email_validator.dart';
 import 'package:ext_storage/ext_storage.dart';
@@ -141,7 +140,6 @@ class SettingsListState extends State<SettingsList> {
       },
     );
 
-    var brightness = DynamicTheme.of(context).brightness;
     var defaultNewFolder = settings.defaultNewNoteFolderSpec;
     if (defaultNewFolder.isEmpty) {
       defaultNewFolder = tr("rootFolder");
@@ -158,13 +156,15 @@ class SettingsListState extends State<SettingsList> {
 
     return ListView(children: [
       SettingsHeader(tr('settings.display.title')),
-      SwitchListTile(
+      ListPreference(
-        title: Text(tr('settings.display.darkTheme')),
+        title: tr('settings.display.theme'),
-        value: brightness == Brightness.dark,
+        currentOption: settings.theme.toPublicString(),
-        onChanged: (bool newVal) {
+        options: SettingsTheme.options.map((f) => f.toPublicString()).toList(),
-          var b = newVal ? Brightness.dark : Brightness.light;
+        onChange: (String publicStr) {
-          var dynamicTheme = DynamicTheme.of(context);
+          var s = SettingsTheme.fromPublicString(publicStr);
-          dynamicTheme.setBrightness(b);
+          settings.theme = s;
+          settings.save();
+          setState(() {});
         },
       ),
       ProOverlay(

lib/settings.dart

@@ -48,6 +48,7 @@ class Settings extends ChangeNotifier {
   int version = 2;
 
   SettingsHomeScreen homeScreen = SettingsHomeScreen.Default;
+  SettingsTheme theme = SettingsTheme.Default;
 
   SettingsMarkdownDefaultView markdownDefaultView =
       SettingsMarkdownDefaultView.Default;
@@ -127,6 +128,7 @@ class Settings extends ChangeNotifier {
 
     homeScreen =
         SettingsHomeScreen.fromInternalString(_getString(pref, "homeScreen"));
+    theme = SettingsTheme.fromInternalString(_getString(pref, "theme"));
 
     imageLocationSpec =
         _getString(pref, "imageLocationSpec") ?? imageLocationSpec;
@@ -232,6 +234,8 @@ class Settings extends ChangeNotifier {
     await _setBool(pref, "emojiParser", emojiParser, defaultSet.emojiParser);
     await _setString(pref, "homeScreen", homeScreen.toInternalString(),
         defaultSet.homeScreen.toInternalString());
+    await _setString(pref, "theme", theme.toInternalString(),
+        defaultSet.theme.toInternalString());
     await _setString(pref, "imageLocationSpec", imageLocationSpec,
         defaultSet.imageLocationSpec);
     await _setBool(pref, "zenMode", zenMode, defaultSet.zenMode);
@@ -349,6 +353,7 @@ class Settings extends ChangeNotifier {
       'markdownDefaultView': markdownDefaultView.toInternalString(),
       'markdownLastUsedView': markdownLastUsedView.toInternalString(),
       'homeScreen': homeScreen.toInternalString(),
+      'theme': theme.toInternalString(),
       'imageLocationSpec': imageLocationSpec,
       'zenMode': zenMode.toString(),
       'saveTitleInH1': saveTitleInH1.toString(),
@@ -784,3 +789,63 @@ class SettingsHomeScreen {
 String generateRandomId() {
   return Uuid().v4().substring(0, 8);
 }
+
+class SettingsTheme {
+  static const Dark = SettingsTheme("settings.theme.dark", "dark");
+  static const Light = SettingsTheme("settings.theme.light", "light");
+  static const SystemDefault =
+      SettingsTheme("settings.theme.default", "default");
+  static const Default = SystemDefault;
+
+  final String _str;
+  final String _publicString;
+  const SettingsTheme(this._publicString, this._str);
+
+  String toInternalString() {
+    return _str;
+  }
+
+  String toPublicString() {
+    return tr(_publicString);
+  }
+
+  static const options = <SettingsTheme>[
+    Light,
+    Dark,
+    SystemDefault,
+  ];
+
+  static SettingsTheme fromInternalString(String str) {
+    for (var opt in options) {
+      if (opt.toInternalString() == str) {
+        return opt;
+      }
+    }
+    return Default;
+  }
+
+  static SettingsTheme fromPublicString(String str) {
+    for (var opt in options) {
+      if (opt.toPublicString() == str) {
+        return opt;
+      }
+    }
+    return Default;
+  }
+
+  @override
+  String toString() {
+    assert(false, "SettingsTheme toString should never be called");
+    return "";
+  }
+
+  ThemeMode toThemeMode() {
+    if (this == SystemDefault) {
+      return ThemeMode.system;
+    }
+    if (this == Light) {
+      return ThemeMode.light;
+    }
+    return ThemeMode.dark;
+  }
+}

lib/widgets/app_drawer_header.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 
-import 'package:dynamic_theme/dynamic_theme.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:function_types/function_types.dart';
@@ -8,6 +7,7 @@ import 'package:provider/provider.dart';
 import 'package:time/time.dart';
 
 import 'package:gitjournal/app_settings.dart';
+import 'package:gitjournal/settings.dart';
 
 class AppDrawerHeader extends StatelessWidget {
   final Func0<void> repoListToggled;
@@ -180,12 +180,15 @@ class ThemeSwitcherButton extends StatelessWidget {
     return GestureDetector(
       child: const FaIcon(FontAwesomeIcons.solidMoon),
       onTap: () {
-        var dynamicTheme = DynamicTheme.of(context);
+        var theme = Theme.of(context);
-        var brightness = dynamicTheme.brightness;
+        var settings = context.read<Settings>();
 
-        dynamicTheme.setBrightness(brightness == Brightness.light
+        if (theme.brightness == Brightness.light) {
-            ? Brightness.dark
+          settings.theme = SettingsTheme.Dark;
-            : Brightness.light);
+        } else {
+          settings.theme = SettingsTheme.Light;
+        }
+        settings.save();
       },
     );
   }

pubspec.lock

@@ -213,13 +213,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.0.5+1"
-  dynamic_theme:
-    dependency: "direct main"
-    description:
-      name: dynamic_theme
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.0.1"
   easy_localization:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -27,7 +27,6 @@ dependencies:
   crypton: ^1.1.3
   device_info: ">=0.4.2+4 <2.0.0"
   dots_indicator: ^0.0.3
-  dynamic_theme: ^1.0.0
   easy_localization: ^2.3.2
   easy_localization_loader: ^0.0.2
   email_validator: ^1.0.6