feat: 主题色切换在主进程中配置
This commit is contained in:
parent
fc337f689f
commit
febb105682
|
@ -13,6 +13,10 @@ import { EVENT_PARSE_DICOM } from "./ipcEvent";
|
|||
const registerIpcMainHandlers = (mainWindow: Electron.BrowserWindow | null) => {
|
||||
if (!mainWindow) return;
|
||||
|
||||
ipcMain.handleOnce('ipc-loaded', () => {
|
||||
mainWindow.show()
|
||||
})
|
||||
|
||||
ipcMain.on(EVENT_PARSE_DICOM, async (event, file: string) => {
|
||||
const dirDialog = await dialog.showOpenDialog(mainWindow, {
|
||||
properties: ["openDirectory"],
|
||||
|
|
|
@ -27,14 +27,22 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
|
|||
let win: BrowserWindow | null;
|
||||
let tray: Tray | null = null;
|
||||
|
||||
const theme: 'dark' | 'light' = 'dark'
|
||||
|
||||
const themeTitleBarStyles = {
|
||||
dark: { color: "rgb(32,32,32)", symbolColor: '#fff' },
|
||||
light: {}
|
||||
}
|
||||
|
||||
function createWindow() {
|
||||
win = new BrowserWindow({
|
||||
width: 1280,
|
||||
height: 800,
|
||||
show: false, // 先隐藏。等待渲染完成,防止闪烁
|
||||
icon: path.join(process.env.VITE_PUBLIC, "AI.png"),
|
||||
// frame: false,
|
||||
titleBarStyle: "hidden", // customButtonsOnHover || hidden || hiddenInset
|
||||
titleBarOverlay: { height: 36, color: "rgb(32,32,32)",symbolColor:'#fff' }, // 渲染进程发消息动态改变这个
|
||||
titleBarOverlay: { height: 36, ...themeTitleBarStyles[theme] }, // 渲染进程发消息动态改变这个
|
||||
webPreferences: {
|
||||
preload: path.join(__dirname, "preload.mjs"),
|
||||
},
|
||||
|
@ -44,6 +52,7 @@ function createWindow() {
|
|||
win.webContents.on("did-finish-load", () => {
|
||||
win?.webContents.send("main-process-message", {
|
||||
platform: process.platform === "darwin" ? "macos" : "windows",
|
||||
theme
|
||||
});
|
||||
});
|
||||
|
||||
|
|
11
src/App.tsx
11
src/App.tsx
|
@ -2,17 +2,22 @@ import { ThemeProvider } from "@/components/theme-provider";
|
|||
import LayoutMain from "@/pages/Layout";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import Aorta from "@/pages/Aorta";
|
||||
import Dockview from "@/pages/Dock";
|
||||
import { Setting } from "./pages/Setting";
|
||||
import { useEffect } from "react";
|
||||
|
||||
function App() {
|
||||
const theme = document.querySelector('html')!.getAttribute('theme') as 'dark' | 'light'
|
||||
|
||||
useEffect(() => {
|
||||
window.ipcRenderer.invoke('ipc-loaded')
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
|
||||
<ThemeProvider defaultTheme={theme} storageKey="vite-ui-theme">
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" element={<LayoutMain />}>
|
||||
<Route index element={<Aorta />} />
|
||||
<Route path="dockerview" element={<Dockview />} />
|
||||
<Route path="setting" element={<Setting />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
|
|
|
@ -14,7 +14,7 @@ type ThemeProviderState = {
|
|||
};
|
||||
|
||||
const initialState: ThemeProviderState = {
|
||||
theme: "system",
|
||||
theme: "dark",
|
||||
setTheme: () => null,
|
||||
};
|
||||
|
||||
|
|
|
@ -3,8 +3,9 @@ import App from "./App.tsx";
|
|||
import "@/style/global.css";
|
||||
|
||||
window.ipcRenderer.on("main-process-message", (_event, message) => {
|
||||
const { platform } = message
|
||||
const { platform, theme } = message
|
||||
document.querySelector('html')?.setAttribute('platform', platform)
|
||||
document.querySelector('html')?.setAttribute('theme', theme)
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(<App />);
|
||||
});
|
||||
|
|
|
@ -12,7 +12,7 @@ body,
|
|||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 97.25%;
|
||||
--background: 0 0% 94.12%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
|
|
Loading…
Reference in New Issue
Block a user