Merge pull request #482 from nullptr-z/dev

fix(doc): 文档主题色 BUG 修复

Author: ChenlingasMx

website/src/component/DarkMode/index.tsx

@@ -7,7 +7,7 @@ export default function DarkMode() {
   const theme = localStorage.getItem('theme');
   const [dark, setDark] = useState(!!theme);
   useEffect(() => {
-    document.documentElement.dataset.theme = dark ? 'dark' : '';
+    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
   }, [dark]);
   return (
     <Switch

website/src/component/Header/index.module.less

@@ -9,6 +9,11 @@
   width: 100%;
 }
 
+html[data-color-mode*='dark'] .warpper {
+  background-color: #0d1117;
+  border-bottom: 1px solid #032438;
+}
+
 .inner {
   margin: 0 auto;
   display: flex;
@@ -19,6 +24,7 @@
 
 .menus {
   display: flex;
+
   a {
     transition: all 0.3s;
     color: #333;
@@ -27,9 +33,11 @@
     display: flex;
     align-items: center;
   }
+
   a + a {
     margin-left: 6px;
   }
+
   :global(.active),
   a:hover {
     background: #00000017;
@@ -41,6 +49,7 @@
   display: flex;
   align-items: center;
   color: #333;
+
   img {
     margin-right: 8px;
     height: 38px;
@@ -53,9 +62,11 @@
   line-height: 14px;
   font-weight: bold;
   padding-left: 8px;
+
   > :first-child {
     font-size: 18px;
   }
+
   > :last-child {
     margin-bottom: -10px;
     font-size: 12px;

website/src/component/Header/index.tsx

@@ -1,7 +1,7 @@
 import { Link, NavLink } from 'react-router-dom';
 import pkg from '@uiw/react-native/package.json';
 import styles from './index.module.less';
-import DarkMode from '../DarkMode';
+import '@wcj/dark-mode';
 import { ReactComponent } from '../../assets/logo-dark.svg';
 import { ReactComponent as Github } from '../../assets/github.svg';
 
@@ -43,7 +43,7 @@ export default function Header(props: HeaderProps) {
             Web 组件
           </a>
           <NavLink to="/team">团队</NavLink>
-          <DarkMode />
+          <dark-mode permanent style={{ display: 'flex', alignItems: 'center' }} />
           <a target="__blank" href="https://github.com/uiwjs/react-native-uiw">
             <Github />
           </a>

website/src/component/SubMenus/index.module.less

@@ -1,27 +1,36 @@
 .warpper {
   padding-right: 16px;
   position: relative;
+
   a {
     color: #5a5a5a;
     transition: all 0.3s;
     margin-left: 10px;
     display: flex;
     justify-content: space-between;
     padding: 10px 10px 10px 0;
+
     svg {
       fill: #bbb;
       transition: fill 0.3s;
     }
+
     &:hover {
       color: #1890ff;
+
       svg {
         fill: #1890ff;
       }
     }
+
     &:global(.active) {
       color: #1890ff;
       background-color: #f5f8fa;
       padding-left: 10px;
+
+      html[data-color-mode*='dark'] &:global {
+        background-color: #061c31;
+      }
     }
   }
 }
@@ -50,3 +59,11 @@
   top: 60px;
   bottom: 0;
 }
+
+html[data-color-mode*='dark'] .divider {
+  border-bottom: 1px solid #032438;
+}
+
+html[data-color-mode*='dark'] .inner {
+  border-right: 1px solid #032438;
+}

website/src/routes/Controller.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { Key, Suspense } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { Loader } from 'uiw';
 import { routeData } from '../routes/router';
@@ -16,7 +16,7 @@ export default function Controller() {
       <Route path="/" element={<Navigate replace to="/home" />} />
       <Route path="/docs" element={<Navigate replace to="/docs/getting-started" />} />
       <Route path="/components" element={<Navigate replace to="/components/about" />} />
-      {routeData.map(({ component: BasicLayout, path, children = [] }, idx) => (
+      {routeData.map(({ component: BasicLayout, path, children = [] }: any, idx) => (
         <Route
           path={path}
           key={idx}
@@ -26,7 +26,7 @@ export default function Controller() {
             </Suspense>
           }
         >
-          {children.map((child, idx) => {
+          {children.map((child: { component: any; path: string }, idx: Key | null | undefined) => {
             const Child = child.component as any;
             return (
               <Route