主題色設定

校務通主題目前提供：

• 淺色主題
• 深色主題
• 動態自訂主題色 (Custom Theme Colors)

自 v3 起全面採用 Material Design 3，所有 UI 元件皆使用 Theme.of(context).colorScheme 取得主題色彩，不再依賴舊的 ApTheme 自訂色彩屬性。ApTheme 內部使用 ColorScheme.fromSeed() 產生符合 MD3 規範的配色方案。

如何設定

在 MaterialApp 的上一層加入 ApTheme，並設定主題色模式 ThemeMode

caution

此 API 需要 Flutter v3.22 以上

在 MaterialApp 的參數 theme 設定 ApTheme.light，參數 darkTheme 設定 ApTheme.dark， 並設定與 ApTheme 設定相同的 themeMode，ApTheme 會根據 themeMode 切換主題顏色。從 v2 版本開始可以使用 ApTheme.colorScheme 來產生包含自訂強調色的主題設定，v3 則進一步使用 ColorScheme.fromSeed() 搭配 useMaterial3: true 產生完整的 MD3 配色。

app.dart

    ThemeMode themeMode = ThemeMode.system;

    @override
      Widget build(BuildContext context) {
        return ApTheme(
            themeMode,
            child: MaterialApp(
              theme: ApTheme.light,
              darkTheme: ApTheme.dark,
              themeMode: themeMode,
            ),
        );
    }

原理說明

MaterialApp 預設主題(Theme) 由參數 theme 所決定，若有設定參數 darkTheme(深色主題)，

且系統主題或是 themeMode 設定 ThemeMode.dark 時，則由參數 darkTheme 決定

可透過參數 themeMode 設定主題切換

此 enum 總共有三種：

• system：系統主題，若系統不支援深色主題，則使用 theme
• light：淺色主題
• dark：深色主題

Material Design 3 色彩對應

v3 中所有元件皆統一使用 colorScheme 取得色彩，以下為主要的對應關係：

用途	colorScheme 屬性
主要色彩 / 強調色	colorScheme.primary
背景色	colorScheme.surface
文字色	colorScheme.onSurface
次要文字色	colorScheme.onSurfaceVariant
邊框 / 分隔線	colorScheme.outlineVariant
錯誤色	colorScheme.error
卡片背景	colorScheme.surfaceContainerLowest

支援深色主題的系統

• Android 9.0 或以上
• iOS 13 或以上
• macOS Mojave 10.14.2 或以上
• Windows 10 Build 14393.10 以後