feat: support dark mode

foray1010 · Dec 2, 2019 · 9100419 · 9100419
1 parent c7b4dad
commit 9100419
Show file tree

Hide file tree

Showing 19 changed files with 38 additions and 27 deletions.
diff --git a/.postcssrc.yml b/.postcssrc.yml
@@ -4,8 +4,6 @@ plugins:
   postcss-normalize:
     forceImport: true
   postcss-apply: {}
-  postcss-custom-properties:
-    preserve: false
   postcss-preset-env:
     stage: 0
   cssnano:

diff --git a/src/core/styles/composes.css b/src/core/styles/composes.css
@@ -4,6 +4,7 @@
   padding: var(--golden-gap-2x) var(--golden-gap-4x);
   border: 0;
   background-color: var(--highlight-level1);
+  color: var(--main-font-color);
 
   &:hover {
     color: var(--main-color1);
@@ -23,6 +24,7 @@
   border-width: 1px;
   border-style: solid;
   background-color: transparent;
+  color: var(--main-font-color);
 }
 
 .list-item {

diff --git a/src/core/styles/globals.css b/src/core/styles/globals.css
@@ -8,7 +8,7 @@
 
 :global(body) {
   margin: 0;
-  background-color: var(--oc-white);
+  background-color: var(--main-background-color);
   color: var(--main-font-color);
 }
 

diff --git a/src/core/styles/variables.css b/src/core/styles/variables.css
@@ -10,10 +10,23 @@
   --highlight-level4: var(--oc-gray-5);
   --highlight-level5: var(--oc-gray-6);
   --input-height: 22px;
+  --main-background-color: var(--oc-white);
   --main-color1: var(--oc-blue-5);
   --main-color2: var(--oc-orange-5);
   --main-color3: var(--oc-teal-5);
   --main-color4: var(--oc-red-7);
   --main-color5: #8d6e63; /* same as material color palette brown 400 */
   --main-font-color: var(--oc-gray-9);
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --main-background-color: var(--oc-gray-9);
+    --highlight-level1: var(--oc-gray-8);
+    --highlight-level2: var(--oc-gray-7);
+    --highlight-level3: var(--oc-gray-6);
+    --highlight-level4: var(--oc-gray-5);
+    --highlight-level5: var(--oc-gray-4);
+    --main-font-color: var(--oc-white);
+  }
+}
diff --git a/src/options/components/NavBar/nav-bar-item.css b/src/options/components/NavBar/nav-bar-item.css
@@ -27,7 +27,7 @@
   border: 0;
   border-bottom: var(--golden-gap-2x) solid transparent;
   background-color: transparent;
-  color: var(--oc-white);
+  color: var(--main-background-color);
   cursor: default;
   font: 16px 'Archivo Narrow', sans-serif;
   text-align: center;

diff --git a/src/options/components/donate.css b/src/options/components/donate.css
@@ -27,5 +27,5 @@
   align-items: center;
   padding: var(--golden-gap-4x);
   margin: var(--golden-gap-4x) auto;
-  background-color: var(--oc-gray-0);
+  background-color: var(--highlight-level1);
 }
diff --git a/src/options/components/input_items/SelectButton/select-button-option.css b/src/options/components/input_items/SelectButton/select-button-option.css
@@ -16,7 +16,7 @@
 }
 
 .item-active {
-  color: var(--oc-white);
+  color: var(--main-background-color);
   cursor: default;
 }
 

diff --git a/src/options/components/input_items/SelectButton/select-button.css b/src/options/components/input_items/SelectButton/select-button.css
@@ -17,7 +17,7 @@
   box-sizing: border-box;
   align-items: center;
   border: 1px solid currentcolor;
-  background-color: var(--oc-white);
+  background-color: var(--main-background-color);
   color: var(--main-color1);
   text-align: center;
   transition-duration: 0.4s;

diff --git a/src/options/components/input_items/input-select.css b/src/options/components/input_items/input-select.css
@@ -21,10 +21,12 @@
   left: 0;
   width: calc(100% - var(--input-height));
   box-sizing: border-box;
+  background-color: var(--main-background-color);
+  color: var(--main-font-color);
   text-align: left;
 }
 
 .select {
-  background: transparent;
+  background-color: transparent;
   outline: 0;
 }
