✨ a toogle for when dark-mode enabled

moegi-design · Jul 11, 2020 · 9365dd3 · 9365dd3
1 parent 56b49eb
commit 9365dd3
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 ![Moegi Theme](screenshot.png)
 
-[中文🇨🇳](README_zh.md)
+[中文文档](README_zh.md)
 
 ## Download
 
@@ -46,7 +46,8 @@ const config = {
     contentKey: 'Your Content API Key',
   },
   primaryColor: '#86B81B',
-  feed: 'Pure'
+  feed: 'Pure',
+  darkMode: 'auto',
 }
 </script>
 ```
@@ -56,3 +57,4 @@ const config = {
 | `api` | required |
 | `primaryColor` | Optional. Custom theme color, default is '#86B81B' (* Only HEX format supported) |
 | `feed` | Optional. Customize the style of the home page article list with optional values of 'Pure', 'Note'. default is 'Pure' |
+| `darkMode` | Optional. Customize whether the dark mode follows the system or not, effective for all viewers. Optional values are 'light', 'dark', default value is 'auto' |
diff --git a/README_zh.md b/README_zh.md
@@ -44,7 +44,8 @@ const config = {
     contentKey: 'Your Content API Key',
   },
   primaryColor: '#86B81B',
-  feed: 'Pure'
+  feed: 'Pure',
+  darkMode: 'auto',
 }
 </script>
 ```
@@ -54,3 +55,4 @@ const config = {
 | `api` | 必填 |
 | `primaryColor` | 可选。自定义主题颜色，默认为 '#86B81B'（* 仅支持HEX格式） |
 | `feed` | 可选。自定义首页文章列表的样式，可选值为 'Pure', 'Note'，默认值为 'Pure' |
+| `darkMode` | 可选。自定义暗色模式是否跟随系统，对所有浏览者生效。可选值为 'light', 'dark'，默认值为 'auto' |
diff --git a/src/App.svelte b/src/App.svelte
@@ -23,15 +23,19 @@
   });
 
   function loadCustomConfig () {
+    const rootElement = document.documentElement;
+    if (siteConfig.darkMode) {
+      rootElement.setAttribute('class', `mode-${siteConfig.darkMode}`);
+    }
     if (siteConfig.primaryColor) {
       const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(siteConfig.primaryColor);
       const rgbColor = result ? {
         r: parseInt(result[1], 16),
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
       } : {};
-      document.documentElement.style.setProperty('--color-primary', siteConfig.primaryColor);
-      document.documentElement.style.setProperty('--color-primary-rgb', `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`);
+      rootElement.style.setProperty('--color-primary', siteConfig.primaryColor);
+      rootElement.style.setProperty('--color-primary-rgb', `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`);
     }
   }
   

diff --git a/src/api.js b/src/api.js
@@ -9,7 +9,8 @@ export const siteConfig = {
     contentKey: key,
   },
   primaryColor: config.primaryColor || '#86B81B',
-  feed: config.feed || 'Pure'
+  feed: config.feed || 'Pure',
+  darkMode: config.darkMode || 'auto',
 }
 
 export default new GhostContentAPI({

diff --git a/src/css/variables.scss b/src/css/variables.scss
@@ -2,7 +2,7 @@
   @return red($hex), green($hex), blue($hex);
 }
 
-:root {
+:root, :root.mode-light {
   --color-primary: #86B81B;
   --color-primary-rgb: #{hexToRGB(#86B81B)};
   --color-text: #444444;
@@ -13,6 +13,25 @@
   --color-background-inner: rgba(255, 255, 255, 0.8);
   --color-decoration: rgba(0, 0, 0, 0.04);
   --color-decoration-darker: rgba(0, 0, 0, 0.08);
+  img {
+    opacity: 1;
+  }
+}
+
+:root.mode-dark {
+  --color-primary: #86B81B;
+  --color-primary-rgb: #{hexToRGB(#86B81B)};
+  --color-text: #BBBBBB;
+  --color-text-emphasize: #EEEEEE;
+  --color-text-lighter: rgba(255, 255, 255, 0.4);
+  --color-text-solight: rgba(255, 255, 255, 0.16);
+  --color-background: #222222;
+  --color-background-inner: rgba(#{hexToRGB(#222222)}, 0.8);
+  --color-decoration: rgba(255, 255, 255, 0.04);
+  --color-decoration-darker: rgba(255, 255, 255, 0.08);
+  img {
+    opacity: 0.7;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -27,8 +46,8 @@
     --color-background-inner: rgba(#{hexToRGB(#222222)}, 0.8);
     --color-decoration: rgba(255, 255, 255, 0.04);
     --color-decoration-darker: rgba(255, 255, 255, 0.08);
-  }
-  img {
-    opacity: 0.7;
+    img {
+      opacity: 0.7;
+    }
   }
 }