From 60433a910e215b230bd2aa5eb4dba2cec1fb594c Mon Sep 17 00:00:00 2001 From: Jerome Lin Date: Fri, 4 Dec 2020 17:12:39 +0800 Subject: [PATCH] feat: support dark mode --- components/drag/demo.md | 2 +- site/demo/components/App/style.scss | 5 ++ site/demo/components/Container/dark.ts | 68 ++++++++++++++++++++++ site/demo/components/Container/index.jsx | 64 ++++++++++++++------- site/demo/components/Container/style.scss | 35 +++++++++--- site/demo/styles/BadgePage.scss | 2 - site/demo/styles/ButtonPage.scss | 1 - site/demo/styles/FilePickerPage.scss | 7 +-- site/demo/styles/PopperPage.scss | 1 + site/demo/styles/PopupPage.scss | 70 +++++++++++++++-------- site/styles/mixins/index.scss | 2 +- 11 files changed, 194 insertions(+), 63 deletions(-) create mode 100644 site/demo/components/Container/dark.ts diff --git a/components/drag/demo.md b/components/drag/demo.md index 83a6679ef..4543d0c32 100644 --- 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 index 4674f1c4c..eb1b0cbf1 100644 --- 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 new file mode 100644 index 000000000..ca7cedd06 --- /dev/null +++ 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 index 50f60acd8..41c6acce6 100644 --- a/site/demo/components/Container/index.jsx +++ b/site/demo/components/Container/index.jsx @@ -4,6 +4,7 @@ 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'); @@ -11,8 +12,9 @@ const Icons = Icon.createFromIconfont('//at.alicdn.com/t/font_1340918_lpsswvb7yv 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)); @@ -20,14 +22,15 @@ const Container = (props) => { 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) => { - { - ['#00bc70', '#1890ff', '#f5222d', '#fa541b', '#13c2c2', '#2f54ec', '#712fd1'].map((color, index) => { - return ( -
  • { - setPrimary(color); - setCssVar(color); - window.sessionStorage.primary = color; - }} - /> - ); - }) - } - - )} +
    +
      + { + ['#00bc70', '#1890ff', '#f5222d', '#fa541b', '#13c2c2', '#2f54ec', '#712fd1'].map((color, index) => { + return ( +
    • { + setPrimary(color); + setPrimaryColor(color); + window.sessionStorage.primary = color; + }} + /> + ); + }) + } +
    +
    + { + setTheme(value); + setDarkTheme(value); + window.sessionStorage.theme = value; + }} + > + 默认主题 + 暗黑主题 + +
    +
    + )} > - + { window.frames.length === window.parent.frames.length && ( diff --git a/site/demo/components/Container/style.scss b/site/demo/components/Container/style.scss index 85fbf19bb..1be0892eb 100644 --- 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 index 2d846b559..ffb8e03b9 100644 --- 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 index 9664d6cda..3e489bcce 100644 --- 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 index 211d98b51..d22b50fe9 100644 --- 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 index 0685ae145..0082694a7 100644 --- 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 index 334b01a71..c0620497d 100644 --- 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 index 6c9233a27..ff5109e1a 100644 --- 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;