テーマをインストールできるように

lib/l10n/app_ja.arb

@@ -385,7 +385,7 @@
             }
         }
     },
-    
+
     "notificationAll": "みんな",
     "notificationForMe": "自分宛て",
     "notificationDirect": "ダイレクト",
@@ -718,6 +718,10 @@
             }
         }
     },
+
+    "invalidThemeFormat": "テーマの形式が間違っています",
+    "alreadyInstalledTheme": "このテーマは既にインストールされています",
+
     "importFromThisFolder": "このフォルダーからインポートする",
     "exportedFileNotFound": "ここにMiriaの設定ファイルあれへんかったわ",
     "importCompleted": "インポート終わったで。",
@@ -814,6 +818,7 @@
         }
     },
     "selectLightOrDarkMode": "ライトモード・ダークモードのつかいわけ",
+    "manageThemes": "テーマの管理",
     "reaction": "リアクション",
     "emojiTapReaction": "ノート内の絵文字タップでリアクションする",
     "emojiTapReactionDescription": "ノート内の絵文字をタップしてリアクションします。MFMや外部サーバーの絵文字の場合うまく機能しないことがあります。",
@@ -825,6 +830,12 @@
     "fontFantasy": "フォント （$[font.fantasy 用）",
     "fontSize": "フォントサイズ",
     "systemFont": "システム標準",
+    "installTheme": "テーマのインストール",
+    "themeCode": "テーマコード",
+    "install": "インストール",
+    "installedThemes": "インストールされたテーマ",
+    "noInstalledThemes": "インストールされたテーマがありません",
+    "confirmDeleteTheme": "このテーマを削除しますか？",
 
     "selectFolder": "フォルダー選択",
     "settingsFileManagement": "設定ファイルの管理",

lib/router/app_router.dart

@@ -52,6 +52,8 @@ import "package:miria/view/server_detail_dialog.dart";
 import "package:miria/view/settings_page/account_settings_page/account_list.dart";
 import "package:miria/view/settings_page/app_info_page/app_info_page.dart";
 import "package:miria/view/settings_page/general_settings_page/general_settings_page.dart";
+import "package:miria/view/settings_page/general_settings_page/install_theme_dialog.dart";
+import "package:miria/view/settings_page/general_settings_page/installed_themes_page.dart";
 import "package:miria/view/settings_page/import_export_page/folder_select_dialog.dart";
 import "package:miria/view/settings_page/import_export_page/import_export_page.dart";
 import "package:miria/view/settings_page/settings_page.dart";
