Add the color parameter

razonyang · Apr 23, 2021 · 8fa7987 · 8fa7987
1 parent a3b6b2e
commit 8fa7987
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -119,6 +119,7 @@ As the example site shown, the configuration are separated into multiple files,
 | `brand` | String | - | Brand text.
 | `menusPosition` | String | `right` | Menus position: `right`, `left`, `center`.
 | `description` | String | - | Site description.
+| `color` | String | - | Color mode, `light`, `dark` or dynamic. Default to dynamic.
 | `palette` | String | - | Default palette. This will take effect after clearing the Cookie.
 | `palettes` | Array | **ALL** | Available palettes. You can disable it by setting it to empty `[]`.
 | `featuredPostCount` | Integer | `5` | The number of featured posts shown in sidebar.

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -119,6 +119,7 @@ $ hugo server
 | `brand` | String | - | Brand
 | `menusPosition` | String | `right` | 菜单位置：`right`, `left`, `center`.
 | `description` | String | - | 站点描述
+| `color` | String | - | 颜色风格， `light`，`dark` 或者 dynamic（默认）。 
 | `palette` | String | - | 默认配色，清理 Cookie 后生效。
 | `palettes` | Array | **ALL** | 可选配色，如需禁用此选项，可将其设为空值 `[]`。
 | `featuredPostCount` | Integer | `5` | 精选文章数

diff --git a/README.zh-TW.md b/README.zh-TW.md
@@ -119,6 +119,7 @@ $ hugo server
 | `brand` | String | - | Brand
 | `menusPosition` | String | `right` | 選單位置：`right`, `left`, `center`.
 | `description` | String | - | 站點描述
+| `color` | String | - | 顏色風格， `light`，`dark` 或者 dynamic（默認）。
 | `palette` | String | - | 預設配色，清理 Cookie 後生效。
 | `palettes` | Array | **ALL** | 可選配色，如需禁用此選項，可將其設為空值 `[]`。
 | `featuredPostCount` | Integer | `5` | 精選文章數

diff --git a/assets/js/main.js b/assets/js/main.js
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
@@ -13,6 +13,8 @@ palette = "blue" # Default palette. Optional.
 # palettes = ["blue", "blue gray", "brown"] # Available palettes. Default to ALL.
 # palettes = [] # Disable palette switcher.
 
+# color = "dark" # light, dark or dynamic. Default to dynamic.
+
 # fullWidth = true # Full width.
 
 # dateFormat = "Jan 2, 2006"

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -8,7 +8,8 @@
     {{- block "head-end" . -}}{{- end -}}
     {{- partial "hooks/head-end" . -}}
   </head>
-  <body>
+  {{- $color := $.Site.Params.color -}}
+  <body{{ if in (slice "light" "dark") $color }}{{ printf " class=\"mode-%s\"" $color | safeHTMLAttr }}{{ end }}>
     {{- partial "header.html" . -}}
     {{- partial "hooks/main-begin" . -}}
     <main role="main" class="container{{ if default false .Site.Params.fullWidth }}-fluid{{ end }}">

diff --git a/layouts/partials/header/mode-switcher.html b/layouts/partials/header/mode-switcher.html
@@ -1,5 +1,7 @@
+{{- if not (in (slice "light" "dark") $.Site.Params.color) -}}
 <form class="mode-switcher-form d-flex align-items-center">
   <div class="form-check form-switch">
     <input class="form-check-input" type="checkbox" id="modeSwitcher">
   </div>
 </form>
+{{- end -}}
diff --git a/src/js/index.ts b/src/js/index.ts
@@ -7,8 +7,10 @@ import ModeSwitcher from './mode';
 import FontSizeSwitcher from './font-size';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const modeSwitcher = new ModeSwitcher(document.querySelector('#modeSwitcher'));
-  modeSwitcher.init();
+  const modeSwitcherEle: HTMLInputElement = document.querySelector('#modeSwitcher');
+  if (modeSwitcherEle) {
+    (new ModeSwitcher(modeSwitcherEle)).init();
+  }
 
   const paletteSwitcher = new PaletteSwitcher(document.querySelector('#paletteSwitcher'));
   paletteSwitcher.init();