add some config to project and change come simple ui

lib/component/webview/web_home_component.dart

@@ -3,6 +3,10 @@ import 'package:nowser/component/webview/web_info.dart';
 import 'package:nowser/const/base.dart';
 import 'package:nowser/main.dart';
 
+import '../../const/router_path.dart';
+import '../../util/router_util.dart';
+import 'webview_number_component.dart';
+
 class WebHomeComponent extends StatefulWidget {
   WebInfo webInfo;
 
@@ -26,19 +30,56 @@ class _WebHomeComponent extends State<WebHomeComponent> {
   Widget build(BuildContext context) {
     return Container(
       padding: EdgeInsets.all(Base.BASE_PADDING),
-      child: Center(
-        child: TextField(
-          controller: textEditingController,
-          decoration: InputDecoration(border: OutlineInputBorder()),
-          onSubmitted: (value) {
-            print("onSubmitted $value");
-            if (value.startsWith("http")) {
-              widget.webInfo.url = value;
-              widget.webInfo.title = null;
+      child: Column(
+        children: [
+          Expanded(
+            child: Center(
+              child: TextField(
+                controller: textEditingController,
+                decoration: InputDecoration(border: OutlineInputBorder()),
+                onSubmitted: (value) {
+                  print("onSubmitted $value");
+                  if (value.startsWith("http")) {
+                    widget.webInfo.url = value;
+                    widget.webInfo.title = null;
 
-              webProvider.updateWebInfo(widget.webInfo);
-            }
-          },
+                    webProvider.updateWebInfo(widget.webInfo);
+                  }
+                },
+              ),
+            ),
+          ),
+          Container(
+            height: 60,
+            child: Row(
+              children: [
+                wrapBottomBtn(
+                    Container(
+                      alignment: Alignment.center,
+                      child: WebViewNumberComponent(),
+                    ), onTap: () {
+                  RouterUtil.router(context, RouterPath.WEB_TABS);
+                }),
+                wrapBottomBtn(const Icon(Icons.space_dashboard)),
+                wrapBottomBtn(const Icon(Icons.segment)),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget wrapBottomBtn(Widget btn, {Function? onTap}) {
+    return Expanded(
+      child: GestureDetector(
+        onTap: () {
+          if (onTap != null) {
+            onTap();
+          }
+        },
+        child: Container(
+          child: btn,
         ),
       ),
     );

lib/component/webview/webview_number_component.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../../provider/web_provider.dart';
+
+class WebViewNumberComponent extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _WebViewNumberComponent();
+  }
+}
+
+class _WebViewNumberComponent extends State<WebViewNumberComponent> {
+  @override
+  Widget build(BuildContext context) {
+    return Selector<WebProvider, int>(builder: (context, length, child) {
+      return Badge(
+        label: Text("$length"),
+        backgroundColor:
+            Colors.blueAccent, // TODO here should use background color
+        child: Icon(Icons.crop_din),
+      );
+    }, selector: (context, provider) {
+      return provider.webInfos.length;
+    });
+  }
+}

lib/const/base.dart

@@ -6,4 +6,6 @@ class Base {
   static const double BASE_PADDING = 12;
 
   static const double BASE_PADDING_HALF = 6;
+
+  static double BASE_FONT_SIZE = 15;
 }

lib/const/base_consts.dart

@@ -0,0 +1,14 @@
+class OpenStatus {
+  static const OPEN = 1;
+  static const CLOSE = -1;
+}
+
+class EnumObj {
+  final dynamic value;
+  final String name;
+
+  EnumObj(
+    this.value,
+    this.name,
+  );
+}

lib/const/colors.dart

@@ -0,0 +1,169 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+class ColorList {
+  static List<Color> ALL_COLOR = [
+    Colors.purple[700]!,
+    Colors.blue[700]!,
+    Colors.cyan[700]!,
+    // Colors.green[600],
+    Color(0xff519495),
+    Colors.yellow[700]!,
+    Colors.orange[700]!,
+    Colors.red[700]!,
+  ];
+
+  static MaterialColor getThemeColor(int colorValue) {
+    var i = 0;
+    Color checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFF3E5F5),
+          100: Color(0xFFE1BEE7),
+          200: Color(0xFFCE93D8),
+          300: Color(0xFFBA68C8),
+          400: Color(0xFFAB47BC),
+          500: checkedColor,
+          600: Color(0xFF8E24AA),
+          700: Color(0xFF7B1FA2),
+          800: Color(0xFF6A1B9A),
+          900: Color(0xFF4A148C),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFE3F2FD),
+          100: Color(0xFFBBDEFB),
+          200: Color(0xFF90CAF9),
+          300: Color(0xFF64B5F6),
+          400: Color(0xFF42A5F5),
+          500: checkedColor,
+          600: Color(0xFF1E88E5),
+          700: Color(0xFF1976D2),
+          800: Color(0xFF1565C0),
+          900: Color(0xFF0D47A1),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFE0F7FA),
+          100: Color(0xFFB2EBF2),
+          200: Color(0xFF80DEEA),
+          300: Color(0xFF4DD0E1),
+          400: Color(0xFF26C6DA),
+          500: checkedColor,
+          600: Color(0xFF00ACC1),
+          700: Color(0xFF0097A7),
+          800: Color(0xFF00838F),
+          900: Color(0xFF006064),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFE8F5E9),
+          100: Color(0xFFC8E6C9),
+          200: Color(0xFFA5D6A7),
+          300: Color(0xFF81C784),
+          400: Color(0xFF66BB6A),
+          500: checkedColor,
+          600: Color(0xFF43A047),
+          700: Color(0xFF388E3C),
+          800: Color(0xFF2E7D32),
+          900: Color(0xFF1B5E20),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFFFFDE7),
+          100: Color(0xFFFFF9C4),
+          200: Color(0xFFFFF59D),
+          300: Color(0xFFFFF176),
+          400: Color(0xFFFFEE58),
+          500: checkedColor,
+          600: Color(0xFFFDD835),
+          700: Color(0xFFFBC02D),
+          800: Color(0xFFF9A825),
+          900: Color(0xFFF57F17),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFFFF3E0),
+          100: Color(0xFFFFE0B2),
+          200: Color(0xFFFFCC80),
+          300: Color(0xFFFFB74D),
+          400: Color(0xFFFFA726),
+          500: checkedColor,
+          600: Color(0xFFFB8C00),
+          700: Color(0xFFF57C00),
+          800: Color(0xFFEF6C00),
+          900: Color(0xFFE65100),
+        },
+      );
+    }
+
+    checkedColor = ALL_COLOR[i++];
+    if (colorValue == checkedColor.value) {
+      return MaterialColor(
+        checkedColor.value,
+        <int, Color>{
+          50: Color(0xFFFFEBEE),
+          100: Color(0xFFFFCDD2),
+          200: Color(0xFFEF9A9A),
+          300: Color(0xFFE57373),
+          400: Color(0xFFEF5350),
+          500: checkedColor,
+          600: Color(0xFFE53935),
+          700: Color(0xFFD32F2F),
+          800: Color(0xFFC62828),
+          900: Color(0xFFB71C1C),
+        },
+      );
+    }
+
+    // Default
+    return MaterialColor(
+      checkedColor.value,
+      <int, Color>{
+        50: Color(0xFFE8F5E9),
+        100: Color(0xFFC8E6C9),
+        200: Color(0xFFA5D6A7),
+        300: Color(0xFF81C784),
+        400: Color(0xFF66BB6A),
+        500: checkedColor,
+        600: Color(0xFF43A047),
+        700: Color(0xFF388E3C),
+        800: Color(0xFF2E7D32),
+        900: Color(0xFF1B5E20),
+      },
+    );
+  }
+}

lib/const/theme_style.dart

@@ -0,0 +1,7 @@
+class ThemeStyle {
+  static const int AUTO = 1;
+
+  static const int LIGHT = 2;
+
+  static const int DARK = 3;
+}

lib/main.dart

@@ -5,6 +5,8 @@ import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_inappwebview/flutter_inappwebview.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:nostr_sdk/utils/string_util.dart';
 import 'package:nowser/provider/web_provider.dart';
 import 'package:nowser/router/index/index_router.dart';
 import 'package:nowser/router/web_tabs_select/web_tabs_select_router.dart';
@@ -12,15 +14,28 @@ import 'package:provider/provider.dart';
 import 'package:receive_intent/receive_intent.dart' as receiveIntent;
 
 import 'const/base.dart';
+import 'const/colors.dart';
 import 'const/router_path.dart';
 import 'generated/l10n.dart';
+import 'provider/data_util.dart';
+import 'provider/setting_provider.dart';
+import 'util/colors_util.dart';
 
 late WebProvider webProvider;
 
+late SettingProvider settingProvider;
+
 late Map<String, WidgetBuilder> routes;
 
-void main() {
+Future<void> main() async {
   WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
+
+  var dataUtilTask = DataUtil.getInstance();
+  var dataFutureResultList = await Future.wait([dataUtilTask]);
+
+  var settingTask = SettingProvider.getInstance();
+  var futureResultList = await Future.wait([settingTask]);
+  settingProvider = futureResultList[0] as SettingProvider;
   webProvider = WebProvider();
 
   runApp(MyApp());
@@ -84,17 +99,161 @@ class _MyApp extends State<MyApp> {
 }
 
 ThemeData getLightTheme() {
+  Color color500 = _getMainColor();
+  MaterialColor themeColor = ColorList.getThemeColor(color500.value);
+
+  Color mainTextColor = Colors.black;
+  Color hintColor = Colors.grey;
+  var scaffoldBackgroundColor = Colors.grey[100];
+  Color cardColor = Colors.white;
+
+  if (settingProvider.mainFontColor != null) {
+    mainTextColor = Color(settingProvider.mainFontColor!);
+  }
+  if (settingProvider.hintFontColor != null) {
+    hintColor = Color(settingProvider.hintFontColor!);
+  }
+  if (settingProvider.cardColor != null) {
+    cardColor = Color(settingProvider.cardColor!);
+  }
+
+  double baseFontSize = settingProvider.fontSize;
+
+  var textTheme = TextTheme(
+    bodyLarge: TextStyle(fontSize: baseFontSize + 2, color: mainTextColor),
+    bodyMedium: TextStyle(fontSize: baseFontSize, color: mainTextColor),
+    bodySmall: TextStyle(fontSize: baseFontSize - 2, color: mainTextColor),
+  );
+  var titleTextStyle = TextStyle(
+    color: mainTextColor,
+  );
+
+  if (settingProvider.fontFamily != null) {
+    textTheme =
+        GoogleFonts.getTextTheme(settingProvider.fontFamily!, textTheme);
+    titleTextStyle = GoogleFonts.getFont(settingProvider.fontFamily!,
+        textStyle: titleTextStyle);
+  }
+
   return ThemeData(
     platform: TargetPlatform.iOS,
+    primarySwatch: themeColor,
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: themeColor[500]!,
+      brightness: Brightness.light,
+    ),
+    // scaffoldBackgroundColor: Base.SCAFFOLD_BACKGROUND_COLOR,
+    // scaffoldBackgroundColor: Colors.grey[100],
+    scaffoldBackgroundColor: scaffoldBackgroundColor,
+    primaryColor: themeColor[500],
+    appBarTheme: AppBarTheme(
+      backgroundColor: cardColor,
+      titleTextStyle: titleTextStyle,
+      elevation: 0,
+      scrolledUnderElevation: 0,
+    ),
+    dividerColor: ColorsUtil.hexToColor("#DFE1EB"),
+    cardColor: cardColor,
+    // dividerColor: Colors.grey[200],
+    // indicatorColor: ColorsUtil.hexToColor("#818181"),
+    textTheme: textTheme,
+    hintColor: hintColor,
+    buttonTheme: ButtonThemeData(),
+    shadowColor: Colors.black.withOpacity(0.2),
+    tabBarTheme: TabBarTheme(
+      indicatorColor: Colors.white,
+      indicatorSize: TabBarIndicatorSize.tab,
+      dividerHeight: 0,
+      labelColor: Colors.white,
+      unselectedLabelColor: Colors.grey[200],
+    ),
   );
 }
 
 ThemeData getDarkTheme() {
+  Color color500 = _getMainColor();
+  MaterialColor themeColor = ColorList.getThemeColor(color500.value);
+
+  Color? mainTextColor;
+  // Color? topFontColor = Colors.white;
+  Color? topFontColor = Colors.grey[200];
+  Color hintColor = Colors.grey;
+  var scaffoldBackgroundColor = Color.fromARGB(255, 40, 40, 40);
+  Color cardColor = Colors.black;
+
+  if (settingProvider.mainFontColor != null) {
+    mainTextColor = Color(settingProvider.mainFontColor!);
+  }
+  if (settingProvider.hintFontColor != null) {
+    hintColor = Color(settingProvider.hintFontColor!);
+  }
+  if (settingProvider.cardColor != null) {
+    cardColor = Color(settingProvider.cardColor!);
+  }
+
+  double baseFontSize = settingProvider.fontSize;
+
+  var textTheme = TextTheme(
+    bodyLarge: TextStyle(fontSize: baseFontSize + 2, color: mainTextColor),
+    bodyMedium: TextStyle(fontSize: baseFontSize, color: mainTextColor),
+    bodySmall: TextStyle(fontSize: baseFontSize - 2, color: mainTextColor),
+  );
+  var titleTextStyle = TextStyle(
+    color: topFontColor,
+    // color: Colors.black,
+  );
+
+  if (settingProvider.fontFamily != null) {
+    textTheme =
+        GoogleFonts.getTextTheme(settingProvider.fontFamily!, textTheme);
+    titleTextStyle = GoogleFonts.getFont(settingProvider.fontFamily!,
+        textStyle: titleTextStyle);
+  }
+
+  if (StringUtil.isNotBlank(settingProvider.backgroundImage)) {
+    scaffoldBackgroundColor = Colors.transparent;
+    cardColor = cardColor.withOpacity(0.6);
+  }
+
   return ThemeData(
     platform: TargetPlatform.iOS,
+    primarySwatch: themeColor,
+    colorScheme: ColorScheme.fromSeed(
+      seedColor: themeColor[500]!,
+      brightness: Brightness.dark,
+    ),
+    scaffoldBackgroundColor: scaffoldBackgroundColor,
+    primaryColor: themeColor[500],
+    appBarTheme: AppBarTheme(
+      backgroundColor: cardColor,
+      titleTextStyle: titleTextStyle,
+      elevation: 0,
+      scrolledUnderElevation: 0,
+    ),
+    dividerColor: Colors.grey[200],
+    cardColor: cardColor,
+    textTheme: textTheme,
+    hintColor: hintColor,
+    shadowColor: Colors.white.withOpacity(0.3),
+    tabBarTheme: TabBarTheme(
+      indicatorColor: Colors.white,
+      indicatorSize: TabBarIndicatorSize.tab,
+      dividerHeight: 0,
+      labelColor: Colors.white,
+      unselectedLabelColor: Colors.grey[200],
+    ),
   );
 }
 
+Color _getMainColor() {
+  Color color500 = const Color(0xff519495);
+  if (settingProvider.themeColor != null) {
+    color500 = Color(settingProvider.themeColor!);
+  }
+  return color500;
+}
+
+
 // class MyApp extends StatelessWidget {
 //   const MyApp({super.key});
 

lib/provider/data_util.dart

@@ -0,0 +1,16 @@
+import 'package:shared_preferences/shared_preferences.dart';
+
+class DataUtil {
+  static SharedPreferences? _prefs;
+
+  static Future<SharedPreferences> getInstance() async {
+    if (_prefs == null) {
+      _prefs = await SharedPreferences.getInstance();
+    }
+    return _prefs!;
+  }
+}
+
+class DataKey {
+  static final String SETTING = "setting";
+}

lib/provider/setting_provider.dart

@@ -0,0 +1,315 @@
+import 'dart:convert';
+import 'dart:developer';
+
+import 'package:flutter/material.dart';
+
+import 'package:nostr_sdk/utils/string_util.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+import '../const/base.dart';
+import '../const/base_consts.dart';
+import '../const/theme_style.dart';
+import 'data_util.dart';
+
+class SettingProvider extends ChangeNotifier {
+  static SettingProvider? _settingProvider;
+
+  SharedPreferences? _sharedPreferences;
+
+  SettingData? _settingData;
+
+  static Future<SettingProvider> getInstance() async {
+    if (_settingProvider == null) {
+      _settingProvider = SettingProvider();
+      _settingProvider!._sharedPreferences = await DataUtil.getInstance();
+      await _settingProvider!._init();
+    }
+    return _settingProvider!;
+  }
+
+  Future<void> _init() async {
+    String? settingStr = _sharedPreferences!.getString(DataKey.SETTING);
+    if (StringUtil.isNotBlank(settingStr)) {
+      var jsonMap = json.decode(settingStr!);
+      if (jsonMap != null) {
+        var setting = SettingData.fromJson(jsonMap);
+        _settingData = setting;
+
+        return;
+      }
+    }
+
+    _settingData = SettingData();
+  }
+
+  Future<void> reload() async {
+    await _init();
+    notifyListeners();
+  }
+
+  SettingData get settingData => _settingData!;
+
+  /// open lock
+  int get lockOpen => _settingData!.lockOpen;
+
+  String? get imageService => _settingData!.imageService;
+
+  String? get imageServiceAddr => _settingData!.imageServiceAddr;
+
+  /// i18n
+  String? get i18n => _settingData!.i18n;
+
+  String? get i18nCC => _settingData!.i18nCC;
+
+  /// theme style
+  int get themeStyle => _settingData!.themeStyle;
+
+  /// theme color
+  int? get themeColor => _settingData!.themeColor;
+
+  int? get mainFontColor => _settingData!.mainFontColor;
+
+  int? get hintFontColor => _settingData!.hintFontColor;
+
+  int? get cardColor => _settingData!.cardColor;
+
+  String? get backgroundImage => _settingData!.backgroundImage;
+
+  /// fontFamily
+  String? get fontFamily => _settingData!.fontFamily;
+
+  Map<String, int> _translateSourceArgsMap = {};
+
+  bool translateSourceArgsCheck(String str) {
+    return _translateSourceArgsMap[str] != null;
+  }
+
+  double get fontSize => _settingData!.fontSize ?? Base.BASE_FONT_SIZE;
+
+  int? get tableMode => _settingData!.tableMode;
+
+  int? get relayMode => _settingData!.relayMode;
+
+  int? get eventSignCheck => _settingData!.eventSignCheck;
+
+  set settingData(SettingData o) {
+    _settingData = o;
+    saveAndNotifyListeners();
+  }
+
+  /// open lock
+  set lockOpen(int o) {
+    _settingData!.lockOpen = o;
+    saveAndNotifyListeners();
+  }
+
+  set imageService(String? o) {
+    _settingData!.imageService = o;
+    saveAndNotifyListeners();
+  }
+
+  set imageServiceAddr(String? o) {
+    _settingData!.imageServiceAddr = o;
+    saveAndNotifyListeners();
+  }
+
+  /// i18n
+  set i18n(String? o) {
+    _settingData!.i18n = o;
+    saveAndNotifyListeners();
+  }
+
+  void setI18n(String? i18n, String? i18nCC) {
+    _settingData!.i18n = i18n;
+    _settingData!.i18nCC = i18nCC;
+    saveAndNotifyListeners();
+  }
+
+  /// theme style
+  set themeStyle(int o) {
+    _settingData!.themeStyle = o;
+    saveAndNotifyListeners();
+  }
+
+  /// theme color
+  set themeColor(int? o) {
+    _settingData!.themeColor = o;
+    saveAndNotifyListeners();
+  }
+
+  set mainFontColor(int? o) {
+    _settingData!.mainFontColor = o;
+    saveAndNotifyListeners();
+  }
+
+  set hintFontColor(int? o) {
+    _settingData!.hintFontColor = o;
+    saveAndNotifyListeners();
+  }
+
+  set cardColor(int? o) {
+    _settingData!.cardColor = o;
+    saveAndNotifyListeners();
+  }
+
+  set backgroundImage(String? o) {
+    _settingData!.backgroundImage = o;
+    saveAndNotifyListeners();
+  }
+
+  /// fontFamily
+  set fontFamily(String? _fontFamily) {
+    _settingData!.fontFamily = _fontFamily;
+    saveAndNotifyListeners();
+  }
+
+  set fontSize(double o) {
+    _settingData!.fontSize = o;
+    saveAndNotifyListeners();
+  }
+
+  set tableMode(int? o) {
+    _settingData!.tableMode = o;
+    saveAndNotifyListeners();
+  }
+
+  set relayMode(int? o) {
+    _settingData!.relayMode = o;
+    saveAndNotifyListeners();
+  }
+
+  set eventSignCheck(int? o) {
+    _settingData!.eventSignCheck = o;
+    saveAndNotifyListeners();
+  }
+
+  Future<void> saveAndNotifyListeners({bool updateUI = true}) async {
+    _settingData!.updatedTime = DateTime.now().millisecondsSinceEpoch;
+    var m = _settingData!.toJson();
+    var jsonStr = json.encode(m);
+    // print(jsonStr);
+    await _sharedPreferences!.setString(DataKey.SETTING, jsonStr);
+
+    if (updateUI) {
+      notifyListeners();
+    }
+  }
+}
+
+class SettingData {
+  /// open lock
+  late int lockOpen;
+
+  String? imageService;
+
+  String? imageServiceAddr;
+
+  /// i18n
+  String? i18n;
+
+  String? i18nCC;
+
+  /// theme style
+  late int themeStyle;
+
+  /// theme color
+  int? themeColor;
+
+  /// main font color
+  int? mainFontColor;
+
+  /// hint font color
+  int? hintFontColor;
+
+  /// card color
+  int? cardColor;
+
+  String? backgroundImage;
+
+  /// fontFamily
+  String? fontFamily;
+
+  double? fontSize;
+
+  int? tableMode;
+
+  int? relayMode;
+
+  int? eventSignCheck;
+
+  /// updated time
+  late int updatedTime;
+
+  SettingData({
+    this.lockOpen = OpenStatus.CLOSE,
+    this.imageService,
+    this.imageServiceAddr,
+    this.i18n,
+    this.i18nCC,
+    this.themeStyle = ThemeStyle.AUTO,
+    this.themeColor,
+    this.mainFontColor,
+    this.hintFontColor,
+    this.cardColor,
+    this.backgroundImage,
+    this.fontFamily,
+    this.fontSize,
+    this.tableMode,
+    this.relayMode,
+    this.eventSignCheck,
+    this.updatedTime = 0,
+  });
+
+  SettingData.fromJson(Map<String, dynamic> json) {
+    if (json['lockOpen'] != null) {
+      lockOpen = json['lockOpen'];
+    } else {
+      lockOpen = OpenStatus.CLOSE;
+    }
+    imageService = json['imageService'];
+    imageServiceAddr = json['imageServiceAddr'];
+    i18n = json['i18n'];
+    i18nCC = json['i18nCC'];
+    if (json['themeStyle'] != null) {
+      themeStyle = json['themeStyle'];
+    } else {
+      themeStyle = ThemeStyle.AUTO;
+    }
+    themeColor = json['themeColor'];
+    mainFontColor = json['mainFontColor'];
+    hintFontColor = json['hintFontColor'];
+    cardColor = json['cardColor'];
+    backgroundImage = json['backgroundImage'];
+    fontSize = json['fontSize'];
+    tableMode = json['tableMode'];
+    relayMode = json['relayMode'];
+    eventSignCheck = json['eventSignCheck'];
+    if (json['updatedTime'] != null) {
+      updatedTime = json['updatedTime'];
+    } else {
+      updatedTime = 0;
+    }
+  }
+
+  Map<String, dynamic> toJson() {
+    final Map<String, dynamic> data = new Map<String, dynamic>();
+    data['lockOpen'] = this.lockOpen;
+    data['imageService'] = this.imageService;
+    data['imageServiceAddr'] = this.imageServiceAddr;
+    data['i18n'] = this.i18n;
+    data['i18nCC'] = this.i18nCC;
+    data['themeStyle'] = this.themeStyle;
+    data['themeColor'] = this.themeColor;
+    data['mainFontColor'] = this.mainFontColor;
+    data['hintFontColor'] = this.hintFontColor;
+    data['cardColor'] = this.cardColor;
+    data['backgroundImage'] = this.backgroundImage;
+    data['fontFamily'] = this.fontFamily;
+    data['fontSize'] = this.fontSize;
+    data['tableMode'] = this.tableMode;
+    data['relayMode'] = this.relayMode;
+    data['eventSignCheck'] = this.eventSignCheck;
+    data['updatedTime'] = this.updatedTime;
+    return data;
+  }
+}

lib/router/index/index_router.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:nowser/component/webview/web_info.dart';
 import 'package:nowser/main.dart';
 import 'package:nowser/provider/web_provider.dart';
 import 'package:nowser/router/index/index_web_component.dart';

lib/router/index/index_web_component.dart

@@ -10,6 +10,7 @@ import 'package:nowser/util/router_util.dart';
 import 'package:provider/provider.dart';
 
 import '../../component/webview/web_home_component.dart';
+import '../../component/webview/webview_number_component.dart';
 
 class IndexWebComponent extends StatefulWidget {
   int index;
@@ -32,17 +33,7 @@ class _IndexWebComponent extends State<IndexWebComponent> {
     var maxWidth = mediaQuery.size.width;
     var titleWidth = maxWidth / 2;
 
-    Widget numberWidget =
-        Selector<WebProvider, int>(builder: (context, length, child) {
-      return Badge(
-        label: Text("$length"),
-        backgroundColor:
-            Colors.blueAccent, // TODO here should use background color
-        child: Icon(Icons.crop_din),
-      );
-    }, selector: (context, provider) {
-      return provider.webInfos.length;
-    });
+    Widget numberWidget = WebViewNumberComponent();
 
     return Container(
       padding: EdgeInsets.only(

lib/router/setting/setting_router.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+class SettingRouter extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() {
+    return _SettingRouter();
+  }
+}
+
+class _SettingRouter extends State<SettingRouter> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold();
+  }
+}

lib/router/web_tabs_select/web_tabs_select_item_component.dart

@@ -42,14 +42,12 @@ class _WebTabsSelectItemComponent extends State<WebTabsSelectItemComponent> {
 
     Widget logoWidget;
     if (StringUtil.isNotBlank(faviconUrl)) {
-      print(faviconUrl);
       logoWidget = Container(
         width: logoWidth,
         height: logoWidth,
         clipBehavior: Clip.hardEdge,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(logoWidth / 2),
-          color: themeData.hintColor,
         ),
         child: ImageComponent(
           imageUrl: faviconUrl!,
@@ -101,7 +99,7 @@ class _WebTabsSelectItemComponent extends State<WebTabsSelectItemComponent> {
       ),
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
-        color: Colors.white,
+        color: themeData.cardColor,
       ),
       child: Row(
         children: list,

lib/util/colors_util.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class ColorsUtil {
+  /// 十六进制颜色，
+  /// hex, 十六进制值，例如：0xffffff,
+  /// alpha, 透明度 [0.0,1.0]
+  static Color hexColor(int hex, {double alpha = 1}) {
+    if (alpha < 0) {
+      alpha = 0;
+    } else if (alpha > 1) {
+      alpha = 1;
+    }
+    return Color.fromRGBO((hex & 0xFF0000) >> 16, (hex & 0x00FF00) >> 8,
+        (hex & 0x0000FF) >> 0, alpha);
+  }
+
+  static Color hexToColor(String s) {
+    // 如果传入的十六进制颜色值不符合要求，返回默认值
+    if (s.length != 7 || int.tryParse(s.substring(1, 7), radix: 16) == null) {
+      s = '#999999';
+    }
+
+    return new Color(int.parse(s.substring(1, 7), radix: 16) + 0xFF000000);
+  }
+
+  static String colorToHex(Color color) {
+    return "#" +
+        color.red.toRadixString(16) +
+        color.green.toRadixString(16) +
+        color.blue.toRadixString(16);
+  }
+}

lib/util/table_mode_util.dart

@@ -0,0 +1,15 @@
+import 'package:nostr_sdk/utils/platform_util.dart';
+
+import '../const/base_consts.dart';
+import '../main.dart';
+
+class TableModeUtil {
+  static bool isTableMode() {
+    if (settingProvider.tableMode == OpenStatus.OPEN) {
+      return true;
+    } else if (settingProvider.tableMode == OpenStatus.CLOSE) {
+      return false;
+    }
+    return PlatformUtil.isTableModeWithoutSetting();
+  }
+}

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -9,6 +9,7 @@ import cryptography_flutter
 import device_info_plus
 import flutter_inappwebview_macos
 import path_provider_foundation
+import shared_preferences_foundation
 import sqflite
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
@@ -16,5 +17,6 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
   InAppWebViewFlutterPlugin.register(with: registry.registrar(forPlugin: "InAppWebViewFlutterPlugin"))
   PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
+  SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
   SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
 }

pubspec.lock

@@ -246,6 +246,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.4.1"
+  flutter_font_picker:
+    dependency: "direct main"
+    description:
+      name: flutter_font_picker
+      sha256: dd263326950d15f01b2e689ba7f24d1775e9c89a36cf2bebba06d28f7d681689
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
   flutter_inappwebview:
     dependency: "direct main"
     description:
@@ -333,6 +341,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  google_fonts:
+    dependency: "direct main"
+    description:
+      name: google_fonts
+      sha256: b1ac0fe2832c9cc95e5e88b57d627c5e68c223b9657f4b96e1487aa9098c7b82
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.2.1"
   hex:
     dependency: transitive
     description:
@@ -604,6 +620,62 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.28.0"
+  shared_preferences:
+    dependency: "direct main"
+    description:
+      name: shared_preferences
+      sha256: "746e5369a43170c25816cc472ee016d3a66bc13fcf430c0bc41ad7b4b2922051"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.2"
+  shared_preferences_android:
+    dependency: transitive
+    description:
+      name: shared_preferences_android
+      sha256: a7e8467e9181cef109f601e3f65765685786c1a738a83d7fbbde377589c0d974
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.1"
+  shared_preferences_foundation:
+    dependency: transitive
+    description:
+      name: shared_preferences_foundation
+      sha256: c4b35f6cb8f63c147312c054ce7c2254c8066745125264f0c88739c417fc9d9f
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.5.2"
+  shared_preferences_linux:
+    dependency: transitive
+    description:
+      name: shared_preferences_linux
+      sha256: "580abfd40f415611503cae30adf626e6656dfb2f0cee8f465ece7b6defb40f2f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  shared_preferences_platform_interface:
+    dependency: transitive
+    description:
+      name: shared_preferences_platform_interface
+      sha256: "57cbf196c486bc2cf1f02b85784932c6094376284b3ad5779d1b1c6c6a816b80"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
+  shared_preferences_web:
+    dependency: transitive
+    description:
+      name: shared_preferences_web
+      sha256: d2ca4132d3946fec2184261726b355836a82c33d7d5b67af32692aff18a4684e
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.2"
+  shared_preferences_windows:
+    dependency: transitive
+    description:
+      name: shared_preferences_windows
+      sha256: "94ef0f72b2d71bc3e700e025db3710911bd51a71cefb65cc609dd0d9a982e3c1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -42,6 +42,9 @@ dependencies:
   bot_toast: ^4.1.3
   intl: ^0.19.0
   cached_network_image: ^3.3.1
+  shared_preferences: ^2.2.3
+  google_fonts: ^6.2.1
+  flutter_font_picker: ^1.4.0
 
 dev_dependencies:
   flutter_test:
@@ -54,6 +57,9 @@ dev_dependencies:
   # rules and activating additional ones.
   flutter_lints: ^3.0.0
 
+dependency_overrides:
+  google_fonts: ^6.2.1
+
 # For information on the generic Dart part of this file, see the
 # following page: https://dart.dev/tools/pub/pubspec
 # The following section is specific to Flutter packages.