@@ -135,6 +137,7 @@ class AppRouter extends _$AppRouter {
     AutoRoute(page: MisskeyGamesRoute.page),
     // きしょ……
     AutoRoute(page: MisskeyRouteRoute.page),
+    AutoRoute(page: InstalledThemesRoute.page),
 
     AutoRoute(path: "/share-extension", page: ShareExtensionRoute.page),
 
@@ -150,6 +153,7 @@ class AppRouter extends _$AppRouter {
     AutoDialogRoute(page: ChannelDetailRoute.page),
     AutoDialogRoute(page: ServerDetailRoute.page),
     AutoDialogRoute(page: ReactionUserRoute.page),
+    AutoDialogRoute(page: InstallThemeRoute.page),
     AutoDialogRoute<CommunityChannel>(page: ChannelSelectRoute.page),
     AutoDialogRoute<ClipSettings>(page: ClipSettingsRoute.page),
     AutoDialogRoute<MisskeyEmojiData>(page: ReactionPickerRoute.page),

lib/state_notifier/installed_themes_page/misskey_theme_codes_notifier.dart

@@ -0,0 +1,77 @@
+import "package:json5/json5.dart";
+import "package:miria/model/color_theme.dart";
+import "package:miria/model/misskey_theme.dart";
+import "package:riverpod_annotation/riverpod_annotation.dart";
+import "package:shared_preferences/shared_preferences.dart";
+
+part "misskey_theme_codes_notifier.g.dart";
+
+@riverpod
+class MisskeyThemeCodesNotifier extends _$MisskeyThemeCodesNotifier {
+  @override
+  List<String> build() {
+    Future(_load);
+    return [];
+  }
+
+  static const _key = "themes";
+
+  Future<void> _load() async {
+    final prefs = await SharedPreferences.getInstance();
+    final themes = prefs.getStringList(_key);
+    if (themes == null) {
+      return;
+    }
+    state = themes;
+  }
+
+  Future<void> _save() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setStringList(_key, state);
+  }
+
+  Future<void> install(String code) async {
+    state = [...state, code];
+    await _save();
+  }
+
+  Future<void> uninstall(int index) async {
+    state = [
+      ...state.sublist(0, index),
+      ...state.sublist(index + 1),
+    ];
+    await _save();
+  }
+
+  Future<void> import(List<String> codes) async {
+    state = codes;
+    await _save();
+  }
+}
+
+@riverpod
+List<MisskeyTheme?> misskeyThemes(MisskeyThemesRef ref) {
+  final codes = ref.watch(misskeyThemeCodesNotifierProvider);
+  return codes.map((code) {
+    try {
+      return MisskeyTheme.fromJson(json5Decode(code) as Map<String, dynamic>);
+    } catch (_) {
+      return null;
+    }
+  }).toList();
+}
+
+@riverpod
+List<ColorTheme> installedColorThemes(InstalledColorThemesRef ref) {
+  final themes = ref.watch(misskeyThemesProvider);
+  return themes.nonNulls
+      .map((theme) {
+        try {
+          return ColorTheme.misskey(theme);
+        } catch (_) {
+          return null;
+        }
+      })
+      .nonNulls
+      .toList();
+}

lib/view/settings_page/general_settings_page/general_settings_page.dart

@@ -9,6 +9,8 @@ import "package:hooks_riverpod/hooks_riverpod.dart";
 import "package:miria/const.dart";
 import "package:miria/model/general_settings.dart";
 import "package:miria/providers.dart";
+import "package:miria/router/app_router.dart";
+import "package:miria/state_notifier/installed_themes_page/misskey_theme_codes_notifier.dart";
 import "package:miria/view/themes/built_in_color_themes.dart";
 
 @RoutePage()
@@ -110,6 +112,11 @@ class GeneralSettingsPage extends HookConsumerWidget {
 
     useMemoized(() => unawaited(save()), dependencies);
 
+    final colorThemes = [
+      ...builtInColorThemes,
+      ...ref.watch(installedColorThemesProvider),
+    ];
+
     return Scaffold(
       appBar: AppBar(title: Text(S.of(context).generalSettings)),
       body: SingleChildScrollView(
@@ -245,8 +252,9 @@ class GeneralSettingsPage extends HookConsumerWidget {
                       const Padding(padding: EdgeInsets.only(top: 10)),
                       Text(S.of(context).themeForLightMode),
                       DropdownButton<String>(
+                        isExpanded: true,
                         items: [
-                          for (final element in builtInColorThemes
+                          for (final element in colorThemes
                               .where((element) => !element.isDarkTheme))
                             DropdownMenuItem(
                               value: element.id,
@@ -260,8 +268,9 @@ class GeneralSettingsPage extends HookConsumerWidget {
                       const Padding(padding: EdgeInsets.only(top: 10)),
                       Text(S.of(context).themeForDarkMode),
                       DropdownButton<String>(
+                        isExpanded: true,
                         items: [
-                          for (final element in builtInColorThemes
+                          for (final element in colorThemes
                               .where((element) => element.isDarkTheme))
                             DropdownMenuItem(
                               value: element.id,
@@ -274,6 +283,7 @@ class GeneralSettingsPage extends HookConsumerWidget {
                       const Padding(padding: EdgeInsets.only(top: 10)),
                       Text(S.of(context).selectLightOrDarkMode),
                       DropdownButton<ThemeColorSystem>(
+                        isExpanded: true,
                         items: [
                           for (final colorSystem in ThemeColorSystem.values)
                             DropdownMenuItem(
@@ -285,6 +295,13 @@ class GeneralSettingsPage extends HookConsumerWidget {
                         onChanged: (value) => colorSystem.value =
                             value ?? ThemeColorSystem.system,
                       ),
+                      ListTile(
+                        title: Text(S.of(context).manageThemes),
+                        trailing: const Icon(Icons.keyboard_arrow_right),
+                        onTap: () async {
+                          await context.pushRoute(const InstalledThemesRoute());
+                        },
+                      ),
                     ],
                   ),
                 ),