settings page

lib/pages/settings/appearance.dart

@@ -0,0 +1,44 @@
+part of 'settings_page.dart';
+
+class AppearanceSettings extends StatefulWidget {
+  const AppearanceSettings({super.key});
+
+  @override
+  State<AppearanceSettings> createState() => _AppearanceSettingsState();
+}
+
+class _AppearanceSettingsState extends State<AppearanceSettings> {
+  @override
+  Widget build(BuildContext context) {
+    return SmoothCustomScrollView(
+      slivers: [
+        SliverAppbar(title: Text("Appearance".tl)),
+        SelectSetting(
+          title: "Theme Mode".tl,
+          settingKey: "theme_mode",
+          optionTranslation: {
+            "system": "System".tl,
+            "light": "Light".tl,
+            "dark": "Dark".tl,
+          },
+        ).toSliver(),
+        SelectSetting(
+          title: "Theme Color".tl,
+          settingKey: "color",
+          optionTranslation: {
+            "red": "Red".tl,
+            "pink": "Pink".tl,
+            "purple": "Purple".tl,
+            "green": "Green".tl,
+            "orange": "Orange".tl,
+            "blue": "Blue".tl,
+          },
+          onChanged: () async {
+            await App.init();
+            App.forceRebuild();
+          },
+        ).toSliver(),
+      ],
+    );
+  }
+}