diff --git a/src/popup/components/App/globals.css b/src/popup/components/App/globals.css
@@ -11,7 +11,7 @@
 }
 
 :global(::-webkit-scrollbar-thumb) {
-  border-left: var(--golden-gap) solid var(--oc-white);
+  border-left: var(--golden-gap) solid var(--main-background-color);
   background-color: var(--highlight-level3);
 
   &:hover {

diff --git a/src/popup/components/BookmarkTree/bookmark-tree.css b/src/popup/components/BookmarkTree/bookmark-tree.css
@@ -12,5 +12,5 @@
 .main {
   position: absolute;
   width: 100%;
-  background-color: var(--oc-white);
+  background-color: var(--main-background-color);
 }
diff --git a/src/popup/components/BookmarkTree/index.tsx b/src/popup/components/BookmarkTree/index.tsx
@@ -153,9 +153,7 @@ const BookmarkTreeContainer = ({ treeId }: Props) => {
         treeInfo={treeInfo}
       />
 
-      {props.isShowCover && (
-        <Mask backgroundColor='#000' opacity={0.16} onClick={closeNextTrees} />
-      )}
+      {props.isShowCover && <Mask opacity={0.7} onClick={closeNextTrees} />}
     </section>
   )
 }

diff --git a/src/popup/components/BookmarkTree/tree-header.css b/src/popup/components/BookmarkTree/tree-header.css
@@ -19,7 +19,7 @@
   &::before,
   &::after {
     position: absolute;
-    background-color: var(--oc-white);
+    background-color: var(--main-background-color);
     content: '';
     transform: rotate(45deg);
   }
@@ -51,7 +51,7 @@
   padding: 0 var(--golden-gap-2x);
   margin: 0;
   margin-right: auto;
-  color: var(--oc-white);
+  color: var(--main-background-color);
   cursor: default;
   font: 22px 'Archivo Narrow', simhei, sans-serif;
   line-height: calc(var(--tree-header-height) + 1px);

diff --git a/src/popup/components/Editor/editor.css b/src/popup/components/Editor/editor.css
@@ -8,7 +8,7 @@
 .header {
   padding: var(--golden-gap) var(--golden-gap-4x);
   background-color: var(--main-color2);
-  color: var(--oc-white);
+  color: var(--main-background-color);
   cursor: default;
   float: left;
 }
@@ -19,16 +19,16 @@
   width: 100%;
   box-sizing: border-box;
   padding: var(--golden-gap-2x);
-  border-color: var(--highlight-level3);
+  border-color: var(--highlight-level2);
 }
 
 .main {
   width: var(--width);
   box-sizing: border-box;
   padding: var(--golden-gap-2x) var(--golden-gap);
-  border: solid var(--highlight-level4);
+  border: solid var(--highlight-level3);
   border-width: 1px 0;
-  background-color: var(--oc-white);
+  background-color: var(--main-background-color);
   text-align: right;
 
   & > *:not(:first-child) {

diff --git a/src/popup/components/Editor/index.tsx b/src/popup/components/Editor/index.tsx
@@ -49,7 +49,7 @@ const EditorContainer = () => {
 
   return (
     <>
-      <Mask backgroundColor='#fff' opacity={0.3} onClick={closeEditor} />
+      <Mask opacity={0.3} onClick={closeEditor} />
       <AbsolutePosition positionLeft={positionLeft} positionTop={positionTop}>
         <KeyBindingsWindow windowId={EDITOR_WINDOW}>
           <Editor

diff --git a/src/popup/components/Mask.tsx b/src/popup/components/Mask.tsx
@@ -3,17 +3,15 @@ import * as React from 'react'
 import classes from './mask.css'
 
 interface Props {
-  backgroundColor: string
   onClick: React.MouseEventHandler
   opacity: number
 }
 const Mask = (props: Props) => {
   const styles = React.useMemo(
     (): object => ({
-      '--backgroundColor': props.backgroundColor,
       '--opacity': props.opacity,
     }),
-    [props.backgroundColor, props.opacity],
+    [props.opacity],
   )
 
   return <div className={classes.main} style={styles} onClick={props.onClick} />

diff --git a/src/popup/components/Menu/index.tsx b/src/popup/components/Menu/index.tsx
@@ -79,7 +79,7 @@ const MenuContainer = () => {
 
   return (
     <>
-      <Mask backgroundColor='#fff' opacity={0.3} onClick={closeMenu} />
+      <Mask opacity={0.3} onClick={closeMenu} />
       <AbsolutePosition positionLeft={positionLeft} positionTop={positionTop}>
         <KeyBindingsWindow windowId={MENU_WINDOW}>
           <Menu

diff --git a/src/popup/components/Menu/menu.css b/src/popup/components/Menu/menu.css
@@ -2,8 +2,8 @@
 
 .main {
   padding: var(--golden-gap-2x);
-  border: 1px solid var(--highlight-level4);
-  background-color: var(--oc-white);
+  border: 1px solid var(--highlight-level3);
+  background-color: var(--main-background-color);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
   /* separator between menu fields */

diff --git a/src/popup/components/mask.css b/src/popup/components/mask.css
@@ -3,6 +3,6 @@
   top: 0;
   bottom: 0;
   width: 100%;
-  background-color: var(--backgroundColor);
+  background-color: var(--main-background-color);
   opacity: var(--opacity);
 }