feat: black theme (#76)

* feat: black theme * fix: `ToggleButton` not clear in black theme
miru-project · Sep 24, 2023 · ea539a0 · ea539a0
1 parent 66d6962
commit ea539a0
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 6 deletions.
diff --git a/assets/i18n/en.json b/assets/i18n/en.json
@@ -89,6 +89,7 @@
     "theme-system": "System",
     "theme-light": "Light",
     "theme-dark": "Dark",
+    "theme-black": "Black",
     "nsfw": "NSFW",
     "nsfw-subtitle": "Show NSFW content",
     "external-player": "Preferred video player",

diff --git a/assets/i18n/zh.json b/assets/i18n/zh.json
@@ -78,6 +78,7 @@
     "theme-system": "跟随系统",
     "theme-light": "浅色",
     "theme-dark": "深色",
+    "theme-black": "黑色",
     "nsfw": "NSFW",
     "nsfw-subtitle": "显示 NSFW 内容",
     "external-player": "优先使用的视频播放器",

diff --git a/lib/controller.dart b/lib/controller.dart
@@ -13,12 +13,50 @@ class ApplicationController extends GetxController {
     super.onInit();
   }
 
+  ThemeData get currentThemeData {
+    switch (themeText.value) {
+      case "light":
+        return ThemeData.light(useMaterial3: true);
+      case "dark":
+        return ThemeData.dark(useMaterial3: true);
+      case "black":
+        return ThemeData.dark(
+          useMaterial3: true,
+        ).copyWith(
+          scaffoldBackgroundColor: Colors.black,
+          canvasColor: Colors.black,
+          cardColor: Colors.black,
+          dialogBackgroundColor: Colors.black,
+          primaryColor: Colors.black,
+          hintColor: Colors.black,
+          primaryColorDark: Colors.black,
+          primaryColorLight: Colors.black,
+          colorScheme: const ColorScheme.dark(
+            primary: Colors.white,
+            onBackground: Colors.white,
+            onSecondary: Colors.white,
+            onSurface: Colors.white,
+            secondary: Colors.black,
+            surface: Colors.black,
+            background: Colors.black,
+            onPrimary: Colors.black,
+            primaryContainer: Color.fromARGB(255, 31, 31, 31),
+            surfaceTint: Colors.black,
+          ),
+        );
+      default:
+        return ThemeData.light(useMaterial3: true);
+    }
+  }
+
   ThemeMode get theme {
     switch (themeText.value) {
       case "light":
         return ThemeMode.light;
       case "dark":
         return ThemeMode.dark;
+      case "black":
+        return ThemeMode.light;
       default:
         return ThemeMode.system;
     }

diff --git a/lib/main.dart b/lib/main.dart
@@ -95,7 +95,7 @@ class _MainAppState extends fluent.State<MainApp> {
       title: "Miru",
       debugShowCheckedModeBanner: false,
       themeMode: c.theme,
-      theme: ThemeData(useMaterial3: true),
+      theme: c.currentThemeData,
       darkTheme: ThemeData.dark(useMaterial3: true),
       home: const AndroidMainPage(),
       localizationsDelegates: [

diff --git a/lib/pages/settings/view.dart b/lib/pages/settings/view.dart
@@ -223,11 +223,17 @@ class _SettingsPageState extends State<SettingsPage> {
             desktopWidget: Icon(fluent.FluentIcons.color, size: 24),
           ),
           title: 'settings.theme'.i18n,
-          itemNameValue: {
-            'settings.theme-system'.i18n: 'system',
-            'settings.theme-light'.i18n: 'light',
-            'settings.theme-dark'.i18n: 'dark',
-          },
+          itemNameValue: () {
+            final map = {
+              'settings.theme-system'.i18n: 'system',
+              'settings.theme-light'.i18n: 'light',
+              'settings.theme-dark'.i18n: 'dark',
+            };
+            if (Platform.isAndroid) {
+              map['settings.theme-black'.i18n] = 'black';
+            }
+            return map;
+          }(),
           buildSubtitle: () => 'settings.theme-subtitle'.i18n,
           applyValue: (value) {
             Get.find<ApplicationController>().changeTheme(value);

diff --git a/lib/widgets/button.dart b/lib/widgets/button.dart
@@ -121,6 +121,15 @@ class PlatformToggleButton extends fluent.StatelessWidget {
   Widget _buildAndroid(BuildContext context) {
     return TextButton(
       onPressed: () => onChanged?.call(!checked),
+      style: ButtonStyle(
+        side: MaterialStateProperty.all(
+          BorderSide(
+            color: checked
+                ? Theme.of(context).colorScheme.primary
+                : Colors.transparent,
+          ),
+        ),
+      ),
       child: Text(
         text,
         style: TextStyle(