website: add dark theme.

uiwjs · Mar 18, 2022 · 53fb7ca · 53fb7ca
1 parent f58bc5c
commit 53fb7ca
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/example/app/App.module.less b/example/app/App.module.less
@@ -38,10 +38,9 @@ body {
 }
 
 .AppHeader {
-  background-color: #fff;
+  background-color: var(--color-thme-bg);
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1), 0 1px rgba(0, 0, 0, 0.1);
   padding: 120px 20px 40px 20px;
-  color: #333;
   position: relative;
   z-index: 9;
   text-align: center;
@@ -65,14 +64,15 @@ body {
       user-select: none;
       border-radius: 3px;
       cursor: pointer;
-      background: #f1f1f1;
+      color: var(--color-thme-text);
+      background-color: var(--color-neutral-muted);
       line-height: 30px;
       text-transform: uppercase;
       text-decoration: none;
+      transition: background-color .25s linear,color .05s linear,opacity .25s linear,filter .25s linear,visibility .25s linear,transform .25s linear;
       &:hover {
-        background-color: #929292;
-        color: #fff;
-        transition: background-color .25s linear,color .05s linear,opacity .25s linear,filter .25s linear,visibility .25s linear,transform .25s linear;
+        background-color: var(--color-fg-default);
+        color: var(--color-canvas-default);
       }
     }
   }
@@ -81,8 +81,7 @@ body {
 .AppTitle {
   font-size: 30px;
   sup {
-    background-color: #e6e6e6;
-    color: #555;
+    background-color: var(--color-neutral-muted);
     padding: 1px 5px;
     font-size: 12px;
     border-radius: 3px;

diff --git a/example/app/App.tsx b/example/app/App.tsx
@@ -2,8 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { editor } from 'monaco-editor';
 import Markdown from '@uiw/react-markdown-preview';
 import GitHubCorners from '@uiw/react-github-corners';
-// @ts-ignore
-// eslint-disable-next-line import/no-unresolved, import/extensions
+import '@wcj/dark-mode';
 import MonacoEditor, { RefEditorInstance } from '../../';
 import Select from './Select';
 import logo from './logo.svg';
@@ -86,8 +85,11 @@ export default function Example() {
       setCode(code.default || '');
     });
   }
+  const themeRef = useRef<string>()
   function onSelectThemeChange(e: React.ChangeEvent<HTMLSelectElement>) {
     e.persist();
+    document.documentElement.setAttribute('data-color-mode', /^vs$/.test(e.target.value) ? 'light' : 'dark');
+    themeRef.current = e.target.value;
     setTheme(e.target.value);
   }
   function dynamicLoadable(lang: string) {
@@ -100,10 +102,14 @@ export default function Example() {
       // setMode(mode);
       // this.setState({ mode: this.state.mode, code: code.default || '' });
     });
+    document.addEventListener('colorschemechange', (e) => {
+      setTheme(e.detail.colorScheme === 'dark' ? (['vs-dark', 'hc-black'].includes(themeRef.current!) ? themeRef.current! : 'vs-dark') : 'vs');
+    });
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (
-    <div className={styles.App}>
+    <div className={`${styles.App} wmde-markdown-var`}>
+      <dark-mode permanent dark="Dark" light="Light" style={{ position: 'fixed', top: 8, left: 10, zIndex: 999 }}></dark-mode>
       <GitHubCorners
         fixed
         size={52}

diff --git a/example/app/Select/index.module.less b/example/app/Select/index.module.less
@@ -3,11 +3,8 @@
   margin-left: 10px;
 }
 .select{
-  border: none;
   outline: none;
   height: 26px;
   line-height: 26px;
   padding-left: 15px;
-  border: 1px solid #c7c7c7;
-  background: #f1f1f1;
 }