;sparkles: Transparent app bar

assets/translations/en-US.json

@@ -178,12 +178,18 @@
     "other": "{} comments"
   },
   "settingsAppearance": "Appearance",
+  "settingsAppBarTransparent": "Transparent App Bar",
+  "settingsAppBarTransparentDescription": "Enable transparent effect for the app bar.",
   "settingsBackgroundImage": "Background Image",
   "settingsBackgroundImageDescription": "Set the background image that will be applied globally.",
   "settingsBackgroundImageClear": "Clear Existing Background Image",
   "settingsBackgroundImageClearDescription": "Reset the background image to blank.",
   "settingsThemeMaterial3": "Use Material You Design",
   "settingsThemeMaterial3Description": "Set the application theme to Material 3 Design.",
+  "settingsColorScheme": "Color Scheme",
+  "settingsColorSchemeDescription": "Set the application primary color.",
+  "settingsColorSeed": "Color Seed",
+  "settingsColorSeedDescription": "Select one of the present color schemes.",
   "settingsNetwork": "Network",
   "settingsNetworkServer": "HyperNet Server",
   "settingsNetworkServerDescription": "Set the HyperNet server address, choose ours or build your own.",
@@ -450,7 +456,7 @@
   "publisherBlockHintDescription": "You are going to block this publisher's maintainer, this will also block publishers that run by the same user.",
   "userUnblocked": "{} has been unblocked.",
   "userBlocked": "{} has been blocked.",
-  "postSharingViaPicture": "Capturing post as picture, please stand by...",
+  "postSharingViaPicture": "Capturing post as picture, please wait...",
   "postImageShareReadMore": "Scan the QR code to read full post",
   "postImageShareAds": "Explore posts on the Solar Network",
   "postShare": "Share",
@@ -461,5 +467,15 @@
   "shareIntentDescription":  "What do you want to do with the content you are sharing?",
   "shareIntentPostStory": "Post a Story",
   "updateAvailable": "Update Available",
-  "updateOngoing": "正在更新，请稍后..."
+  "updateOngoing": "Updating, please wait...",
+  "custom": "Custom",
+  "colorSchemeIndigo": "Indigo",
+  "colorSchemeBlue": "Blue",
+  "colorSchemeGreen": "Green",
+  "colorSchemeYellow": "Yellow",
+  "colorSchemeOrange": "Orange",
+  "colorSchemeRed": "Red",
+  "colorSchemeWhite": "White",
+  "colorSchemeBlack": "Black",
+  "colorSchemeApplied": "Color scheme has been applied, may need restart the app to take effect."
 }

assets/translations/zh-CN.json

@@ -182,6 +182,12 @@
   "settingsBackgroundImageClearDescription": "将应用背景图重置为空白。",
   "settingsThemeMaterial3": "使用 Material You 设计范式",
   "settingsThemeMaterial3Description": "将应用主题设置为 Material 3 设计范式的主题。",
+  "settingsAppBarTransparent": "透明顶栏",
+  "settingsAppBarTransparentDescription": "为顶栏启用透明效果。",
+  "settingsColorScheme": "主题色",
+  "settingsColorSchemeDescription": "设置应用主题色。",
+  "settingsColorSeed": "预设色彩主题",
+  "settingsColorSeedDescription": "选择一个预设色彩主题。",
   "settingsNetwork": "网络",
   "settingsNetworkServer": "HyperNet 服务器",
   "settingsNetworkServerDescription": "设置 HyperNet 服务器地址，选择我们提供的，或者自己搭建。",
@@ -459,5 +465,15 @@
   "shareIntentDescription": "您想对您分享的内容做些什么？",
   "shareIntentPostStory": "发布动态",
   "updateAvailable": "检测到更新可用",
-  "updateOngoing": "正在更新，请稍后……"
+  "updateOngoing": "正在更新，请稍后……",
+  "custom": "自定义",
+  "colorSchemeIndigo": "靛蓝",
+  "colorSchemeBlue": "蓝色",
+  "colorSchemeGreen": "绿色",
+  "colorSchemeYellow": "黄色",
+  "colorSchemeOrange": "橙色",
+  "colorSchemeRed": "红色",
+  "colorSchemeWhite": "白色",
+  "colorSchemeBlack": "黑色",
+  "colorSchemeApplied": "主题色已应用，可能需要重启来生效。"
 }

assets/translations/zh-HK.json

