refactor: Use SVG icon for theme switcher (reuixiy#155)

Fixes reuixiy#144 * Use SVG icon for theme switcher * Replace innerHTML with CSS selectors * Add some magic to moon icon * Update sun icon * Simplify * Do not add icons if theme switcher is hidden * Fix a careless bug
ulmefors · Nov 22, 2020 · c727771 · c727771
1 parent aeb5da6
commit c727771
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 33 deletions.
diff --git a/assets/js/dark-mode.js b/assets/js/dark-mode.js
@@ -36,10 +36,8 @@ lightModeMediaQuery.addListener((e) => {
 
 const themeSwitcher = document.getElementById('theme-switcher');
 
-themeSwitcher.addEventListener('click', function() {
-    const currentMode = document.documentElement.getAttribute('data-theme');
-
-    if (currentMode === 'dark') {
+themeSwitcher.addEventListener('change', (e) => {
+    if (!e.target.checked) {
         changeModeMeta('light');
         changeMode('light');
         storePrefers('light');
@@ -66,14 +64,13 @@ window.addEventListener('storage', function (event) {
 // Functions
 
 function changeMode(theme) {
-    var isDark = theme === 'dark';
+    const isDark = theme === 'dark';
 
-    // Change Theme Toggle Emoji
-    document.getElementById('theme-switcher').innerHTML = isDark ? '🌙' : '🌞';
+    document.getElementById('theme-switcher').checked = isDark ? true : false;
 
     // Change Chroma Code Highlight Theme
-    var oldChromaTheme = isDark ? 'chroma' : 'chroma-dark';
-    var newChromaTheme = isDark ? 'chroma-dark' : 'chroma';
+    const oldChromaTheme = isDark ? 'chroma' : 'chroma-dark';
+    const newChromaTheme = isDark ? 'chroma-dark' : 'chroma';
 
     [].slice.apply(document.getElementsByClassName(oldChromaTheme)).forEach((e) => {
         e.className = newChromaTheme;

diff --git a/assets/js/header.js b/assets/js/header.js
@@ -21,15 +21,15 @@ headerInner.style.setProperty('opacity', 1);
 // Hide switcher's parentNode if it has `data-hide`
 
 function addDisplayNone(e) {
-    const ele = document.getElementById(e);
+    const ele = document.querySelector(e);
     if (ele !== null) {
-        const hide = ele.getAttribute('data-hide');
+        const hide = ele.getAttribute('data-hide') || ele.getAttribute('aria-hidden');
         if (hide !== null) {
             ele.parentNode.style = 'display: none';
         }
     }
 }
 
-addDisplayNone('theme-switcher');
+addDisplayNone('#theme-switcher');
 
-addDisplayNone('lang-switcher');
+addDisplayNone('#lang-switcher');
diff --git a/assets/scss/components/_dark-mode.scss b/assets/scss/components/_dark-mode.scss
@@ -1,24 +1,56 @@
 #theme-switcher {
-    cursor: pointer;
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+
+    ~ .switcher-label {
+        .theme-icon-dark {
+            display: none;
+        }
+    }
+
+    &:checked {
+        ~ .switcher-label {
+            .theme-icon-light {
+                display: none;
+            }
+            .theme-icon-dark {
+                display: inline-block;
+            }
+        }
+    }
+}
+
+.switcher-label {
     position: relative;
+    color: var(--color-contrast-medium);
+    transition: color $duration;
+    cursor: pointer;
     z-index: 4;
+
+    .icon {
+        margin-right: 0 !important;
+    }
+
+    &:hover {
+        color: var(--color-primary);
+    }
 }
 
 [data-theme="dark"] {
     img {
         filter: brightness(50%);
     }
-    #theme-switcher, #lang-switcher {
-        opacity: 0.5;
-    }
 }
 
 @if ($headerLayoutFlex) {
-    #theme-switcher {
+    .switcher-label {
         display: inline-block;
     }
 } @else {
-    #theme-switcher {
+    .switcher-label {
         padding: 1em;
         float: right;
     }

diff --git a/data/SVG.toml b/data/SVG.toml
@@ -52,6 +52,8 @@ edit = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="ico
 arrow-up = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon"><path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"/></svg>'
 eye = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="icon"><path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"/></svg>'
 user = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon"><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"/></svg>'
+sun = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon"><path d="M193.2 104.5l48.8-97.5a18 18 0 0128 0l48.8 97.5 103.4 -34.5a18 18 0 0119.8 19.8l-34.5 103.4l97.5 48.8a18 18 0 010 28l-97.5 48.8 34.5 103.4a18 18 0 01-19.8 19.8l-103.4-34.5-48.8 97.5a18 18 0 01-28 0l-48.8-97.5l-103.4 34.5a18 18 0 01-19.8-19.8l34.5-103.4-97.5-48.8a18 18 0 010-28l97.5-48.8-34.5-103.4a18 18 0 0119.8-19.8zM256 128a128 128 0 10.01 0M256 160a96 96 0 10.01 0"/></svg>'
+moon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon"><path d="M27 412a256 256 0 10154-407a11.5 11.5 0 00-5 20a201.5 201.5 0 01-134 374a11.5 11.5 0 00-15 13"/></svg>'
 # Social Icons
 rss = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M19.199 24C19.199 13.467 10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291 17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301 3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909 24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909 7.184 15.909 15.91z"/></svg>'
 envelope = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon"><path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"/></svg>'

diff --git a/...leSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content b/...leSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.content
diff --git a/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json b/exampleSite/resources/_gen/assets/scss/scss/main.scss_a899b346ffc3a4bc65b84e40528dea51.json
@@ -1 +1 @@
-{"Target":"css/meme.min.123893da0ad2f3e34bfbdc37ba47a437fad955d0ad5d4642cd640578cd8569a8.css","MediaType":"text/css","Data":{"Integrity":"sha256-EjiT2grS8+NL+9w3ukekN/rZVdCtXUZCzWQFeM2Faag="}}
+{"Target":"css/meme.min.d2614cbfce1c21c345cf7ee62ee4d75ce06f77d2d7dedc087b2a8a526fc69d5d.css","MediaType":"text/css","Data":{"Integrity":"sha256-0mFMv84cIcNFz37mLuTXXOBvd9LX3twIeyqKUm/GnV0="}}
diff --git a/layouts/partials/components/dark-mode.html b/layouts/partials/components/dark-mode.html
@@ -1,16 +1,20 @@
 {{ if .Site.Params.enableDarkMode }}
     {{ with .Site.Params.defaultTheme | default "light" }}
-        {{ if eq . "light" }}
-            {{ $.Scratch.Set "text" "🌞" }}
-        {{ else }}
-            {{ $.Scratch.Set "text" "🌙" }}
-        {{ end }}
-        {{ $text := $.Scratch.Get "text" }}
-        {{- $.Scratch.Delete "hide" -}}
-        {{- if or (and $.IsHome $.Site.Params.hideThemeToggleInHome) (and (not $.IsHome) $.Site.Params.hideThemeToggle) -}}
-            {{- $.Scratch.Set "hide" true -}}
-        {{- end -}}
-        {{- $hide := $.Scratch.Get "hide" -}}
-        <div id="theme-switcher"{{ if $hide }} data-hide="true"{{ end }}>{{ $text }}</div>
+        {{- $hide := or (and $.IsHome $.Site.Params.hideThemeToggleInHome) (and (not $.IsHome) $.Site.Params.hideThemeToggle) -}}
+        <input
+            type="checkbox"
+            id="theme-switcher"
+            {{ if eq . "dark" }}checked{{ end }}
+            {{ if $hide }}aria-hidden="true"{{ end }}
+        />
+        <label
+            for="theme-switcher"
+            class="switcher-label"
+        >
+            {{- if not $hide -}}
+                {{- partial "utils/icon.html" (dict "Deliver" $ "name" "sun" "class" "icon theme-icon-light") -}}
+                {{- partial "utils/icon.html" (dict "Deliver" $ "name" "moon" "class" "icon theme-icon-dark") -}}
+            {{- end -}}
+        </label>
     {{ end }}
 {{ end }}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/meme.min.123893da0ad2f3e34bfbdc37ba47a437fad955d0ad5d4642cd640578cd8569a8.css","MediaType":"text/css","Data":{"Integrity":"sha256-EjiT2grS8+NL+9w3ukekN/rZVdCtXUZCzWQFeM2Faag="}}
		{"Target":"css/meme.min.d2614cbfce1c21c345cf7ee62ee4d75ce06f77d2d7dedc087b2a8a526fc69d5d.css","MediaType":"text/css","Data":{"Integrity":"sha256-0mFMv84cIcNFz37mLuTXXOBvd9LX3twIeyqKUm/GnV0="}}