feat: support dark mode

ZhongAnTech · Dec 4, 2020 · 60433a9 · 60433a9
1 parent c382864
commit 60433a9
Show file tree

Hide file tree

Showing 11 changed files with 194 additions and 63 deletions.
diff --git a/components/drag/demo.md b/components/drag/demo.md
@@ -74,7 +74,7 @@ const Demo = () => {
       ref={containerRef}
       style={{
         height: 300,
-        backgroundColor: '#ddd',
+        backgroundColor: '#5b5c60',
         position: 'relative'
       }}
     >

diff --git a/site/demo/components/App/style.scss b/site/demo/components/App/style.scss
@@ -13,6 +13,11 @@ body {
   color: #343434;
   -webkit-font-smoothing: subpixel-antialiased;
   font-feature-settings: 'tnum';
+
+  &[data-theme='dark'] {
+    background-color: #000;
+    color: rgba(255, 255, 255, 0.85);
+  }
 }
 
 a {

diff --git a/site/demo/components/Container/dark.ts b/site/demo/components/Container/dark.ts
@@ -0,0 +1,68 @@
+const themes = {
+  '--theme-primary-lighter': '#303030',
+  '--color-text': 'rgba(255, 255, 255, 0.85)',
+  '--color-text-inverse': 'rgba(255, 255, 255, 0.8)',
+  '--color-text-placeholder': 'rgba(255, 255, 255, 0.3)',
+  '--border-color': '#3a3b3d',
+  '--opacity-mask': '0.7',
+  '--activity-indicator-path-color': 'var(--border-color)',
+  '--action-sheet-background': '#1b1c1e',
+  '--action-sheet-active-background': '#363738',
+  '--alert-button-background': '#2b2c2d',
+  '--alert-button-active-background': '#363738',
+  '--button-default-background': 'rgba(255, 255, 255, 0.1)',
+  '--button-default-border': 'transparent',
+  '--button-default-color': 'rgba(255, 255, 255, 0.85)',
+  '--button-default-active-background': 'rgba(255, 255, 255, 0.2)',
+  '--button-default-active-border': 'transparent',
+  '--button-default-active-color': '#fff',
+  '--calendar-background': 'transparent',
+  '--calendar-week-bar-background': '#303030',
+  '--cell-background': '#1b1c1e',
+  '--cell-background-active': '#363738',
+  '--checkbox-background-color': 'transparent',
+  '--checkbox-border-color': '#5b5c60',
+  '--checkbox-background-color-disabled': '#555',
+  '--checkbox-disabled-color': 'rgba(255, 255, 255, 0.3)',
+  '--confirm-button-background': '#2b2c2d',
+  '--confirm-button-active-background': '#363738',
+  '--keyboard-background': '#000',
+  '--loading-background': '#2b2c2d',
+  '--modal-background': '#2b2c2d',
+  '--modal-title-color': 'var(--color-text)',
+  '--modal-close-color': 'rgba(255, 255, 255, 0.3)',
+  '--modal-close-active-color': 'rgba(255, 255, 255, 0.65)',
+  '--nav-bar-color': '#1b1c1e',
+  '--panel-body-background': '#1b1c1e',
+  '--picker-background': '#000',
+  '--picker-header-background': '#1b1c1e',
+  '--picker-mask-background-start': 'rgba(0, 0, 0, 0.4)',
+  '--picker-mask-background-end': 'rgba(0, 0, 0, 0.8)',
+  '--picker-line': '#303030',
+  '--progress-background': 'var(--border-color)',
+  '--radio-background-color': 'transparent',
+  '--radio-border-color': '#5b5c60',
+  '--radio-background-color-disabled': '#555',
+  '--radio-disabled-color': 'rgba(255, 255, 255, 0.3)',
+  '--search-bar-background': '#1b1c1e',
+  '--search-bar-inner-background': '#000',
+  '--slider-line-dot-color': 'var(--border-color)',
+  '--switch-background': '#38393d',
+  '--stack-picker-background': '#000',
+  '--stack-picker-shadow': 'none',
+  '--stepper-input-background': '#000',
+  '--tabbar-background': '#1b1c1e',
+  '--toast-background': '#2b2c2d',
+  '--tooltip-background': '#5b5c60',
+};
+
+const setDarkTheme = (value) => {
+  document.body.setAttribute('data-theme', value);
+  Object.keys(themes).forEach((key) => {
+    value === 'dark'
+      ? document.documentElement.style.setProperty(key, themes[key])
+      : document.documentElement.style.removeProperty(key);
+  });
+};
+
+export default setDarkTheme;
diff --git a/site/demo/components/Container/index.jsx b/site/demo/components/Container/index.jsx
@@ -4,30 +4,33 @@ import { Icon, Radio, Popper } from 'zarm';
 import Color from 'color';
 import Context from '@site/utils/context';
 import Events from '@site/utils/events';
+import setDarkTheme from './dark';
 import './style.scss';
 
 const Icons = Icon.createFromIconfont('//at.alicdn.com/t/font_1340918_lpsswvb7yv.js');
 
 const Container = (props) => {
   const [lang, setLang] = useState(window.sessionStorage.language || 'zhCN');
   const [primary, setPrimary] = useState(window.sessionStorage.primary || '#00bc70');
+  const [theme, setTheme] = useState(window.sessionStorage.theme || 'light');
 
-  const setCssVar = (color) => {
+  const setPrimaryColor = (color) => {
     document.documentElement.style.setProperty('--theme-primary', color);
     document.documentElement.style.setProperty('--theme-primary-dark', Color(color).darken(0.05));
     document.documentElement.style.setProperty('--button-primary-shadow-color', Color(color).alpha(0.5).lighten(0.0));
   };
 
   useEffect(() => {
     window.scrollTo(0, 0);
-    setCssVar(primary);
+    setPrimaryColor(primary);
+    setDarkTheme(theme);
 
     Events.on(window, 'message', ({ data }) => {
       if (data.lang) {
         setLang(data.lang);
       }
     });
-  }, [primary]);
+  }, [primary, theme]);
 
   const { className, children } = props;
   const cls = classnames('app-container', className);
@@ -38,26 +41,43 @@ const Container = (props) => {
         <Popper
           trigger="click"
           content={(
-            <ul className="color-pick-list">
-              {
-                ['#00bc70', '#1890ff', '#f5222d', '#fa541b', '#13c2c2', '#2f54ec', '#712fd1'].map((color, index) => {
-                  return (
-                    <li
-                      key={+index}
-                      style={{ backgroundColor: color }}
-                      onClick={() => {
-                        setPrimary(color);
-                        setCssVar(color);
-                        window.sessionStorage.primary = color;
-                      }}
-                    />
-                  );
-                })
-              }
-            </ul>
-        )}
+            <div className="setting-container">
+              <ul className="colors">
+                {
+                  ['#00bc70', '#1890ff', '#f5222d', '#fa541b', '#13c2c2', '#2f54ec', '#712fd1'].map((color, index) => {
+                    return (
+                      <li
+                        key={+index}
+                        style={{ backgroundColor: color }}
+                        onClick={() => {
+                          setPrimary(color);
+                          setPrimaryColor(color);
+                          window.sessionStorage.primary = color;
+                        }}
+                      />
+                    );
+                  })
+                }
+              </ul>
+              <div className="themes">
+                <Radio.Group
+                  compact
+                  type="button"
+                  value={theme}
+                  onChange={(value) => {
+                    setTheme(value);
+                    setDarkTheme(value);
+                    window.sessionStorage.theme = value;
+                  }}
+                >
+                  <Radio value="light">默认主题</Radio>
+                  <Radio value="dark">暗黑主题</Radio>
+                </Radio.Group>
+              </div>
+            </div>
+          )}
         >
-          <span className="color-pick" style={{ backgroundColor: primary }} />
+          <span className="setting" style={{ backgroundColor: primary }} />
         </Popper>
         {
           window.frames.length === window.parent.frames.length && (

diff --git a/site/demo/components/Container/style.scss b/site/demo/components/Container/style.scss
@@ -16,7 +16,7 @@
       margin-left: r(10);
     }
 
-    .color-pick {
+    .setting {
       width: r(20);
       height: r(20);
       border: 4px solid #fff;
@@ -33,19 +33,28 @@
   }
 }
 
-.color-pick-list {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  list-style: none;
-  margin: 0;
+.setting-container {
   margin-top: r(8);
   padding: r(8);
   background: #fff;
   border-radius: r(4);
   box-shadow: 0 r(2) r(8) 0 rgba(0, 0, 0, 0.1);
+}
+
+.themes {
+  display: block;
+}
+
+.colors {
+  display: block;
+  justify-content: center;
+  align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 
   li {
+    display: inline-block;
     width: r(25);
     height: r(25);
     border-radius: r(2);
@@ -60,3 +69,15 @@
 .za-popper {
   z-index: 1500;
 }
+
+@at-root {
+  body[data-theme='dark'] {
+    .setting {
+      border-color: #2b2c2d;
+    }
+
+    .setting-container {
+      background: #2b2c2d;
+    }
+  }
+}
diff --git a/site/demo/styles/BadgePage.scss b/site/demo/styles/BadgePage.scss
@@ -5,7 +5,6 @@
     display: flex;
     justify-content: flex-start;
     padding: r(25) 0 0 0;
-    background: #fff;
     width: 100%;
     flex-flow: wrap;
 
@@ -17,7 +16,6 @@
       &-item {
         width: r(24);
         height: r(24);
-        background: #ddd;
       }
     }
   }

diff --git a/site/demo/styles/ButtonPage.scss b/site/demo/styles/ButtonPage.scss
@@ -4,7 +4,6 @@
   .za-panel__body {
     overflow: hidden;
     padding: r(15) r(15) 0 r(15);
-    background: #fff;
   }
 
   main > div:last-child {

diff --git a/site/demo/styles/FilePickerPage.scss b/site/demo/styles/FilePickerPage.scss
@@ -37,7 +37,6 @@
       align-items: center;
       justify-content: center;
       border: r(2) dashed #ddd;
-      color: #ddd;
 
       .za-icon {
         color: #ddd;
@@ -48,12 +47,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
-      height: 16px;
+      width: r(16);
+      height: r(16);
       cursor: pointer;
 
       .za-icon {
-        font-size: 10px;
+        font-size: r(10);
       }
     }
   }

diff --git a/site/demo/styles/PopperPage.scss b/site/demo/styles/PopperPage.scss
@@ -16,6 +16,7 @@
       font-size: r(12);
       width: r(100);
       height: r(50);
+      color: #333;
     }
 
     // 自定义箭头

diff --git a/site/demo/styles/PopupPage.scss b/site/demo/styles/PopupPage.scss
@@ -1,33 +1,53 @@
 @import "@site/styles/index";
 
 .popup-page {
-  @at-root .popup-box {
-    width: 100%;
-    height: 100%;
-    padding: r(20) r(20) r(300);
-    background: #fff;
-    -webkit-overflow-scrolling: touch;
-  }
+  @at-root {
+    .popup-box,
+    .popup-box-right,
+    .popup-box-left,
+    .popup-box-bottom {
+      background: #fff;
+    }
 
-  @at-root .popup-box-left {
-    width: r(280);
-    height: 100%;
-    padding: r(20) r(20) r(100);
-    background: #fff;
-  }
+    .popup-box,
+    .popup-box-right {
+      width: 100%;
+      height: 100%;
+      padding: r(20) r(20) r(300);
+      -webkit-overflow-scrolling: touch;
+    }
 
-  @at-root .popup-box-top {
-    width: 100%;
-    padding: r(10);
-    background: rgba(0, 0, 0, .7);
-    color: #fff;
-    font-size: r(14);
-    text-align: center;
-  }
+    .popup-box-left {
+      width: r(280);
+      height: 100%;
+      padding: r(20) r(20) r(100);
+    }
+
+    .popup-box-top {
+      width: 100%;
+      padding: r(10);
+      color: rgba(255, 255, 255, 0.85);
+      background: rgba(0, 0, 0, 0.7);
+      font-size: r(14);
+      text-align: center;
+    }
+
+    .popup-box-bottom {
+      height: r(450);
+      padding: r(20) r(20) r(100);
+    }
+
+    body[data-theme='dark'] {
+      .popup-box,
+      .popup-box-right,
+      .popup-box-left,
+      .popup-box-bottom {
+        background: #2b2c2d;
+      }
 
-  @at-root .popup-box-bottom {
-    height: r(450);
-    padding: r(20) r(20) r(100);
-    background: #fff;
+      .popup-box-top {
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
   }
 }
diff --git a/site/styles/mixins/index.scss b/site/styles/mixins/index.scss
@@ -1,4 +1,4 @@
-@mixin onepx($positions: top right bottom left, $border-color: #e6e6e6, $border-radius: 0) {
+@mixin onepx($positions: top right bottom left, $border-color: var(--border-color), $border-radius: 0) {
   &:after {
     content: '';
     pointer-events: none;