[FEATURE] Add switch theme drop down menu

assets/css/_partial/_header.scss

@@ -66,6 +66,19 @@ header {
   }
 }
 
+.color-theme-select {
+  position: absolute;
+  opacity: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
 .search {
   position: relative;
 
@@ -162,6 +175,10 @@ header {
   @include transform(rotate(225deg));
 }
 
+.theme-select i {
+  @include transform(rotate(225deg));
+}
+
 #header-desktop {
   display: block;
   position: fixed;
@@ -205,6 +222,10 @@ header {
           margin-right: 0;
         }
 
+        &.theme-select {
+          margin-right: 0;
+        }
+
         &.search {
           margin: 0 -.5rem 0 0;
         }

exampleSite/config.toml

@@ -649,6 +649,9 @@ enableEmoji = true
     # mobile header mode ("fixed", "normal", "auto")
     # 移动端导航栏模式 ("fixed", "normal", "auto")
     mobileMode = "auto"
+    # theme change mode ("switch", "select")
+    # 主题切换模式 ("switch", "select")
+    themeChangeMode = "select"
     # Header title config
     # 页面头部导航栏标题配置
     [params.header.title]

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -255,6 +255,9 @@ Please open the code block below to view the complete sample configuration :(far
     desktopMode = "fixed"
     # mobile header mode ("fixed", "normal", "auto")
     mobileMode = "auto"
+    # {{< version 0.2.11 >}} Theme change mode
+    # theme change mode ("switch", "select")
+    themeChangeMode = "select"
     # {{< version 0.2.0 >}} Header title config
     [params.header.title]
       # URL of the LOGO

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -258,6 +258,9 @@ hugo
     desktopMode = "fixed"
     # 移动端导航栏模式 ("fixed", "normal", "auto")
     mobileMode = "auto"
+    # {{< version 0.2.11 >}} 主题切换模式
+    # 主题切换模式 ("switch", "select")
+    themeChangeMode = "select"
     # {{< version 0.2.0 >}} 页面头部导航栏标题配置
     [params.header.title]
       # LOGO 的 URL

i18n/en.toml

@@ -42,6 +42,18 @@ other = "Select Language"
 
 [switchTheme]
 other = "Switch Theme"
+
+[Light]
+other = "Light"
+
+[Dark]
+other = "Dark"
+
+[Black]
+other = "Black"
+
+[Auto]
+other = "Auto"
 # === partials/header.html ===
 
 # === partials/footer.html ===

i18n/zh-CN.toml

@@ -43,6 +43,18 @@ other = "选择语言"
 
 [switchTheme]
 other = "切换主题"
+
+[Light]
+other = "浅色"
+
+[Dark]
+other = "深色"
+
+[Black]
+other = "黑色"
+
+[Auto]
+other = "跟随系统"
 # === partials/header.html ===
 
 # === partials/footer.html ===

layouts/_default/baseof.html

@@ -19,31 +19,30 @@
         {{- /* Check theme isDark before body rendering */ -}}
         {{- $theme := .Site.Params.defaulttheme -}}
         <script type="text/javascript">
-            if (window.localStorage && localStorage.getItem('theme'))
-            {
-                let localStorageTheme = localStorage.getItem('theme');
-                if (localStorageTheme === 'light' || localStorageTheme === 'dark' || localStorageTheme === 'black')
-                    document.body.setAttribute('theme', localStorageTheme);
-                else if (localStorage.getItem('theme') === 'auto')
-                {
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+            if (window.localStorage && localStorage.getItem('theme')) {
+                let theme = localStorage.getItem('theme');
+                if (theme === 'light' || theme === 'dark' || theme === 'black') {
+                    document.body.setAttribute('theme', theme);
+                } else {
+                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                         document.body.setAttribute('theme', 'dark');
-                    else
+                    }
+                    else {
                         document.body.setAttribute('theme', 'white');
+                    }
                 }
-            }
-            else
-            {
-                if ('{{ $theme }}' === 'light' || '{{ $theme }}' === 'dark' || '{{ $theme }}' === 'black')
-                {
+            } else {
+                if ('{{ $theme }}' === 'light' || '{{ $theme }}' === 'dark' || '{{ $theme }}' === 'black') {
                     document.body.setAttribute('{{ $theme }}');
                     window.localStorage && localStorage.setItem('theme', '{{ $theme }}');
-                }
-                else
-                {
+                } else {
                     window.localStorage && localStorage.setItem('theme', 'auto');
-                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) document.body.setAttribute('theme', 'dark');
-                    else document.body.setAttribute('theme', 'white');
+                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                        document.body.setAttribute('theme', 'dark');
+                    }
+                    else {
+                        document.body.setAttribute('theme', 'white');
+                    }
                 }
             }
         </script>

layouts/partials/header.html

@@ -76,17 +76,21 @@
                         </span>
                     </span>
                 {{- end -}}
+                {{- if eq .Site.Params.header.themeChangeMode "select" -}}
+                <a href="javascript:void(0);" class="menu-item theme-select" title="{{ T "switchTheme" }}">
+                    <i class="fas fa-adjust fa-fw"></i>
+                    <select class="color-theme-select" id="theme-select-desktop" title="{{ T "switchTheme" }}">
+                        <option value="light">{{ T "Light" }}</option>
+                        <option value="dark">{{ T "Dark" }}</option>
+                        <option value="black">{{ T "Black" }}</option>
+                        <option value="auto">{{ T "Auto" }}</option>
+                    </select>
+                </a>
+                {{- else -}}
                 <a href="javascript:void(0);" class="menu-item theme-switch" title="{{ T "switchTheme" }}">
                     <i class="fas fa-adjust fa-fw"></i>
                 </a>
-                <!-- <a href="javascript:void(0);" class="menu-item theme-switch" title="{{ T "switchTheme" }}">
-                    <select class="theme-select" id="theme-select-desktop" title="{{ T "switchTheme" }}">
-                        <option value="Light">Light</option>
-                        <option value="Dark">Dark</option>
-                        <option value="Black">Black</option>
-                        <option value="Auto">Auto</option>
-                    </select>
-                </a> -->
+                {{- end -}}
             </div>
         </div>
     </div>
@@ -154,9 +158,21 @@
                     {{- .Pre | safeHTML }}{{ .Name }}{{ .Post | safeHTML -}}
                 </a>
             {{- end -}}
+            {{- if eq .Site.Params.header.themeChangeMode "select" -}}
+            <a href="javascript:void(0);" class="menu-item theme-select" title="{{ T "switchTheme" }}">
+                <i class="fas fa-adjust fa-fw"></i>
+                <select class="color-theme-select" id="theme-select-mobile" title="{{ T "switchTheme" }}">
+                    <option value="light">{{ T "Light" }}</option>
+                    <option value="dark">{{ T "Dark" }}</option>
+                    <option value="black">{{ T "Black" }}</option>
+                    <option value="auto">{{ T "Auto" }}</option>
+                </select>
+            </a>
+            {{- else -}}
             <a href="javascript:void(0);" class="menu-item theme-switch" title="{{ T "switchTheme" }}">
                 <i class="fas fa-adjust fa-fw"></i>
             </a>
+            {{- end -}}
             {{- if .Site.IsMultiLingual -}}
                 <a href="javascript:void(0);" class="menu-item" title="{{ T "selectLanguage" }}">
                     {{- .Language.LanguageName -}}

src/js/theme.js

@@ -83,9 +83,53 @@ class Theme {
     initSwitchTheme() {
         this.util.forEach(document.getElementsByClassName('theme-switch'), $themeSwitch => {
             $themeSwitch.addEventListener('click', () => {
-                if (document.body.getAttribute('theme') === 'dark') document.body.setAttribute('theme', 'black'), window.localStorage && localStorage.setItem('theme', 'black'), this.isDark = true;
-                else if (document.body.getAttribute('theme') === 'black') document.body.setAttribute('theme', 'light'), window.localStorage && localStorage.setItem('theme', 'light'), this.isDark = false;
-                else document.body.setAttribute('theme', 'dark'), window.localStorage && localStorage.setItem('theme', 'dark'),  this.isDark = true;
+                let currentTheme = document.body.getAttribute('theme');
+                if (currentTheme === 'dark') {
+                    document.body.setAttribute('theme', 'black');
+                    window.localStorage && localStorage.setItem('theme', 'black');
+                    this.isDark = true;
+                } else if (currentTheme === 'black') {
+                    document.body.setAttribute('theme', 'light');
+                    window.localStorage && localStorage.setItem('theme', 'light');
+                    this.isDark = false;
+                } else {
+                    document.body.setAttribute('theme', 'dark');
+                    window.localStorage && localStorage.setItem('theme', 'dark');
+                    this.isDark = true;
+                }
+                for (let event of this.switchThemeEventSet) event();
+            }, false);
+        });
+    }
+
+    initSelectTheme() {
+        this.util.forEach(document.getElementsByClassName('color-theme-select'), $themeSelect => {
+            let currentTheme = document.body.getAttribute('theme');
+            for (let i, j = 0; i = $themeSelect.options[j]; j++) {
+                if (i.value == currentTheme) {
+                    $themeSelect.selectedIndex = j;
+                    break;
+                }
+            }
+            $themeSelect.addEventListener('change', () => {
+                let theme = $themeSelect.value;
+                window.localStorage && localStorage.setItem('theme', theme);
+                if (theme != 'auto') {
+                    document.body.setAttribute('theme', theme);
+                    if (theme == 'light') {
+                        this.isDark = false;
+                    } else {
+                        this.isDark = true;
+                    }
+                } else {
+                    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                        document.body.setAttribute('theme', 'dark');
+                        this.isDark = true;
+                    } else {
+                        document.body.setAttribute('theme', 'white');
+                        this.isDark = false;
+                    }
+                }
                 for (let event of this.switchThemeEventSet) event();
             }, false);
         });
@@ -697,6 +741,7 @@ class Theme {
             this.initTwemoji();
             this.initMenuMobile();
             this.initSwitchTheme();
+            this.initSelectTheme();
             this.initSearch();
             this.initDetails();
             this.initLightGallery();