@@ -123,6 +123,8 @@
   "fieldPostTitle": "標題",
   "fieldPostDescription": "描述",
   "fieldPostTags": "標籤",
+  "fieldPostAlias": "別名",
+  "fieldPostAliasHint": "可選項，用於在 URL 中表示該帖子，應遵循 URL-Safe 的原則。",
   "postPublish": "發佈",
   "postPublishedAt": "發佈於",
   "postPublishedUntil": "取消發佈於",
@@ -180,6 +182,12 @@
   "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。",
   "settingsThemeMaterial3": "使用 Material You 設計範式",
   "settingsThemeMaterial3Description": "將應用主題設置為 Material 3 設計範式的主題。",
+  "settingsAppBarTransparent": "透明頂欄",
+  "settingsAppBarTransparentDescription": "為頂欄啓用透明效果。",
+  "settingsColorScheme": "主題色",
+  "settingsColorSchemeDescription": "設置應用主題色。",
+  "settingsColorSeed": "預設色彩主題",
+  "settingsColorSeedDescription": "選擇一個預設色彩主題。",
   "settingsNetwork": "網絡",
   "settingsNetworkServer": "HyperNet 服務器",
   "settingsNetworkServerDescription": "設置 HyperNet 服務器地址，選擇我們提供的，或者自己搭建。",
@@ -368,6 +376,8 @@
   "dailyCheckNegativeHint6": "出門",
   "dailyCheckNegativeHint6Description": "忘帶傘遇上大雨",
   "happyBirthday": "生日快樂，{}！",
+  "celebrateMerryXmas": "聖誕快樂，{}！",
+  "celebrateNewYear": "新年快樂，{}！",
   "friendNew": "添加好友",
   "friendRequests": "好友請求",
   "friendRequestsDescription": {
@@ -453,5 +463,17 @@
   "poweredBy": "由 {} 提供支持",
   "shareIntent": "分享",
   "shareIntentDescription": "您想對您分享的內容做些什麼？",
-  "shareIntentPostStory": "發佈動態"
+  "shareIntentPostStory": "發佈動態",
+  "updateAvailable": "檢測到更新可用",
+  "updateOngoing": "正在更新，請稍後……",
+  "custom": "自定義",
+  "colorSchemeIndigo": "靛藍",
+  "colorSchemeBlue": "藍色",
+  "colorSchemeGreen": "綠色",
+  "colorSchemeYellow": "黃色",
+  "colorSchemeOrange": "橙色",
+  "colorSchemeRed": "紅色",
+  "colorSchemeWhite": "白色",
+  "colorSchemeBlack": "黑色",
+  "colorSchemeApplied": "主題色已應用，可能需要重啓來生效。"
 }

assets/translations/zh-TW.json

@@ -123,6 +123,8 @@
   "fieldPostTitle": "標題",
   "fieldPostDescription": "描述",
   "fieldPostTags": "標籤",
+  "fieldPostAlias": "別名",
+  "fieldPostAliasHint": "可選項，用於在 URL 中表示該帖子，應遵循 URL-Safe 的原則。",
   "postPublish": "釋出",
   "postPublishedAt": "釋出於",
   "postPublishedUntil": "取消釋出於",
@@ -180,6 +182,12 @@
   "settingsBackgroundImageClearDescription": "將應用背景圖重置為空白。",
   "settingsThemeMaterial3": "使用 Material You 設計正規化",
   "settingsThemeMaterial3Description": "將應用主題設定為 Material 3 設計正規化的主題。",
+  "settingsAppBarTransparent": "透明頂欄",
+  "settingsAppBarTransparentDescription": "為頂欄啟用透明效果。",
+  "settingsColorScheme": "主題色",
+  "settingsColorSchemeDescription": "設定應用主題色。",
+  "settingsColorSeed": "預設色彩主題",
+  "settingsColorSeedDescription": "選擇一個預設色彩主題。",
   "settingsNetwork": "網路",
   "settingsNetworkServer": "HyperNet 伺服器",
   "settingsNetworkServerDescription": "設定 HyperNet 伺服器地址，選擇我們提供的，或者自己搭建。",
@@ -368,6 +376,8 @@
   "dailyCheckNegativeHint6": "出門",
   "dailyCheckNegativeHint6Description": "忘帶傘遇上大雨",
   "happyBirthday": "生日快樂，{}！",
