OT-717: Unreadable Status Bar

lib/main.dart

@@ -68,34 +68,32 @@ void main() {
   final errorBloc = ErrorBloc();
 
   WidgetsFlutterBinding.ensureInitialized(); // Required to allow plugin calls prior runApp() (performed by LogManager.setup())
-  _logManager.setup(logToFile: true, logLevel: Level.INFO).then(
-        (value) => runApp(
-          MultiBlocProvider(
-            providers: [
-              BlocProvider<LifecycleBloc>(
-                create: (BuildContext context) {
-                  var lifecycleBloc = LifecycleBloc();
-                  lifecycleBloc.add(ListenerSetup());
-                  return lifecycleBloc;
-                },
-              ),
-              BlocProvider<PushBloc>(
-                create: (BuildContext context) => PushBloc(),
-              ),
-              BlocProvider<ErrorBloc>(
-                create: (BuildContext context) => errorBloc,
-              ),
-              BlocProvider<MainBloc>(
-                create: (BuildContext context) => MainBloc(errorBloc),
-              ),
-            ],
-            child: CustomTheme(
-              initialThemeKey: ThemeKey.LIGHT,
-              child: OxCoiApp(),
+  _logManager.setup(logToFile: true, logLevel: Level.INFO).then((value) => runApp(
+        MultiBlocProvider(
+          providers: [
+            BlocProvider<LifecycleBloc>(
+              create: (BuildContext context) {
+                var lifecycleBloc = LifecycleBloc();
+                lifecycleBloc.add(ListenerSetup());
+                return lifecycleBloc;
+              },
             ),
+            BlocProvider<PushBloc>(
+              create: (BuildContext context) => PushBloc(),
+            ),
+            BlocProvider<ErrorBloc>(
+              create: (BuildContext context) => errorBloc,
+            ),
+            BlocProvider<MainBloc>(
+              create: (BuildContext context) => MainBloc(errorBloc),
+            ),
+          ],
+          child: CustomTheme(
+            initialThemeKey: ThemeKey.light,
+            child: OxCoiApp(),
           ),
         ),
-      );
+      ));
 }
 
 class OxCoiApp extends StatelessWidget {
@@ -104,20 +102,23 @@ class OxCoiApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var customTheme = CustomTheme.of(context);
+    final themeData = ThemeData(
+      brightness: customTheme.brightness,
+      backgroundColor: customTheme.background,
+      scaffoldBackgroundColor: customTheme.background,
+      toggleableActiveColor: customTheme.accent,
+      accentColor: customTheme.accent,
+      primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
+            color: customTheme.onSurface,
+          ),
+      primaryTextTheme: Theme.of(context).primaryTextTheme.apply(
+            bodyColor: customTheme.onSurface,
+          ),
+    );
+
     return MaterialApp(
-      theme: ThemeData(
-        brightness: customTheme.brightness,
-        backgroundColor: customTheme.background,
-        scaffoldBackgroundColor: customTheme.background,
-        toggleableActiveColor: customTheme.accent,
-        accentColor: customTheme.accent,
-        primaryIconTheme: Theme.of(context).primaryIconTheme.copyWith(
-              color: customTheme.onSurface,
-            ),
-        primaryTextTheme: Theme.of(context).primaryTextTheme.apply(
-              bodyColor: customTheme.onSurface,
-            ),
-      ),
+      theme: themeData,
+      themeMode: customTheme.brightness == Brightness.light ? ThemeMode.light : ThemeMode.dark,
       localizationsDelegates: getLocalizationsDelegates(),
       supportedLocales: L10n.supportedLocales,
       localeResolutionCallback: (deviceLocale, supportedLocales) {

lib/src/brandable/brandable_icon.dart

@@ -103,7 +103,7 @@ enum IconSource {
   retry,
   checkedCircle,
   circle,
-  darkMode,
+  appearance,
   qr,
   signature,
   serverSetting,
@@ -173,7 +173,7 @@ const iconData = {
   IconSource.retry: Icons.autorenew,
   IconSource.checkedCircle: Icons.check_circle,
   IconSource.circle: Icons.radio_button_unchecked,
-  IconSource.darkMode: Icons.brightness_2,
+  IconSource.appearance: Icons.palette,
   IconSource.qr: Icons.filter_center_focus,
   IconSource.signature: Icons.gesture,
   IconSource.serverSetting: Icons.router,

lib/src/brandable/branded_theme.dart

@@ -52,7 +52,7 @@ class BrandedTheme {
   final Color chatIcon = Colors.lightBlue[800];
   final Color signatureIcon = Colors.blue[600];
   final Color serverSettingsIcon = Colors.indigo[600];
-  final Color darkModeIcon = Colors.deepPurple[500];
+  final Color appearanceIcon = Colors.deepPurple[500];
   final Color dataProtectionIcon = Colors.purple[400];
   final Color blockIcon = Colors.pink[500];
   final Color encryptionIcon = Colors.red[600];

lib/src/brandable/custom_theme.dart

@@ -40,14 +40,22 @@
  * for more details.
  */
 
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:ox_coi/src/platform/preferences.dart';
-
-import 'branded_theme.dart';
+import 'package:ox_coi/src/brandable/branded_theme.dart';
 
 enum ThemeKey {
-  LIGHT,
-  DARK,
+  system,
+  light,
+  dark,
+}
+
+extension ThemeKeyStrings on ThemeKey {
+  String get stringValue {
+    return describeEnum(this);
+  }
 }
 
 class CustomerThemes {
@@ -93,12 +101,13 @@ class CustomerThemes {
 
   static BrandedTheme getThemeFromKey(ThemeKey themeKey) {
     switch (themeKey) {
-      case ThemeKey.LIGHT:
+      case ThemeKey.light:
         return lightTheme;
-      case ThemeKey.DARK:
+      case ThemeKey.dark:
         return darkTheme;
       default:
-        return lightTheme;
+        final brightness = WidgetsBinding.instance.window.platformBrightness;
+        return brightness == Brightness.light ? lightTheme : darkTheme;
     }
   }
 }
@@ -122,11 +131,7 @@ class CustomTheme extends StatefulWidget {
   final Widget child;
   final ThemeKey initialThemeKey;
 
-  const CustomTheme({
-    Key key,
-    this.initialThemeKey,
-    @required this.child,
-  }) : super(key: key);
+  const CustomTheme({Key key, this.initialThemeKey, @required this.child}) : super(key: key);
 
   @override
   CustomThemeState createState() => new CustomThemeState();
@@ -140,6 +145,21 @@ class CustomTheme extends StatefulWidget {
     _CustomTheme inherited = (context.dependOnInheritedWidgetOfExactType<_CustomTheme>());
     return inherited.data;
   }
+
+  static ThemeKey getThemeKeyFor({@required String name}) {
+    if (name == ThemeKey.system.stringValue) {
+      return ThemeKey.system;
+    } else if (name == ThemeKey.light.stringValue) {
+      return ThemeKey.light;
+    } else {
+      return ThemeKey.dark;
+    }
+  }
+
+  static ThemeKey get systemThemeKey {
+    final brightness = WidgetsBinding.instance.window.platformBrightness;
+    return brightness == Brightness.light ? ThemeKey.light : ThemeKey.dark;
+  }
 }
 
 class CustomThemeState extends State<CustomTheme> with WidgetsBindingObserver {
@@ -169,22 +189,44 @@ class CustomThemeState extends State<CustomTheme> with WidgetsBindingObserver {
     _checkSavedTheme();
   }
 
-  void _checkSavedTheme() async{
-    var newThemeKey;
-    String savedThemeKey = await getPreference(preferenceAppThemeKey);
-    if(savedThemeKey == null){
-      final Brightness brightness = WidgetsBinding.instance.window.platformBrightness;
-      newThemeKey = brightness == Brightness.light ? ThemeKey.LIGHT : ThemeKey.DARK;
-    }else{
-      newThemeKey = savedThemeKey.compareTo(ThemeKey.LIGHT.toString()) == 0 ? ThemeKey.LIGHT : ThemeKey.DARK;
+  Future<void> _checkSavedTheme() async {
+    var savedThemeKeyString = await getPreference(preferenceApplicationTheme);
+
+    ThemeKey savedThemeKey;
+    if (savedThemeKeyString == null) {
+      savedThemeKey = ThemeKey.system;
+      savedThemeKeyString = savedThemeKey.stringValue;
+      await setPreference(preferenceApplicationTheme, savedThemeKeyString);
+    }
+
+    ThemeKey newThemeKey;
+    if (savedThemeKey == ThemeKey.system) {
+      newThemeKey = CustomTheme.systemThemeKey;
+    } else {
+      newThemeKey = CustomTheme.getThemeKeyFor(name: savedThemeKeyString);
     }
-    changeTheme(newThemeKey);
+
+    await changeTheme(themeKey: newThemeKey, preservePreference: true);
   }
 
-  void changeTheme(ThemeKey themeKey) {
+  Future<void> changeTheme({@required ThemeKey themeKey, bool preservePreference = false}) async {
     setState(() {
       _actualThemeKey = themeKey;
       _theme = CustomerThemes.getThemeFromKey(themeKey);
+
+      if (!preservePreference) {
+        setPreference(preferenceApplicationTheme, themeKey.stringValue);
+      }
+
+      SystemUiOverlayStyle overlayStyle;
+      if (themeKey == ThemeKey.system) {
+        final platformBrightness = WidgetsBinding.instance.window.platformBrightness;
+        overlayStyle = platformBrightness == Brightness.light ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light;
+      } else {
+        overlayStyle = themeKey == ThemeKey.dark ? SystemUiOverlayStyle.light : SystemUiOverlayStyle.dark;
+      }
+
+      SystemChrome.setSystemUIOverlayStyle(overlayStyle);
     });
   }
 

lib/src/l10n/l.dart

@@ -430,14 +430,20 @@ class L {
   static final settingItemChatTitle = _translationKey("Chat");
   static final settingItemSignatureTitle = _translationKey("Email signature");
   static final settingItemServerSettingsTitle = _translationKey("Server settings");
-  static final settingItemDarkModeTitle = _translationKey("Dark mode");
   static final settingItemDataProtectionTitle = _translationKey("Data protection");
   static final settingItemBlockedTitle = _translationKey("Blocked contacts");
   static final settingItemEncryptionTitle = _translationKey("Encryption");
   static final settingItemAboutTitle = _translationKey("About");
   static final settingItemFeedbackTitle = _translationKey("Feedback");
   static final settingItemBugReportTitle = _translationKey("Report a bug");
 
+  static final settingsAppearanceTitle = _translationKey("Appearance");
+  static final settingsAppearanceSystemTitle = _translationKey("System");
+  static final settingsAppearanceDarkTitle = _translationKey("Dark");
+  static final settingsAppearanceLightTitle = _translationKey("Light");
+  static final settingsAppearanceDescritpion = _translationKey("Here you can choose your favorite theme. If you choose '%s', the theme may change automatically. This depends on whether you have selected 'Automatic' in the system preferences or not.");
+  static final settingsAppearanceSystemThemeDescription = _translationKey("Current System theme is: %s");
+
   static List<String> _translationKey(String key, [String pluralKey]) {
     String logging = "Registered localization key: '$key'";
     if (!pluralKey.isNullOrEmpty()) {

lib/src/navigation/navigatable.dart

@@ -99,6 +99,7 @@ enum Type {
   settingsKeyTransferDoneDialog,
   settingsAutocryptImport,
   settingsNotifications,
+  settingsAppearance,
   splash,
   share,
   showQr,

lib/src/navigation/navigation.dart

@@ -53,10 +53,11 @@ import 'package:ox_coi/src/navigation/navigatable.dart';
 import 'package:ox_coi/src/settings/settings.dart';
 import 'package:ox_coi/src/settings/settings_about.dart';
 import 'package:ox_coi/src/settings/settings_anti_mobbing.dart';
+import 'package:ox_coi/src/settings/settings_appearance.dart';
 import 'package:ox_coi/src/settings/settings_chat.dart';
 import 'package:ox_coi/src/settings/settings_debug.dart';
-import 'package:ox_coi/src/settings/settings_notifications.dart';
 import 'package:ox_coi/src/settings/settings_encryption.dart';
+import 'package:ox_coi/src/settings/settings_notifications.dart';
 import 'package:ox_coi/src/user/user_account_settings.dart';
 
 class Navigation {
@@ -70,6 +71,7 @@ class Navigation {
   static const String settingsAbout = '/settings/about';
   static const String settingsChat = '/settings/chat';
   static const String settingsAntiMobbing = '/settings/antiMobbing';
+  static const String settingsAppearance = '/settings/appearance';
   static const String settingsNotifications = '/settings/notifications';
   static const String settingsAntiMobbingList = '/settings/antiMobbingList';
   static const String settingsDebug = '/settings/debug';
@@ -86,6 +88,7 @@ class Navigation {
     settingsChat: (context) => SettingsChat(),
     settingsAntiMobbing: (context) => SettingsAntiMobbing(),
     settingsAntiMobbingList: (context) => AntiMobbingList(),
+    settingsAppearance: (context) => SettingsAppearance(),
     settingsNotifications: (context) => SettingsNotifications(),
     settingsDebug: (context) => SettingsDebug(),
     chatCreate: (context) => ChatCreate(),

lib/src/platform/preferences.dart

@@ -40,6 +40,7 @@
  * for more details.
  */
 
+import 'package:flutter/cupertino.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
 const preferenceSystemContactsImportShown = "preferenceSystemContactsImportShown";
@@ -54,7 +55,7 @@ const preferenceNotificationsPushStatus = "preferenceNotificationsPushStatus";
 const preferenceAppState = "preferenceAppState";
 const preferenceInviteServiceUrl = "preferenceInviteServiceUrl";
 const preferenceHasAuthenticationError = "preferenceHasAuthenticationError";
-const preferenceAppThemeKey = "preferenceAppThemeKey";
+const preferenceApplicationTheme = "preferenceApplicationTheme";
 
 const preferenceNotificationsAuth = "preferenceNotificationsAuth"; // Unused
 const preferenceNotificationsP256dhPublic = "preferenceNotificationsP256dhPublic"; // Unused
@@ -96,4 +97,4 @@ Future<void> removePreference(String key) async {
 Future<void> clearPreferences() async {
   SharedPreferences sharedPreferences = await getSharedPreferences();
   await sharedPreferences.clear();
-}
+}

lib/src/settings/settings_anti_mobbing.dart

@@ -44,6 +44,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:ox_coi/src/brandable/brandable_icon.dart';
+import 'package:ox_coi/src/brandable/custom_theme.dart';
 import 'package:ox_coi/src/l10n/l.dart';
 import 'package:ox_coi/src/l10n/l10n.dart';
 import 'package:ox_coi/src/navigation/navigatable.dart';
@@ -93,7 +94,11 @@ class _SettingsAntiMobbingState extends State<SettingsAntiMobbing> {
                 contentPadding: EdgeInsets.symmetric(vertical: listItemPadding, horizontal: listItemPadding),
                 title: Text(L10n.get(L.settingAntiMobbing)),
                 subtitle: Text(L10n.get(L.settingAntiMobbingText)),
-                trailing: Switch.adaptive(value: state.antiMobbingActive, onChanged: (value) => _changeAntiMobbingSetting()),
+                trailing: Switch.adaptive(
+                  value: state.antiMobbingActive,
+                  onChanged: (value) => _changeAntiMobbingSetting(),
+                  activeColor: CustomTheme.of(context).accent,
+                ),
               ),
               Visibility(
                   visible: state.antiMobbingActive,