feat: theme mode option

Author: MiaoMint

assets/i18n/en.json

@@ -62,18 +62,23 @@
     "tmdb-key-subtitle": "Get API Key for TMDB metadata",
     "upgrade": "Update Software",
     "upgrade-subtitle": "version: {version}",
-    "upgrade-training": "Check for Updates",
+    "upgrade-training": "Check",
     "auto-check-update": "Automatically Check for Updates",
     "auto-check-update-subtitle": "Check for updates on each startup",
     "language": "Language",
+    "theme": "Theme",
+    "theme-subtitle": "Change the theme of the software",
+    "theme-system": "System",
+    "theme-light": "Light",
+    "theme-dark": "Dark",
     "language-subtitle": "Change the language of the software",
     "extension-log": "Extension Log Window",
     "extension-log-subtitle": "Used for debugging extensions",
     "about": "About",
     "official-site": "Official Website",
-    "official-site-training": "Visit the official website",
+    "official-site-training": "Visit",
     "source-code": "Open Source",
-    "source-code-training": "Go to Star",
+    "source-code-training": "Star",
     "license": "License",
     "license-subtitle": "License"
   },
@@ -95,6 +100,7 @@
     "no-episodes": "No episodes",
     "play-complete": "Playback complete",
     "resume-last-playback": "Resume last playback",
+    "subtitle-none": "No Subtitle",
     "subtitle": "Subtitle",
     "subtitle-change": "Change Subtitle {title}",
     "subtitle-file": "Subtitle File"

assets/i18n/zh.json

@@ -72,6 +72,11 @@
     "auto-check-update": "自动检查更新",
     "auto-check-update-subtitle": "每次启动时检查更新",
     "language": "语言",
+    "theme": "主题",
+    "theme-subtitle": "选择软件的主题",
+    "theme-system": "跟随系统",
+    "theme-light": "浅色",
+    "theme-dark": "深色",
     "language-subtitle": "选择软件的语言",
     "extension-log": "扩展日志窗口",
     "extension-log-subtitle": "用于调试扩展",

lib/controller.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:miru_app/utils/miru_storage.dart';
+
+class ApplicationController extends GetxController {
+  static get find => Get.find();
+
+  final themeText = "system".obs;
+
+  @override
+  void onInit() {
+    themeText.value = MiruStorage.getSetting(SettingKey.theme);
+    super.onInit();
+  }
+
+  ThemeMode get theme {
+    switch (themeText.value) {
+      case "light":
+        return ThemeMode.light;
+      case "dark":
+        return ThemeMode.dark;
+      default:
+        return ThemeMode.system;
+    }
+  }
+
+  changeTheme(String mode) {
+    MiruStorage.setSetting(SettingKey.theme, mode);
+    themeText.value = mode;
+    Get.forceAppUpdate();
+  }
+}

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:get/get.dart';
 import 'package:media_kit/media_kit.dart';
+import 'package:miru_app/controller.dart';
 import 'package:miru_app/pages/extension_log/view.dart';
 import 'package:miru_app/pages/main/view.dart';
 import 'package:miru_app/router/router.dart';
@@ -73,14 +74,27 @@ void main(List<String> args) async {
   runApp(const MainApp());
 }
 
-class MainApp extends StatelessWidget {
+class MainApp extends fluent.StatefulWidget {
   const MainApp({super.key});
 
+  @override
+  fluent.State<MainApp> createState() => _MainAppState();
+}
+
+class _MainAppState extends fluent.State<MainApp> {
+  late ApplicationController c;
+
+  @override
+  void initState() {
+    c = Get.put(ApplicationController());
+    super.initState();
+  }
+
   Widget _buildMobileMain(BuildContext context) {
     return GetMaterialApp(
       title: "Miru",
       debugShowCheckedModeBanner: false,
-      themeMode: ThemeMode.system,
+      themeMode: c.theme,
       theme: ThemeData(useMaterial3: true),
       darkTheme: ThemeData.dark(useMaterial3: true),
       home: const AndroidMainPage(),
@@ -95,7 +109,7 @@ class MainApp extends StatelessWidget {
       title: 'Miru',
       debugShowCheckedModeBanner: false,
       routerConfig: router,
-      themeMode: ThemeMode.system,
+      themeMode: c.theme,
       darkTheme: fluent.FluentThemeData(
         brightness: Brightness.dark,
         visualDensity: VisualDensity.standard,

lib/pages/main/controller.dart

@@ -1,4 +1,5 @@
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:get/get.dart';
 
 class MainController extends GetxController {
@@ -11,8 +12,9 @@ class MainController extends GetxController {
   List<Widget> actions = <Widget>[].obs;
 
   setAcitons(List<Widget> list) async {
-    await Future.delayed(const Duration(milliseconds: 1));
-    actions.clear();
-    actions.addAll(list);
+    SchedulerBinding.instance.addPostFrameCallback((_) {
+      actions.clear();
+      actions.addAll(list);
+    });
   }
 }

lib/pages/settings/view.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:get/get.dart';
 import 'package:miru_app/api/tmdb.dart';
+import 'package:miru_app/controller.dart';
 import 'package:miru_app/pages/extension_repo/controller.dart';
 import 'package:miru_app/pages/settings/controller.dart';
 import 'package:miru_app/widgets/settings_input_tile.dart';
@@ -163,6 +164,26 @@ class _SettingsPageState extends State<SettingsPage> {
           },
         ),
         const SizedBox(height: 8),
+        SettingsRadiosTile(
+          icon: const PlatformWidget(
+            androidWidget: Icon(Icons.color_lens),
+            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',
+          },
+          buildSubtitle: () => 'settings.theme-subtitle'.i18n,
+          applyValue: (value) {
+            Get.find<ApplicationController>().changeTheme(value);
+          },
+          buildGroupValue: () {
+            return Get.find<ApplicationController>().themeText.value;
+          },
+        ),
+        const SizedBox(height: 8),
         if (!Platform.isAndroid)
           Obx(
             () {

lib/utils/miru_storage.dart

@@ -33,6 +33,7 @@ class MiruStorage {
     await _initSetting(SettingKey.autoCheckUpdate, true);
     await _initSetting(SettingKey.language, 'en');
     await _initSetting(SettingKey.novelFontSize, 18.0);
+    await _initSetting(SettingKey.theme, 'system');
   }
 
   static _initSetting(String key, dynamic value) async {
@@ -51,6 +52,7 @@ class MiruStorage {
 }
 
 class SettingKey {
+  static String theme = "Theme";
   static String miruRepoUrl = "MiruRepoUrl";
   static String tmdbKay = 'TMDBKey';
   static String autoCheckUpdate = 'AutoCheckUpdate';

lib/widgets/infinite_scroller.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:miru_app/widgets/platform_widget.dart';
 import 'package:easy_refresh/easy_refresh.dart';
 
@@ -32,16 +33,13 @@ class _InfiniteScrollerState extends State<InfiniteScroller> {
   @override
   void initState() {
     if (!Platform.isAndroid && widget.refreshOnStart) {
-      _onRefresh();
+      SchedulerBinding.instance.addPostFrameCallback((_) {
+        widget.onRefresh();
+      });
     }
     super.initState();
   }
 
-  _onRefresh() async {
-    await Future.delayed(const Duration(milliseconds: 1));
-    widget.onRefresh();
-  }
-
   void _onScroll(ScrollMetrics metrics) {
     if (metrics.atEdge && metrics.pixels == metrics.maxScrollExtent) {
       if (_isLoding || !widget.enableInfiniteScroll) {