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