website: support dark theme.

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

.kktrc.js

@@ -19,24 +19,24 @@ export default (conf, env, options) => {
     })
   );
 
-  conf.optimization = {
-    ...conf.optimization,
-    splitChunks: {
-      cacheGroups: {
-        reactvendor: {
-          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
-          name: 'react-vendor',
-          chunks: 'all',
-        },
-        refractor: {
-          test: /[\\/]node_modules[\\/](refractor)[\\/]/,
-          name: 'refractor-vendor',
-          chunks: 'all',
+  if (env === 'production') {
+    conf.optimization = {
+      ...conf.optimization,
+      splitChunks: {
+        cacheGroups: {
+          reactvendor: {
+            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+            name: 'react-vendor',
+            chunks: 'all',
+          },
+          refractor: {
+            test: /[\\/]node_modules[\\/](refractor)[\\/]/,
+            name: 'refractor-vendor',
+            chunks: 'all',
+          },
         },
       },
-    },
-  };
-  if (env === 'production') {
+    };
     conf.output = { ...conf.output, publicPath: './' };
   }
   return conf;

package.json

@@ -6,7 +6,7 @@
   "types": "index.d.ts",
   "module": "dist/hotkeys.esm.js",
   "scripts": {
-    "prepare": "npm run build:lib",
+    "prepare": "npm run build:lib && husky install",
     "lint": "eslint --ext .js src website",
     "build:lib": "node scripts/build.js",
     "build": "npm run build:lib && npm run doc && npm run lint",
@@ -22,11 +22,6 @@
     "dist",
     "doc"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "keywords": [
     "hotkey",
     "hotkeys",
@@ -48,17 +43,22 @@
   "jest": {
     "testURL": "http://localhost/"
   },
-  "dependencies": {},
+  "dependencies": {
+    "typescript": "^4.6.3"
+  },
   "devDependencies": {
     "@babel/eslint-parser": "~7.17.0",
-    "@kkt/less-modules": "~7.1.1",
-    "@kkt/raw-modules": "~7.1.1",
-    "@kkt/scope-plugin-options": "~7.1.1",
+    "@kkt/less-modules": "~7.1.2",
+    "@kkt/raw-modules": "~7.1.2",
+    "@kkt/scope-plugin-options": "~7.1.2",
+    "@rollup/plugin-babel": "~5.3.1",
+    "@rollup/plugin-commonjs": "~21.0.3",
+    "@rollup/plugin-node-resolve": "~13.1.3",
     "@uiw/react-github-corners": "~1.5.14",
     "@uiw/react-mac-keyboard": "~1.1.4",
     "@uiw/react-markdown-preview": "~4.0.5",
     "@uiw/react-shields": "~1.1.2",
-    "@uiw/reset.css": "~1.0.6",
+    "@wcj/dark-mode": "~1.0.14",
     "bannerjs": "~2.1.0",
     "classnames": "~2.3.1",
     "colors-cli": "~1.0.28",
@@ -67,17 +67,15 @@
     "eslint-plugin-import": "~2.26.0",
     "eslint-plugin-jsx-a11y": "~6.5.1",
     "eslint-plugin-react": "~7.29.4",
-    "husky": "~4.2.3",
-    "kkt": "~7.1.5",
+    "husky": "^7.0.0",
     "jest": "~27.5.1",
+    "kkt": "~7.1.6",
+    "lint-staged": "^12.3.7",
     "puppeteer": "~13.5.2",
-    "react": "~17.0.2",
-    "react-dom": "~17.0.2",
+    "react": "~18.0.0",
+    "react-dom": "~18.0.0",
     "rimraf": "~3.0.2",
     "rollup": "~2.70.1",
-    "@rollup/plugin-babel": "~5.3.1",
-    "@rollup/plugin-commonjs": "~21.0.3",
-    "@rollup/plugin-node-resolve": "~13.1.3",
     "uglify-js": "~3.15.3",
     "zlib": "~1.0.5"
   },
@@ -92,5 +90,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "lint-staged": {
+    "*.js": "eslint --ext .js src website"
   }
 }

website/App.js

@@ -3,6 +3,7 @@ import GithubCorner from '@uiw/react-github-corners';
 import { Github } from '@uiw/react-shields';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import KeyBoard from '@uiw/react-mac-keyboard';
+import '@wcj/dark-mode';
 import Footer from './components/Footer';
 import styles from './styles/index.module.less';
 import DocumentStr from '../README.md';
@@ -89,15 +90,18 @@ export default class App extends Component {
     if (DocumentStrSource) DocumentStrSource = DocumentStr.replace(/([\s\S]*)<!--dividing-->/, '');
     return (
       <div>
-        <select className={styles.version} onChange={this.openVersionWebsite.bind(this)}>
-          <option value="https://jaywcjlove.github.io/hotkeys">
-            v
-            {pkg.version}
-          </option>
-          <option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
-          <option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option>
-          <option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option>
-        </select>
+        <div className={styles.tools}>
+          <select className={styles.version} onChange={this.openVersionWebsite.bind(this)}>
+            <option value="https://jaywcjlove.github.io/hotkeys">
+              v
+              {pkg.version}
+            </option>
+            <option value="https://unpkg.com/hotkeys-js@3.4.3/doc/index.html">v3.4.3</option>
+            <option value="https://unpkg.com/hotkeys-js@3.4.2/doc/index.html">v3.4.2</option>
+            <option value="https://unpkg.com/hotkeys-js@2.0.10/doc/index.html">v2.0.10</option>
+          </select>
+          <dark-mode permanent />
+        </div>
         {keyStr.length > -1 && (
           <div className={styles.keyCodeInfo}>
             {keyStr.map((item) => <span key={`${item}`}>{item}</span>)}

website/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-import '@uiw/reset.css';
 import './styles/reset.less';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

website/styles/index.module.less

@@ -1,10 +1,21 @@
-.version {
+[data-color-mode*='dark'], [data-color-mode*='dark'] body {
+  --color-header-bg: var(--color-theme-bg);
+}
+[data-color-mode*='light'], [data-color-mode*='light'] body {
+  
+  --color-header-bg: #333;
+}
+
+.tools {
   position: absolute;
   margin: 15px 0 0 15px;
+}
+
+.version {
   appearance: none;
   cursor: pointer;
-  color: #182026;
   padding: 3px 6px;
+  margin-right: 10px;
   vertical-align: middle;
   box-sizing: border-box;
   border: none;
@@ -31,7 +42,8 @@
 }
 
 .header {
-  background-color: #292929;
+  background-color: var(--color-header-bg);
+  transition: all  0.3s;
   padding: 74px 0 60px 0;
   .title {
     text-align: center;

website/styles/reset.less

@@ -3,15 +3,12 @@
 }
 
 body {
-  color:#535353;
   font-family: "PingHei","Lucida Grande", "Lucida Sans Unicode", "STHeitiSC-Light", "Helvetica","Arial","Verdana","sans-serif";
-  background: #f8f8f8 url(../assets/bg.jpg) repeat top left;
+  // color:#535353;
+  // background: #f8f8f8 url(../assets/bg.jpg) repeat top left;
+  transition: all  0.3s;
 }
 
 a {
   text-decoration: none;
 }
-
-.wmde-markdown pre {
-  background-color: #fff;
-}