✨feat: add desktop window theme and color setting support

- Implement set_desktop_theme command for Windows/macOS/Linux
- Add set_desktop_colors command for custom background colors
- Update setTauriTheme to support desktop platforms
- Set window background colors based on light/dark theme
- Support hex color format parsing (#FF0000)
- Apply theme changes to main window only
- Integrate with existing Android status bar theming

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: blinko-space

README.md

@@ -1,5 +1,5 @@
 
-<img align='right' height='40px' src="./public/logo.svg" alt="Blinko" />
+<img align='right' height='40px' src="./public/logo.png" alt="Blinko" />
 
 # Blinko - Open Source, Self-hosted
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<img align='right' height='40px' src="./public/logo.svg" alt="Blinko" />
+<img align='right' height='40px' src="./public/logo.png" alt="Blinko" />
 
 # Blinko - 开源、自托管的笔记应用
 

app/public/logo.png

@@ -234,4 +234,81 @@ pub fn hide_quicktool_window<R: tauri::Runtime>(app: AppHandle<R>) -> Result<(),
     } else {
         Err("Quicktool window not found".to_string())
     }
+}
+
+#[tauri::command]
+pub fn set_desktop_theme<R: tauri::Runtime>(app: AppHandle<R>, theme: String) -> Result<(), String> {
+    use tauri::{Theme, window::Color};
+
+    let tauri_theme = match theme.as_str() {
+        "light" => Theme::Light,
+        "dark" => Theme::Dark,
+        _ => return Err(format!("Invalid theme: {}", theme))
+    };
+
+    // Define background colors based on theme
+    let background_color = match theme.as_str() {
+        "light" => Color(248, 248, 248, 255), // #F8F8F8
+        "dark" => Color(28, 28, 30, 255),     // #1C1C1E
+        _ => Color(248, 248, 248, 255),
+    };
+
+    // Set theme for main window only
+    if let Some(window) = app.get_webview_window("main") {
+        // Set system theme
+        if let Err(e) = window.set_theme(Some(tauri_theme)) {
+            eprintln!("Failed to set theme for main window: {}", e);
+        } else {
+            println!("Set main window theme to: {}", theme);
+        }
+
+        // Set window background color
+        if let Err(e) = window.set_background_color(Some(background_color)) {
+            eprintln!("Failed to set background color for main window: {}", e);
+        } else {
+            println!("Set main window background color to: {:?}", background_color);
+        }
+    }
+
+    Ok(())
+}
+
+#[tauri::command]
+pub fn set_desktop_colors<R: tauri::Runtime>(
+    app: AppHandle<R>,
+    background_color: Option<String>
+) -> Result<(), String> {
+    use tauri::window::Color;
+
+    // Helper function to parse hex color to RGBA
+    fn hex_to_rgba(hex: &str) -> Result<(u8, u8, u8, u8), String> {
+        let hex = hex.trim_start_matches('#');
+        if hex.len() != 6 {
+            return Err("Invalid hex color format".to_string());
+        }
+
+        let r = u8::from_str_radix(&hex[0..2], 16).map_err(|_| "Invalid red component")?;
+        let g = u8::from_str_radix(&hex[2..4], 16).map_err(|_| "Invalid green component")?;
+        let b = u8::from_str_radix(&hex[4..6], 16).map_err(|_| "Invalid blue component")?;
+
+        Ok((r, g, b, 255))
+    }
+
+    // Set background color for main window only
+    if let Some(color_str) = background_color {
+        if let Ok((r, g, b, a)) = hex_to_rgba(&color_str) {
+            if let Some(window) = app.get_webview_window("main") {
+                let color = Color(r, g, b, a);
+                if let Err(e) = window.set_background_color(Some(color)) {
+                    eprintln!("Failed to set custom background color for main window: {}", e);
+                } else {
+                    println!("Set main window custom background color to: {}", color_str);
+                }
+            }
+        } else {
+            return Err("Invalid color format. Use hex format like #FF0000".to_string());
+        }
+    }
+
+    Ok(())
 }

app/public/logo.svg

@@ -70,7 +70,9 @@ pub fn run() {
                 copy_to_clipboard,
                 test_text_selection,
                 check_accessibility_permissions,
-                show_quicktool
+                show_quicktool,
+                set_desktop_theme,
+                set_desktop_colors
             ])
             .setup(|app| {
                 #[cfg(not(any(target_os = "android", target_os = "ios")))]

app/src-tauri/src/desktop/window.rs

@@ -89,7 +89,7 @@ export const AboutSetting = observer(() => {
       title={t('about')}
     >
       <div className="flex items-start space-x-4 mb-6">
-        <Image src="/logo.svg" alt="Blinko" className="w-16 h-16 rounded-xl" />
+        <Image src="/logo.png" alt="Blinko" className="w-16 h-16 rounded-xl" />
         <div>
           <h2 className="text-xl font-semibold">Blinko</h2>
           <div className="flex flex-col gap-2 mt-1">

app/src-tauri/src/lib.rs

@@ -8,8 +8,8 @@ export const FallbackImage = ({ src, alt, className, ...props }: ImageProps) =>
     };
 
     if (error) {
-        return <Image src={'/logo.svg'} alt={alt} className={className} {...props} onError={handleError}  />;
+        return <Image src={'/logo.png'} alt={alt} className={className} {...props} onError={handleError}  />;
     }
 
-    return <Image src={src} alt={alt} className={className} {...props} onError={handleError} fallbackSrc="/logo.svg" />;
+    return <Image src={src} alt={alt} className={className} {...props} onError={handleError} fallbackSrc="/logo.png" />;
 }

app/src/components/BlinkoSettings/AboutSetting.tsx

@@ -10,6 +10,7 @@ import { download } from '@tauri-apps/plugin-upload'
 import { downloadDir, publicDir } from '@tauri-apps/api/path'
 import { setStatusBarColor } from 'tauri-plugin-blinko-api'
 import { useEffect, useState } from 'react';
+import { invoke } from '@tauri-apps/api/core';
 
 export interface PermissionStatus {
     audio: boolean;
@@ -114,11 +115,17 @@ export async function downloadFromLink(uri: string, filename?: string) {
     }
 }
 
-export function setTauriTheme(theme: any) {
+export async function setTauriTheme(theme: any) {
     if (isAndroid()) {
         const lightColor = '#f8f8f8';
         const darkColor = '#1C1C1E';
         setStatusBarColor(theme === 'light' ? lightColor : darkColor);
+    } else if (isDesktop()) {
+        try {
+            await invoke('set_desktop_theme', { theme });
+        } catch (error) {
+            console.error('Failed to set desktop theme:', error);
+        }
     }
 }
 

app/src/components/Common/FallbackImage/index.tsx

@@ -244,7 +244,7 @@ export class UserStore implements Store {
       const themeToSet = savedTheme === 'system' ? systemTheme : savedTheme;
       setTheme(themeToSet);
       this.updatePWAColor(themeToSet);
-      setTauriTheme(themeToSet);
+      setTauriTheme(themeToSet).catch(console.error);
       this.themeInitialized = true;
     }
 
@@ -294,6 +294,7 @@ export class UserStore implements Store {
             const newTheme = config.theme === 'system' ? systemTheme : config.theme;
             setTheme(newTheme);
             this.updatePWAColor(newTheme);
+            setTauriTheme(newTheme).catch(console.error);
           }
         }
       } catch (error) {
@@ -372,7 +373,7 @@ export class UserStore implements Store {
     }, []);
 
     useEffect(() => {
-      setTauriTheme(theme);
+      setTauriTheme(theme).catch(console.error);
     }, [theme]);
 
     useEffect(() => {