templates/toco-react-template
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 滚动条主题更新 & 页面背景色更新

Browse Source
This commit is contained in:
dayjoy
2024-10-31 16:26:54 +08:00
parent 2a25a41be7
commit 89e01a8681
4 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
template/src/components/app-wrapper/index.tsx
View File

@@ -73,6 +73,13 @@ const Insider = (props: InsiderProps) => {
globalMessage.setMessage(message); globalMessage.setMessage(message);
}, [message]); }, [message]);
useEffect(() => {
document.documentElement.setAttribute(
'data-color-scheme',
theme === Theme.DARK ? 'dark' : 'light',
);
}, [theme]);
return ( return (
<HelmetProvider context={helmetContext}> <HelmetProvider context={helmetContext}>
<IntlProvider locale={locale} messages={langsMap[locale]}> <IntlProvider locale={locale} messages={langsMap[locale]}>

2
template/src/layout/HeaderAndFooter/index.module.css
View File

@@ -41,7 +41,7 @@
.main { .main {
padding: 24px; padding: 24px;
background: var(--toco-colorBgBase); background: var(--toco-colorBgContainer);
border-radius: var(--toco-borderRadiusLG); border-radius: var(--toco-borderRadiusLG);
} }

2
template/src/layout/HeaderAndSider/index.module.css
View File

@@ -40,7 +40,7 @@
padding: 24px; padding: 24px;
margin: 0; margin: 0;
min-height: 280px; min-height: 280px;
background: var(--toco-colorBgBase); background: var(--toco-colorBgContainer);
border-radius: var(--toco-borderRadiusLG); border-radius: var(--toco-borderRadiusLG);
} }

8
template/src/style/reset.css
View File

@@ -8,4 +8,12 @@ html, body {
height: 100vh; height: 100vh;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
}
[data-color-scheme="dark"] {
color-scheme: dark;
}
[data-color-scheme="light"] {
color-scheme: light;
} }