+  "celebrateMerryXmas": "聖誕快樂，{}！",
+  "celebrateNewYear": "新年快樂，{}！",
   "friendNew": "新增好友",
   "friendRequests": "好友請求",
   "friendRequestsDescription": {
@@ -453,5 +463,17 @@
   "poweredBy": "由 {} 提供支援",
   "shareIntent": "分享",
   "shareIntentDescription": "您想對您分享的內容做些什麼？",
-  "shareIntentPostStory": "釋出動態"
+  "shareIntentPostStory": "釋出動態",
+  "updateAvailable": "檢測到更新可用",
+  "updateOngoing": "正在更新，請稍後……",
+  "custom": "自定義",
+  "colorSchemeIndigo": "靛藍",
+  "colorSchemeBlue": "藍色",
+  "colorSchemeGreen": "綠色",
+  "colorSchemeYellow": "黃色",
+  "colorSchemeOrange": "橙色",
+  "colorSchemeRed": "紅色",
+  "colorSchemeWhite": "白色",
+  "colorSchemeBlack": "黑色",
+  "colorSchemeApplied": "主題色已應用，可能需要重啟來生效。"
 }

lib/providers/config.dart

@@ -9,6 +9,10 @@ const kRtkStoreKey = 'nex_user_rtk';
 const kNetworkServerDefault = 'https://api.sn.solsynth.dev';
 const kNetworkServerStoreKey = 'app_server_url';
 
+const kAppbarTransparentStoreKey = 'app_bar_transparent';
+const kAppBackgroundStoreKey = 'app_has_background';
+const kAppColorSchemeStoreKey = 'app_color_scheme';
+
 const Map<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,
   'settingsImageQualityLow': FilterQuality.low,

lib/providers/theme.dart

@@ -1,3 +1,5 @@
+import 'dart:ui';
+
 import 'package:flutter/foundation.dart';
 import 'package:surface/theme.dart';
 
@@ -11,8 +13,8 @@ class ThemeProvider extends ChangeNotifier {
     });
   }
 
-  void reloadTheme({bool? useMaterial3}) {
+  void reloadTheme({Color? seedColorOverride, bool? useMaterial3}) {
-    createAppThemeSet().then((value) {
+    createAppThemeSet(seedColorOverride: seedColorOverride, useMaterial3: useMaterial3).then((value) {
       theme = value;
       notifyListeners();
     });

lib/screens/home.dart

@@ -17,14 +17,13 @@ import 'package:surface/providers/config.dart';
 import 'package:surface/providers/post.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/userinfo.dart';
+import 'package:surface/providers/widget.dart';
 import 'package:surface/types/check_in.dart';
 import 'package:surface/types/post.dart';
 import 'package:surface/widgets/app_bar_leading.dart';
 import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/post/post_item.dart';
 
-import '../providers/widget.dart';
-
 class HomeScreenDashEntry {
   final String name;
   final Widget child;
@@ -212,7 +211,7 @@ class _HomeDashCheckInWidgetState extends State<_HomeDashCheckInWidget> {
       final home = context.read<HomeWidgetProvider>();
       final resp = await sn.client.get('/cgi/id/check-in/today');
       _todayRecord = SnCheckInRecord.fromJson(resp.data);
-      home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson());
+      await home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson());
     } finally {
       setState(() => _isBusy = false);
     }
@@ -225,7 +224,7 @@ class _HomeDashCheckInWidgetState extends State<_HomeDashCheckInWidget> {
       final home = context.read<HomeWidgetProvider>();
       final resp = await sn.client.post('/cgi/id/check-in');
       _todayRecord = SnCheckInRecord.fromJson(resp.data);
-      home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson());
+      await home.saveWidgetData('pas_check_in_record', _todayRecord!.toJson());
     } catch (err) {
       if (!mounted) return;
       context.showErrorDialog(err);

lib/screens/settings.dart

@@ -5,6 +5,7 @@ import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 import 'package:go_router/go_router.dart';
 import 'package:image_picker/image_picker.dart';
 import 'package:material_symbols_icons/symbols.dart';
@@ -18,6 +19,17 @@ import 'package:surface/providers/theme.dart';
 import 'package:surface/theme.dart';
 import 'package:surface/widgets/dialog.dart';
 
+const Map<String, Color> kColorSchemes = {
+  'colorSchemeIndigo': Colors.indigo,
+  'colorSchemeBlue': Colors.blue,
+  'colorSchemeGreen': Colors.green,
+  'colorSchemeYellow': Colors.yellow,
+  'colorSchemeOrange': Colors.orange,
+  'colorSchemeRed': Colors.red,
+  'colorSchemeWhite': Colors.white,
+  'colorSchemeBlack': Colors.black,
+};
+
 class SettingsScreen extends StatefulWidget {
   const SettingsScreen({super.key});
 
@@ -77,7 +89,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                       if (image == null) return;
 
                       await File(image.path).copy('$_docBasepath/app_background_image');
-                      _prefs.setBool('has_background_image', true);
+                      _prefs.setBool(kAppBackgroundStoreKey, true);
 
                       setState(() {});
                     },
@@ -98,7 +110,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                           trailing: const Icon(Symbols.chevron_right),
                           onTap: () {
                             File('$_docBasepath/app_background_image').deleteSync();
-                            _prefs.remove('has_background_image');
+                            _prefs.remove(kAppBackgroundStoreKey);
                             setState(() {});
                           },
                         );
@@ -116,10 +128,118 @@ class _SettingsScreenState extends State<SettingsScreen> {
                         value ?? false,
                       );
                     });
