feat: add icon to theme toggle

wlh320 · Apr 8, 2024 · b529935 · b529935
1 parent cc4e52d
commit b529935
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 7 deletions.
diff --git a/assets/css/hulga.scss b/assets/css/hulga.scss
@@ -53,6 +53,19 @@
 // custom css
 @import "./custom";
 
+/* dark theme toggle */
+{{ if .Site.Params.darkToggle }}
+.theme-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.ticon {
+  width: 1.2em;
+  height: 1.2em;
+}
+{{ end }}
+
 /* hero looks like steam deck */
 {{ if .Site.Params.heroSteamDeck }}
 @import "./steamdeck"

diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
@@ -1,5 +1,6 @@
 baseURL = 'https://example.org/'
 languageCode = 'en-us'
+defaultContentLanguage = 'en'
 title = 'My New Hugo Site'
 hasCJKLanguage = false
 # summaryLength = 80

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -11,6 +11,7 @@ other = "Search"
 other = "Archives"
 
 [archives_count]
+one = "There is {{ .Count }} article in this blog"
 other = "There are {{ .Count }} articles in this blog"
 
 [404-info]

diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
@@ -26,10 +26,10 @@ other = "下一页"
 other = "阅读全文"
 
 [light-mode]
-other = "浅色"
+other = "浅色模式"
 
 [dark-mode]
-other = "深色"
+other = "深色模式"
 
 [system-mode]
 other = "跟随系统"
diff --git a/layouts/partials/dark.html b/layouts/partials/dark.html
@@ -2,10 +2,7 @@
   <a class="navbar-link">
     <svg
     xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    width="1em"
-    height="1em"
-    class="theme-toggle__dark-side"
+    width="1em" height="1em"
     fill="currentColor"
     viewBox="0 0 32 32"
     >
@@ -14,12 +11,21 @@
   </a>
   <div class="navbar-dropdown" id="navDropdown">
     <a class="navbar-item theme-toggle" data-value="light">
+      <span class="ticon">
+      <svg viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"></path></svg>
+      </span>
       {{- i18n "light-mode" -}}
     </a>
     <a class="navbar-item theme-toggle" data-value="dark">
+      <span class="ticon">
+      <svg viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path></svg>
+      </span>
       {{- i18n "dark-mode" -}}
     </a>
     <a class="navbar-item theme-toggle" data-value="system">
+      <span class="ticon">
+      <svg viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm4 15h10m-8-4v4m6-4v4"></path></svg>
+      </span>
       {{- i18n "system-mode" -}}
     </a>
   </div>

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
@@ -1,4 +1,4 @@
-<nav class="navbar is-primary">
+<nav class="navbar is-primary" role="navigation" aria-label="dropdown navigation">
   <div class="container">
     <div class="navbar-brand">
       {{- $home := .Site.GetPage "/" -}}