website: add dark mode.

Author: jaywcjlove

website/src/component/Container/index.tsx

@@ -10,7 +10,6 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export default function Container(props: ContainerProps) {
   const { data, children, path = '' } = props;
-  console.log(path)
   return (
     <Fragment>
       <Header enableStyle={/\/(team)/.test(path)} showBorder={/\/(home)/.test(path)} path={path} />

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

@@ -0,0 +1,7 @@
+:root[data-theme=dark] {
+  filter: invert(1);
+  background-color: #fff;
+  img {
+    filter: invert(1);
+  }
+}

website/src/component/DarkMode/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { Switch } from 'uiw';
+import './index.module.less';
+
+export default function DarkMode() {
+  const theme = localStorage.getItem('theme');
+  const [dark, setDark] = useState(!!theme);
+  useEffect(() => {
+    document.documentElement.dataset.theme = dark ? 'dark' : '';
+  }, [dark]);
+  return (
+    <Switch
+      checked={dark}
+      data-checked="🌞"
+      data-unchecked="🌛"
+      onChange={(evn) => {
+        if (evn.target.checked) {
+          localStorage.setItem('theme', '1')
+        } else {
+          localStorage.removeItem('theme')
+        }
+        setDark(evn.target.checked);
+      }}
+      style={{ marginTop: 5, marginLeft: 10, marginRight: 10 }}
+    />
+  );
+}

website/src/component/Header/index.tsx

@@ -1,6 +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 { ReactComponent } from '../../assets/logo-dark.svg';
 import { ReactComponent as Github } from '../../assets/github.svg';
 
@@ -42,6 +43,7 @@ export default function Header(props: HeaderProps) {
           <a target="__blank" href="https://github.com/uiwjs/react-native-uiw/issues">问题反馈</a>
           <a target="__blank" href="https://uiwjs.github.io/#/components">Web 组件</a>
           <NavLink to="/team">团队</NavLink>
+          <DarkMode />
           <a target="__blank" href="https://github.com/uiwjs/react-native-uiw">
             <Github />
           </a>

website/src/pages/team/index.module.less

@@ -57,8 +57,8 @@
       margin: 20px;
       transition: all .3s;
       opacity: 0.75;
-      filter: grayscale(100%);
-      filter: gray;
+      // filter: grayscale(100%);
+      // filter: gray;
     }
     span {
       transition: color .3s;
@@ -69,8 +69,8 @@
     }
     &:hover img {
       box-shadow: 0px 0px 0px 5px #cccccc;
-      transform: rotate(720deg) scale(.9);
-      filter: initial;
+      transform: rotate(720deg) scale(.8);
+      // filter: initial;
       opacity: 1;
     }
   }