-                    final th = context.watch<ThemeProvider>();
+                    final th = context.read<ThemeProvider>();
                     th.reloadTheme(useMaterial3: value ?? false);
                   },
                 ),
+                ListTile(
+                  leading: const Icon(Symbols.format_paint),
+                  title: Text('settingsColorScheme').tr(),
+                  subtitle: Text('settingsColorSchemeDescription').tr(),
+                  contentPadding: const EdgeInsets.symmetric(horizontal: 24),
+                  trailing: const Icon(Symbols.chevron_right),
+                  onTap: () async {
+                    Color pickerColor = Color(_prefs.getInt(kAppColorSchemeStoreKey) ?? Colors.indigo.value);
+                    final color = await showDialog<Color?>(
+                      context: context,
+                      builder: (context) => AlertDialog(
+                        content: SingleChildScrollView(
+                          child: ColorPicker(
+                            pickerColor: pickerColor,
+                            onColorChanged: (color) => pickerColor = color,
+                            enableAlpha: false,
+                            hexInputBar: true,
+                          ),
+                        ),
+                        actions: <Widget>[
+                          TextButton(
+                            child: const Text('dialogDismiss').tr(),
+                            onPressed: () {
+                              Navigator.of(context).pop();
+                            },
+                          ),
+                          TextButton(
+                            child: const Text('dialogConfirm').tr(),
+                            onPressed: () {
+                              Navigator.of(context).pop(pickerColor);
+                            },
+                          ),
+                        ],
+                      ),
+                    );
+
+                    if (color == null || !context.mounted) return;
+
+                    _prefs.setInt(kAppColorSchemeStoreKey, color.value);
+                    final th = context.read<ThemeProvider>();
+                    th.reloadTheme(seedColorOverride: color);
+                    setState(() {});
+
+                    context.showSnackbar('colorSchemeApplied'.tr());
+                  },
+                ),
+                ListTile(
+                  leading: const Icon(Symbols.palette),
+                  title: Text('settingsColorSeed').tr(),
+                  subtitle: Text('settingsColorSeedDescription').tr(),
+                  contentPadding: const EdgeInsets.only(left: 24, right: 17),
+                  trailing: DropdownButtonHideUnderline(
+                    child: DropdownButton2<int?>(
+                      isExpanded: true,
+                      items: [
+                        ...kColorSchemes.entries.mapIndexed((idx, ele) {
+                          return DropdownMenuItem<int>(
+                            value: idx,
+                            child: Text(ele.key).tr(),
+                          );
+                        }),
+                        DropdownMenuItem<int>(
+                          value: -1,
+                          child: Text('custom').tr(),
+                        ),
+                      ],
+                      value: _prefs.getInt(kAppColorSchemeStoreKey) == null
+                          ? 1
+                          : kColorSchemes.values
+                              .toList()
+                              .indexWhere((ele) => ele.value == _prefs.getInt(kAppColorSchemeStoreKey)),
+                      onChanged: (int? value) {
+                        if (value != null && value != -1) {
+                          _prefs.setInt(kAppColorSchemeStoreKey, kColorSchemes.values.elementAt(value).value);
+                          final th = context.read<ThemeProvider>();
+                          th.reloadTheme(seedColorOverride: kColorSchemes.values.elementAt(value));
+                          setState(() {});
+
+                          context.showSnackbar('colorSchemeApplied'.tr());
+                        }
+                      },
+                      buttonStyleData: const ButtonStyleData(
+                        padding: EdgeInsets.symmetric(
+                          horizontal: 16,
+                          vertical: 5,
+                        ),
+                        height: 40,
+                        width: 160,
+                      ),
+                      menuItemStyleData: const MenuItemStyleData(
+                        height: 40,
+                      ),
+                    ),
+                  ),
+                ),
+                CheckboxListTile(
+                  secondary: const Icon(Symbols.blur_on),
+                  title: Text('settingsAppBarTransparent').tr(),
+                  subtitle: Text('settingsAppBarTransparentDescription').tr(),
+                  contentPadding: const EdgeInsets.only(left: 24, right: 17),
+                  value: _prefs.getBool(kAppbarTransparentStoreKey) ?? false,
+                  onChanged: (value) {
+                    _prefs.setBool(kAppbarTransparentStoreKey, value ?? false);
+                    final th = context.read<ThemeProvider>();
+                    th.reloadTheme();
+                    setState(() {});
+                  },
+                ),
               ],
             ),
             Column(
@@ -189,7 +309,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                           horizontal: 16,
                           vertical: 5,
                         ),
