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

template/src/components/app-wrapper/index.tsx

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

template/src/layout/HeaderAndFooter/index.module.css

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

template/src/layout/HeaderAndSider/index.module.css

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

template/src/style/reset.css

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