Refactor: multiple themes

AmosHuKe · Sep 14, 2024 · dc8c0f0 · dc8c0f0
1 parent fd20b67
commit dc8c0f0
Show file tree

Hide file tree

Showing 17 changed files with 396 additions and 1,054 deletions.
diff --git a/lib/config/multiple_themes.dart b/lib/config/multiple_themes.dart
@@ -1,43 +1,20 @@
-import 'package:flutter/material.dart';
+import '../themes/app_theme.dart';
 
-import 'package:moodexample/themes/multiple_themes_mode/theme_default.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_green.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_orange.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_purple.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_red.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_cyan.dart';
-import 'package:moodexample/themes/multiple_themes_mode/theme_yellow.dart';
-
-enum AppMultipleThemesMode { light, dark }
+import '../themes/multiple_themes_mode/theme_default.dart';
+import '../themes/multiple_themes_mode/theme_green.dart';
+import '../themes/multiple_themes_mode/theme_orange.dart';
+import '../themes/multiple_themes_mode/theme_purple.dart';
+import '../themes/multiple_themes_mode/theme_red.dart';
+import '../themes/multiple_themes_mode/theme_cyan.dart';
+import '../themes/multiple_themes_mode/theme_yellow.dart';
 
 /// 多主题
-Map<String, Map<AppMultipleThemesMode, ThemeData>> appMultipleThemesMode = {
-  'default': {
-    AppMultipleThemesMode.light: AppThemeDefault.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeDefault.darkTheme,
-  },
-  'red': {
-    AppMultipleThemesMode.light: AppThemeRed.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeRed.darkTheme,
-  },
-  'orange': {
-    AppMultipleThemesMode.light: AppThemeOrange.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeOrange.darkTheme,
-  },
-  'yellow': {
-    AppMultipleThemesMode.light: AppThemeYellow.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeYellow.darkTheme,
-  },
-  'green': {
-    AppMultipleThemesMode.light: AppThemeGreen.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeGreen.darkTheme,
-  },
-  'cyan': {
-    AppMultipleThemesMode.light: AppThemeCyan.lightTheme,
-    AppMultipleThemesMode.dark: AppThemeCyan.darkTheme,
-  },
-  'purple': {
-    AppMultipleThemesMode.light: AppThemePurple.lightTheme,
-    AppMultipleThemesMode.dark: AppThemePurple.darkTheme,
-  },
+Map<String, AppMultipleTheme> appMultipleThemesMode = {
+  'default': AppThemeDefault(),
+  'red': AppThemeRed(),
+  'orange': AppThemeOrange(),
+  'yellow': AppThemeYellow(),
+  'green': AppThemeGreen(),
+  'cyan': AppThemeCyan(),
+  'purple': AppThemePurple(),
 };
diff --git a/lib/init.dart b/lib/init.dart
@@ -59,14 +59,16 @@ class _InitState extends State<Init> {
       isDarkMode(context)
           ? SystemUiOverlayStyle.dark.copyWith(
               statusBarColor: Colors.transparent,
-              statusBarBrightness: Brightness.light,
+              systemNavigationBarIconBrightness: Brightness.light,
               statusBarIconBrightness: Brightness.light,
+              statusBarBrightness: Brightness.light,
               systemNavigationBarColor: Colors.transparent,
             )
           : SystemUiOverlayStyle.light.copyWith(
               statusBarColor: Colors.transparent,
-              statusBarBrightness: Brightness.dark,
+              systemNavigationBarIconBrightness: Brightness.light,
               statusBarIconBrightness: Brightness.dark,
+              statusBarBrightness: Brightness.dark,
               systemNavigationBarColor: Colors.transparent,
             ),
     );

diff --git a/lib/themes/app_theme.dart b/lib/themes/app_theme.dart
@@ -35,6 +35,15 @@ String getMultipleThemesMode(BuildContext context) {
   return multipleThemesMode;
 }
 
+/// 多主题
+abstract class AppMultipleTheme {
+  /// 亮色
+  ThemeData lightTheme();
+
+  /// 深色
+  ThemeData darkTheme();
+}
+
 /// 主题基础
 class AppTheme {
   AppTheme(this.multipleThemesMode);
@@ -54,24 +63,16 @@ class AppTheme {
   static const backgroundColor3 = Color(0xFFF3F2F3);
 
   /// 多主题 light
-  ThemeData? multipleThemesLightMode() {
-    ThemeData? lightTheme =
-        appMultipleThemesMode['default']![AppMultipleThemesMode.light];
-    if (appMultipleThemesMode[multipleThemesMode] != null) {
-      lightTheme = appMultipleThemesMode[multipleThemesMode]![
-          AppMultipleThemesMode.light];
-    }
-    return lightTheme;
+  ThemeData multipleThemesLightMode() {
+    return appMultipleThemesMode[multipleThemesMode] != null
+        ? appMultipleThemesMode[multipleThemesMode]!.lightTheme()
+        : appMultipleThemesMode['default']!.lightTheme();
   }
 
   /// 多主题 dark
-  ThemeData? multipleThemesDarkMode() {
-    ThemeData? darkTheme =
-        appMultipleThemesMode['default']![AppMultipleThemesMode.dark];
-    if (appMultipleThemesMode[multipleThemesMode] != null) {
-      darkTheme = appMultipleThemesMode[multipleThemesMode]![
-          AppMultipleThemesMode.dark];
-    }
-    return darkTheme;
+  ThemeData multipleThemesDarkMode() {
+    return appMultipleThemesMode[multipleThemesMode] != null
+        ? appMultipleThemesMode[multipleThemesMode]!.darkTheme()
+        : appMultipleThemesMode['default']!.darkTheme();
   }
 }
diff --git a/lib/themes/multiple_themes_mode/theme_cyan.dart b/lib/themes/multiple_themes_mode/theme_cyan.dart
@@ -1,128 +1,20 @@
 import 'package:flutter/material.dart';
 
+import '../app_theme.dart';
+import 'theme_default.dart';
+
 /// 主题
-class AppThemeCyan {
+class AppThemeCyan implements AppMultipleTheme {
   /// 主颜色
   static const primaryColor = Color(0xFF19686A);
 
-  /// 浅色主题
-  static final lightTheme = ThemeData(
-    useMaterial3: false,
-    brightness: Brightness.light,
-    // 字体
-    fontFamily: null,
-    // 文字
-    textTheme: const TextTheme(
-      displayLarge: TextStyle(color: Colors.black87),
-      displayMedium: TextStyle(color: Colors.black87),
-      displaySmall: TextStyle(color: Colors.black87),
-      bodyLarge: TextStyle(color: Colors.black87),
-      bodyMedium: TextStyle(color: Colors.black87),
-      bodySmall: TextStyle(color: Colors.black87),
-    ),
-    // 主颜色
-    primaryColor: primaryColor,
-    // scaffold背景颜色
-    scaffoldBackgroundColor:
-        const Color(0xFFF6F8FA), // 0xFFF7F7F7 0xFFF9F9F9 0xFFF6F8FA 0xFFFCFBFC
-    // bottomNavigationBar
-    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-      backgroundColor: Colors.white,
-    ),
-    // TabBar
-    tabBarTheme: const TabBarTheme(
-      labelColor: Colors.black,
-      unselectedLabelColor: Color(0xFFAFB8BF),
-    ),
-    // 回弹波浪颜色
-    primarySwatch: const MaterialColor(
-      0xFF545454,
-      {
-        50: Color(0xFF545454),
-        100: Color(0xFF545454),
-        200: Color(0xFF545454),
-        300: Color(0xFF545454),
-        400: Color(0xFF545454),
-        500: Color(0xFF545454),
-        600: Color(0xFF545454),
-        700: Color(0xFF545454),
-        800: Color(0xFF545454),
-        900: Color(0xFF545454),
-      },
-    ),
-    // 点击时水波颜色
-    splashColor: Colors.transparent,
-    // 点击时背景高亮颜色
-    highlightColor: Colors.transparent,
-    // Card
-    cardColor: Colors.white,
-    // bottomSheet
-    bottomSheetTheme:
-        const BottomSheetThemeData(modalBackgroundColor: Color(0xFFF6F8FA)),
-    // Radio
-    radioTheme: RadioThemeData(
-      fillColor: WidgetStateProperty.all(const Color(0xFF111315)),
-      overlayColor: WidgetStateProperty.all(const Color(0xFF111315)),
-    ),
-  );
+  @override
+  ThemeData lightTheme() => AppThemeDefault().lightTheme().copyWith(
+        primaryColor: primaryColor,
+      );
 
-  /// 深色主题
-  static final darkTheme = ThemeData(
-    useMaterial3: false,
-    brightness: Brightness.dark,
-    // 字体
-    fontFamily: null,
-    // 文字
-    textTheme: const TextTheme(
-      displayLarge: TextStyle(color: Color(0xFFEFEFEF)),
-      displayMedium: TextStyle(color: Color(0xFFEFEFEF)),
-      displaySmall: TextStyle(color: Color(0xFFEFEFEF)),
-      bodyLarge: TextStyle(color: Color(0xFFEFEFEF)),
-      bodyMedium: TextStyle(color: Color(0xFFEFEFEF)),
-      bodySmall: TextStyle(color: Color(0xFFEFEFEF)),
-    ),
-    // 主颜色
-    primaryColor: primaryColor,
-    // scaffold背景颜色
-    scaffoldBackgroundColor: const Color(0xFF111315),
-    // bottomNavigationBar
-    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
-      backgroundColor: Color(0xFF1A1D1F),
-    ),
-    // TabBar
-    tabBarTheme: const TabBarTheme(
-      labelColor: Colors.white,
-      unselectedLabelColor: Color(0xFF6F767E),
-    ),
-    // 回弹波浪颜色
-    primarySwatch: const MaterialColor(
-      0xFF545454,
-      {
-        50: Color(0xFF545454),
-        100: Color(0xFF545454),
-        200: Color(0xFF545454),
-        300: Color(0xFF545454),
-        400: Color(0xFF545454),
-        500: Color(0xFF545454),
-        600: Color(0xFF545454),
-        700: Color(0xFF545454),
-        800: Color(0xFF545454),
-        900: Color(0xFF545454),
-      },
-    ),
-    // 点击时水波颜色
-    splashColor: Colors.transparent,
-    // 点击时背景高亮颜色
-    highlightColor: Colors.transparent,
-    // Card
-    cardColor: const Color(0xFF202427),
-    // bottomSheet
-    bottomSheetTheme:
-        const BottomSheetThemeData(modalBackgroundColor: Color(0xFF111315)),
-    // Radio
-    radioTheme: RadioThemeData(
-      fillColor: WidgetStateProperty.all(const Color(0xFFEFEFEF)),
-      overlayColor: WidgetStateProperty.all(const Color(0xFFEFEFEF)),
-    ),
-  );
+  @override
+  ThemeData darkTheme() => AppThemeDefault().darkTheme().copyWith(
+        primaryColor: primaryColor,
+      );
 }