-                        height: 40,
+                        height: 56,
                         width: 160,
                       ),
                       menuItemStyleData: const MenuItemStyleData(

lib/theme.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'package:surface/providers/config.dart';
 
 const kMaterialYouToggleStoreKey = 'app_theme_material_you';
 
@@ -10,7 +11,7 @@ class ThemeSet {
   ThemeSet({required this.light, required this.dark});
 }
 
-Future<ThemeSet> createAppThemeSet({bool? useMaterial3}) async {
+Future<ThemeSet> createAppThemeSet({Color? seedColorOverride, bool? useMaterial3}) async {
   return ThemeSet(
     light: await createAppTheme(Brightness.light, useMaterial3: useMaterial3),
     dark: await createAppTheme(Brightness.dark, useMaterial3: useMaterial3),
@@ -19,16 +20,21 @@ Future<ThemeSet> createAppThemeSet({bool? useMaterial3}) async {
 
 Future<ThemeData> createAppTheme(
   Brightness brightness, {
+    Color? seedColorOverride,
   bool? useMaterial3,
 }) async {
   final prefs = await SharedPreferences.getInstance();
 
+  final seedColorString = prefs.getInt(kAppColorSchemeStoreKey);
+  final seedColor = seedColorString != null ? Color(seedColorString) : Colors.indigo;
+
   final colorScheme = ColorScheme.fromSeed(
-    seedColor: Colors.indigo,
+    seedColor: seedColorOverride ?? seedColor,
     brightness: brightness,
   );
 
-  final hasBackground = prefs.getBool('has_background_image') ?? false;
+  final hasBackground = prefs.getBool(kAppBackgroundStoreKey) ?? false;
+  final hasAppBarBlurry = prefs.getBool(kAppbarTransparentStoreKey) ?? false;
 
   return ThemeData(
     useMaterial3: useMaterial3 ?? (prefs.getBool(kMaterialYouToggleStoreKey) ?? false),
@@ -42,8 +48,9 @@ Future<ThemeData> createAppTheme(
     ),
     appBarTheme: AppBarTheme(
       centerTitle: true,
-      backgroundColor: hasBackground ? colorScheme.primary.withOpacity(0.75) : colorScheme.primary,
+      elevation: hasAppBarBlurry ? 0 : null,
-      foregroundColor: colorScheme.onPrimary,
+      backgroundColor: hasAppBarBlurry ? colorScheme.surfaceContainer.withAlpha(200) : colorScheme.primary,
+      foregroundColor: hasAppBarBlurry ? colorScheme.onSurface : colorScheme.onPrimary,
     ),
     scaffoldBackgroundColor: Colors.transparent,
   );

pubspec.lock

@@ -643,6 +643,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.4.1"
+  flutter_colorpicker:
+    dependency: "direct main"
+    description:
+      name: flutter_colorpicker
+      sha256: "969de5f6f9e2a570ac660fb7b501551451ea2a1ab9e2097e89475f60e07816ea"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   flutter_context_menu:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -111,6 +111,7 @@ dependencies:
   flutter_app_update: ^3.2.2
   in_app_review: ^2.0.10
   version: ^3.0.2
+  flutter_colorpicker: ^1.1.0
 
 dev_dependencies:
   flutter_test: