Support black theme alongside dark theme

lib/l10n/app_en.arb

@@ -321,6 +321,19 @@
 	"settingsScreenBrightnessDescription": "Override system brightness level",
 	"settingsForceRotationTitle": "Ignore rotation lock",
 	"settingsForceRotationDescription": "Rotate the screen even if auto rotation is disabled",
+	"settingsThemeSectionTitle": "Theme",
+	"settingsUseBlackInDarkThemeTitle": "Darker theme",
+	"@settingsUseBlackInDarkThemeTitle": {
+		"description": "Make the dark theme darker"
+	},
+	"settingsUseBlackInDarkThemeTrueDescription": "Use black in dark theme",
+	"@settingsUseBlackInDarkThemeTrueDescription": {
+		"description": "When black in dark theme is set to true"
+	},
+	"settingsUseBlackInDarkThemeFalseDescription": "Use dark grey in dark theme",
+	"@settingsUseBlackInDarkThemeFalseDescription": {
+		"description": "When black in dark theme is set to false"
+	},
 	"settingsAboutSectionTitle": "About",
 	"@settingsAboutSectionTitle": {
 		"description": "Title of the about section in settings widget"

lib/l10n/untranslated-messages.txt

@@ -6,6 +6,10 @@
     "settingsScreenBrightnessDescription",
     "settingsForceRotationTitle",
     "settingsForceRotationDescription",
+    "settingsThemeSectionTitle",
+    "settingsUseBlackInDarkThemeTitle",
+    "settingsUseBlackInDarkThemeTrueDescription",
+    "settingsUseBlackInDarkThemeFalseDescription",
     "listEmptyText",
     "albumTrashLabel",
     "restoreTooltip",
@@ -35,7 +39,11 @@
   ],
 
   "es": [
-    "collectionsTooltip"
+    "collectionsTooltip",
+    "settingsThemeSectionTitle",
+    "settingsUseBlackInDarkThemeTitle",
+    "settingsUseBlackInDarkThemeTrueDescription",
+    "settingsUseBlackInDarkThemeFalseDescription"
   ],
 
   "fr": [
@@ -45,6 +53,10 @@
     "settingsScreenBrightnessDescription",
     "settingsForceRotationTitle",
     "settingsForceRotationDescription",
+    "settingsThemeSectionTitle",
+    "settingsUseBlackInDarkThemeTitle",
+    "settingsUseBlackInDarkThemeTrueDescription",
+    "settingsUseBlackInDarkThemeFalseDescription",
     "helpTooltip",
     "removeFromAlbumTooltip",
     "fileSharedByDescription",
@@ -60,6 +72,10 @@
     "settingsScreenBrightnessDescription",
     "settingsForceRotationTitle",
     "settingsForceRotationDescription",
+    "settingsThemeSectionTitle",
+    "settingsUseBlackInDarkThemeTitle",
+    "settingsUseBlackInDarkThemeTrueDescription",
+    "settingsUseBlackInDarkThemeFalseDescription",
     "helpTooltip",
     "removeFromAlbumTooltip",
     "fileSharedByDescription",

lib/pref.dart

@@ -69,6 +69,11 @@ class Pref {
   bool isDarkThemeOr(bool def) => isDarkTheme() ?? def;
   Future<bool> setDarkTheme(bool value) => _pref.setBool("isDarkTheme", value);
 
+  bool? isUseBlackInDarkTheme() => _pref.getBool("isUseBlackInDarkTheme");
+  bool isUseBlackInDarkThemeOr(bool def) => isUseBlackInDarkTheme() ?? def;
+  Future<bool> setUseBlackInDarkTheme(bool value) =>
+      _pref.setBool("isUseBlackInDarkTheme", value);
+
   int? getLanguage() => _pref.getInt("language");
   int getLanguageOr(int def) => getLanguage() ?? def;
   Future<bool> setLanguage(int value) => _pref.setInt("language", value);

lib/theme.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:nc_photos/pref.dart';
 
 class AppTheme extends StatelessWidget {
   const AppTheme({
@@ -106,9 +107,21 @@ class AppTheme extends StatelessWidget {
   }
 
   static ThemeData _buildDarkThemeData(BuildContext context, ThemeData theme) {
+    final Color background;
+    final Color popup;
+    if (Pref.inst().isUseBlackInDarkThemeOr(false)) {
+      background = Colors.black;
+      popup = Colors.grey[900]!;
+    } else {
+      // in the material spec, black is suggested to be 0x121212, but the one
+      // used in flutter by default is 0x303030, why?
+      background = Colors.grey[850]!;
+      popup = Colors.grey[800]!;
+    }
+
     final appBarTheme = theme.appBarTheme.copyWith(
       brightness: Brightness.dark,
-      color: theme.scaffoldBackgroundColor,
+      color: background,
       actionsIconTheme:
           theme.primaryIconTheme.copyWith(color: Colors.white.withOpacity(.87)),
       iconTheme:
@@ -116,7 +129,19 @@ class AppTheme extends StatelessWidget {
       textTheme: theme.primaryTextTheme
           .apply(bodyColor: Colors.white.withOpacity(.87)),
     );
-    return theme.copyWith(appBarTheme: appBarTheme);
+    final bottomNavigationBarTheme = theme.bottomNavigationBarTheme.copyWith(
+      backgroundColor: background,
+    );
+    final popupMenuTheme = theme.popupMenuTheme.copyWith(
+      color: popup,
+    );
+    return theme.copyWith(
+      scaffoldBackgroundColor: background,
+      appBarTheme: appBarTheme,
+      bottomNavigationBarTheme: bottomNavigationBarTheme,
+      popupMenuTheme: popupMenuTheme,
+      dialogBackgroundColor: popup,
+    );
   }
 
   static const primarySwatchLight = Colors.blue;

lib/widget/settings.dart

@@ -55,6 +55,7 @@ class _SettingsState extends State<Settings> {
     _isEnableExif = Pref.inst().isEnableExifOr();
     _screenBrightness = Pref.inst().getViewerScreenBrightnessOr(-1);
     _isForceRotation = Pref.inst().isViewerForceRotationOr(false);
+    _isUseBlackInDarkTheme = Pref.inst().isUseBlackInDarkThemeOr(false);
   }
 
   @override
@@ -111,6 +112,16 @@ class _SettingsState extends State<Settings> {
                   onChanged: (value) => _onForceRotationChanged(value),
                 ),
               ],
+              _buildCaption(context, L10n.global().settingsThemeSectionTitle),
+              SwitchListTile(
+                title: Text(L10n.global().settingsUseBlackInDarkThemeTitle),
+                subtitle: Text(_isUseBlackInDarkTheme
+                    ? L10n.global().settingsUseBlackInDarkThemeTrueDescription
+                    : L10n.global()
+                        .settingsUseBlackInDarkThemeFalseDescription),
+                value: _isUseBlackInDarkTheme,
+                onChanged: (value) => _onUseBlackInDarkThemeChanged(value),
+              ),
               _buildCaption(context, L10n.global().settingsAboutSectionTitle),
               ListTile(
                 title: Text(L10n.global().settingsVersionTitle),
@@ -300,6 +311,27 @@ class _SettingsState extends State<Settings> {
 
   void _onForceRotationChanged(bool value) => _setForceRotation(value);
 
+  void _onUseBlackInDarkThemeChanged(bool value) async {
+    final oldValue = _isUseBlackInDarkTheme;
+    setState(() {
+      _isUseBlackInDarkTheme = value;
+    });
+    if (await Pref.inst().setUseBlackInDarkTheme(value)) {
+      if (Pref.inst().isDarkThemeOr(false)) {
+        KiwiContainer().resolve<EventBus>().fire(ThemeChangedEvent());
+      }
+    } else {
+      _log.severe("[_onUseBlackInDarkThemeChanged] Failed writing pref");
+      SnackBarManager().showSnackBar(SnackBar(
+        content: Text(L10n.global().writePreferenceFailureNotification),
+        duration: k.snackBarDurationNormal,
+      ));
+      setState(() {
+        _isUseBlackInDarkTheme = oldValue;
+      });
+    }
+  }
+
   void _onVersionTap(BuildContext context) {
     if (++_labUnlockCount >= 10) {
       Navigator.of(context).pushNamed(LabSettings.routeName);
@@ -377,6 +409,7 @@ class _SettingsState extends State<Settings> {
   late bool _isEnableExif;
   late int _screenBrightness;
   late bool _isForceRotation;
+  late bool _isUseBlackInDarkTheme;
   int _labUnlockCount = 0;
 
   static final _log = Logger("widget.settings._SettingsState");