Feature docs color (#1796)

* feat: 添加支持暗夜模式

* feat: 添加支持暗夜模式

* chore: 更新依赖包版本

* chore: 更新react-router-dom依赖版本至5.3.4

* fix: 修复 pathname 不存在的问题

---------

Co-authored-by: mhpei <[email protected]>

Author: robinv8

packages/taro-ui-docs/app.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import { HashRouter as Router, Switch, Route } from 'react-router-dom'
+import { HashRouter as Router, Route, Switch } from 'react-router-dom'
 
 import 'at-ui-style'
 
@@ -13,14 +13,14 @@ class App extends React.Component {
     super(...args)
     this.state = {
       visible: false,
-      mode: 'light',
+      mode: 'light'
     }
   }
   componentDidMount() {
     const _mode = localStorage.getItem('mode')
     this.setState({
       visible: true,
-      mode: _mode || 'light',
+      mode: _mode || 'light'
     })
   }
 
@@ -31,29 +31,40 @@ class App extends React.Component {
   handleMode() {
     const _mode = this.state.mode
     const modeVal = _mode === 'light' ? 'dark' : 'light'
-    this.setState({
-      mode: modeVal
-    }, () => {
-      localStorage.setItem('mode', modeVal)
-    })
+    this.setState(
+      {
+        mode: modeVal
+      },
+      () => {
+        localStorage.setItem('mode', modeVal)
+      }
+    )
   }
 
   render() {
     const { mode } = this.state
 
     return (
-      <div className='wrapper' style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}>
+      <div
+        className='wrapper'
+        style={{ backgroundColor: mode === 'light' ? '#F8FAFF' : '#434242' }}
+      >
         <Switch>
           <Route path='/' exact component={Index} />
-          <Route path='/docs' render={() => <Docs handleMode={this.handleMode.bind(this)} />} />
+          <Route
+            path='/docs'
+            render={props => (
+              <Docs {...props} handleMode={this.handleMode.bind(this)} />
+            )}
+          />
           <Route path='/guide' component={Guide} />
         </Switch>
       </div>
     )
   }
 }
-const container = document.getElementById('container');
-const root = createRoot(container);
+const container = document.getElementById('container')
+const root = createRoot(container)
 root.render(
   <Router>
     <App />

packages/taro-ui-docs/assets/style/docs.scss

@@ -56,6 +56,9 @@ $drop-shadow: 0 4px 30px 0 rgba(223, 225, 230, 0.5);
 
 .darkbox {
   background-color: #23272f;
+  &.at-container {
+    box-shadow: none;
+  }
 }
 
 /**

packages/taro-ui-docs/package.json

@@ -28,12 +28,13 @@
     "copy-to-clipboard": "^3.3.1",
     "highlight.js": "^10.7.2",
     "qrcode.react": "^1.0.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.3.4",
     "regenerator-runtime": "^0.13.5",
     "taro-ui-demo": "workspace:^"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",
+    "@types/react-router-dom": "5.1.5",
     "@types/webpack-env": "^1.15.1",
     "babel-loader": "^8.1.0",
     "chalk": "^4.0.0",