control center theme

src-tauri/src/app/cmd.rs

@@ -4,7 +4,7 @@ use crate::{
 };
 use log::info;
 use std::{collections::HashMap, fs, path::PathBuf};
-use tauri::{api, command, AppHandle, Manager};
+use tauri::{api, command, AppHandle, Manager, Theme};
 
 #[command]
 pub fn drag_window(app: AppHandle) {
@@ -38,6 +38,11 @@ pub fn get_chat_conf() -> ChatConfJson {
     ChatConfJson::get_chat_conf()
 }
 
+#[command]
+pub fn get_theme() -> String {
+    ChatConfJson::theme().unwrap_or(Theme::Light).to_string()
+}
+
 #[command]
 pub fn reset_chat_conf() -> ChatConfJson {
     ChatConfJson::reset_chat_conf()

src-tauri/src/main.rs

@@ -56,6 +56,7 @@ async fn main() {
             cmd::download,
             cmd::open_link,
             cmd::get_chat_conf,
+            cmd::get_theme,
             cmd::reset_chat_conf,
             cmd::run_check_update,
             cmd::form_cancel,

src/layout/index.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import {Layout, Menu, Button, Tooltip, message} from 'antd';
+import {Layout, Menu, Button, Tooltip, message, ConfigProvider, theme, Tag} from 'antd';
 import { SyncOutlined } from '@ant-design/icons';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { getName, getVersion } from '@tauri-apps/api/app';
@@ -12,7 +12,8 @@ const { Content, Footer, Sider } = Layout;
 
 const appName = await getName();
 const appVersion = await getVersion();
-
+const appTheme = await invoke("get_theme");
+console.log("theme:"+appTheme);
 interface ChatLayoutProps {
   children?: React.ReactNode;
 }
@@ -27,9 +28,10 @@ const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
   }
 
   return (
+    <ConfigProvider theme={{algorithm: appTheme === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm}}>
     <Layout style={{ minHeight: '100vh' }} hasSider>
       <Sider
-        theme="light"
+        theme={ appTheme === "dark" ? "dark" : "light" }
         collapsible
         collapsed={collapsed}
         onCollapse={(value) => setCollapsed(value)}
@@ -45,21 +47,25 @@ const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
       >
         <div className="chat-logo"><img src="/logo.png" /></div>
         <div className="chat-info">
-            <span>{appName}</span>
+            <Tag>{appName}</Tag>
         </div>
         <div className="chat-info">
+          <Tag>
             <span>{appVersion}</span>
             <span> </span>
             {
-                <Tooltip title="click to check update">
+              <Tooltip title="click to check update">
-                    <a onClick={checkAppUpdate}><SyncOutlined /></a>
+                <a onClick={checkAppUpdate}><SyncOutlined /></a>
-                </Tooltip>
+              </Tooltip>
             }
+          </Tag>
+
         </div>
 
         <Menu
           defaultSelectedKeys={[location.pathname]}
           mode="inline"
+          theme={ appTheme === "dark" ? "dark" : "light" }
           inlineIndent={12}
           items={menuItems}
           defaultOpenKeys={['/model']}
@@ -79,6 +85,7 @@ const ChatLayout: FC<ChatLayoutProps> = ({ children }) => {
           <a href="https://github.com/lencx/chatgpt" target="_blank">ChatGPT Desktop Application</a> ©2022 Created by lencx</Footer>
       </Layout>
     </Layout>
+    </ConfigProvider>
   );
 };