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

Author: nullptr-z

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/Preview/index.js

@@ -28,12 +28,7 @@ const Markdown = styled(MarkdownPreview)`
 const getBooleanValue = (param, field, defaultValue) => {
   if (Reflect.has(param, field)) {
     const newValue = Reflect.get(param, field);
-    if (newValue === 'true') {
-      return true;
-    }
-    if (newValue === 'false') {
-      return false;
-    }
+    return newValue === 'true';
   }
   return defaultValue;
 };

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;
+}