add change theme function

src-tauri/Cargo.lock

@@ -2633,6 +2633,7 @@ dependencies = [
  "tauri-plugin-single-instance",
  "tauri-plugin-sql",
  "tauri-plugin-store",
+ "tauri-plugin-theme",
  "tauri-plugin-updater",
  "tauri-plugin-upload",
  "tauri-plugin-window-state",
@@ -5172,6 +5173,21 @@ dependencies = [
  "thiserror",
 ]
 
+[[package]]
+name = "tauri-plugin-theme"
+version = "0.2.0"
+source = "git+https://github.com/reyamir/tauri-plugin-theme?branch=tauri-v2#73e8fc84cb4fb8363fee4edcbbab82c98c1874cc"
+dependencies = [
+ "cocoa 0.25.0",
+ "futures-lite",
+ "gtk",
+ "once_cell",
+ "serde",
+ "tauri",
+ "tintanum",
+ "tokio",
+]
+
 [[package]]
 name = "tauri-plugin-updater"
 version = "2.0.0-alpha.4"
@@ -5417,6 +5433,16 @@ dependencies = [
  "time-core",
 ]
 
+[[package]]
+name = "tintanum"
+version = "0.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7abbcf9173afc80733c20b7e27a30bc9284d6535bdbde2a70904032de63e16e8"
+dependencies = [
+ "futures-lite",
+ "zbus",
+]
+
 [[package]]
 name = "tinyvec"
 version = "1.6.0"

src-tauri/Cargo.toml

@@ -33,6 +33,7 @@ tauri-plugin-autostart = { git = "https://github.com/tauri-apps/plugins-workspac
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
 tauri-plugin-upload = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
 tauri-plugin-window-state = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v2" }
+tauri-plugin-theme = { git = "https://github.com/reyamir/tauri-plugin-theme", branch = "tauri-v2" }
 tauri-plugin-sql = { git = "hhttps://github.com/tauri-apps/plugins-workspace", branch = "v2", features = [
   "sqlite",
 ] }

src-tauri/src/main.rs

@@ -7,6 +7,7 @@ use keyring::Entry;
 use std::time::Duration;
 use tauri_plugin_autostart::MacosLauncher;
 use tauri_plugin_sql::{Migration, MigrationKind};
+use tauri_plugin_theme::ThemePlugin;
 use webpage::{Webpage, WebpageOptions};
 
 #[derive(Clone, serde::Serialize)]
@@ -105,6 +106,7 @@ fn secure_remove(key: String) -> Result<(), ()> {
 }
 
 fn main() {
+  let mut ctx = tauri::generate_context!();
   tauri::Builder::default()
     .setup(|app| {
       #[cfg(desktop)]
@@ -113,6 +115,7 @@ fn main() {
         .plugin(tauri_plugin_updater::Builder::new().build())?;
       Ok(())
     })
+    .plugin(ThemePlugin::init(ctx.config_mut()))
     .plugin(
       tauri_plugin_sql::Builder::default()
         .add_migrations(
@@ -154,6 +157,6 @@ fn main() {
       secure_load,
       secure_remove
     ])
-    .run(tauri::generate_context!())
+    .run(ctx)
     .expect("error while running tauri application");
 }

src/app/settings/general.tsx

@@ -1,5 +1,8 @@
 import * as Switch from '@radix-ui/react-switch';
+import { invoke } from '@tauri-apps/api/primitives';
+import { getCurrent } from '@tauri-apps/api/window';
 import { useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
 
 import { useStorage } from '@libs/storage/provider';
 
@@ -16,8 +19,20 @@ export function GeneralSettingScreen() {
     appearance: 'system',
   });
 
+  const changeTheme = async (theme: 'light' | 'dark' | 'auto') => {
+    await invoke('plugin:theme|set_theme', {
+      theme,
+    });
+    await db.createSetting('appearance', theme);
+    // update state
+    setSettings((prev) => ({ ...prev, appearance: theme }));
+  };
+
   useEffect(() => {
     async function loadSettings() {
+      const theme = await getCurrent().theme();
+      setSettings((prev) => ({ ...prev, appearance: theme }));
+
       const data = await db.getAllSettings();
       if (!data) return;
 
@@ -51,12 +66,6 @@ export function GeneralSettingScreen() {
             ...prev,
             notification: item.value === '1' ? true : false,
           }));
-
-        if (item.key === 'appearance')
-          setSettings((prev) => ({
-            ...prev,
-            appearance: item.value,
-          }));
       });
     }
 
@@ -133,9 +142,17 @@ export function GeneralSettingScreen() {
           <div className="flex flex-1 gap-6">
             <button
               type="button"
+              onClick={() => changeTheme('light')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'light'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <LightIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
@@ -144,9 +161,17 @@ export function GeneralSettingScreen() {
             </button>
             <button
               type="button"
+              onClick={() => changeTheme('dark')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'dark'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <DarkIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
@@ -155,9 +180,17 @@ export function GeneralSettingScreen() {
             </button>
             <button
               type="button"
+              onClick={() => changeTheme('auto')}
               className="flex flex-col items-center justify-center gap-0.5"
             >
-              <div className="inline-flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-100 dark:bg-neutral-900">
+              <div
+                className={twMerge(
+                  'inline-flex h-11 w-11 items-center justify-center rounded-lg',
+                  settings.appearance === 'auto'
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-neutral-100 dark:bg-neutral-900'
+                )}
+              >
                 <SystemModeIcon className="h-5 w-5" />
               </div>
               <p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">