From a03f248319a982926788c5a72356eec408dc66fd Mon Sep 17 00:00:00 2001
From: bb1950328 <bb1950328@gmail.com>
Date: Wed, 27 Jan 2021 15:33:04 +0000
Subject: [PATCH] light/dark mode switch improvements and bugfix in search index (#29)
---
assets/js/search.js | 2 +-
assets/js/index.js | 7 ++++++-
assets/sass/_variables.sass | 2 ++
assets/sass/_components.sass | 11 ++++++++++-
static/icons/moon.svg | 3 +++
layouts/partials/mode.html | 14 +++++++++++++-
static/icons/sun.svg | 3 +++
7 files changed, 38 insertions(+), 4 deletions(-)
diff --git a/assets/js/index.js b/assets/js/index.js
index a8e2792..8614d98 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -246,6 +246,9 @@
return mode.join('');
}
+ /**
+ * @param isDarkMode true means from dark to light, false means from light to dark
+ */
function changeMode(isDarkMode) {
if(isDarkMode) {
bank.setItem(storageKey, light)
@@ -301,6 +304,7 @@
function setUserColorMode(mode = false) {
const isDarkMode = currentMode() == dark;
const storedMode = bank.getItem(storageKey);
+ const sysMode = systemMode();
if(storedMode) {
if(mode) {
changeMode(isDarkMode);
@@ -310,9 +314,10 @@
} else {
if(mode === true) {
changeMode(isDarkMode)
+ } else {
+ changeMode(sysMode!==dark);
}
}
- const sysMode = systemMode();
const userMode = doc.dataset.mode;
doc.dataset.systemmode = sysMode;
if(userMode) {
diff --git a/assets/js/search.js b/assets/js/search.js
index ef9547e..2c4851a 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -3,7 +3,7 @@
{
"link": "{{ .Permalink }}",
"title": "{{ .Title }}",
- "body": `{{ .PlainWords }}`.toLowerCase(),
+ "body": "{{ .PlainWords }}".toLowerCase(),
},
{{- end }}
];
diff --git a/assets/sass/_components.sass b/assets/sass/_components.sass
index 5837566..3caf39b 100644
--- a/assets/sass/_components.sass
+++ b/assets/sass/_components.sass
@@ -271,4 +271,13 @@
transform: scale(1.67)
transform-origin: 50% 50%
transition: transform 0.5s cubic-bezier(.19,1,.22,1)
- will-change: transform
\ No newline at end of file
+ will-change: transform
+
+ &_icon
+ height: 1rem
+ width: 1rem
+ margin: 0
+ z-index: 4
+ position: absolute
+ transform: translateY(-50%)
+ transition: transform 0.5s cubic-bezier(.19,1,.22,1)
\ No newline at end of file
diff --git a/assets/sass/_variables.sass b/assets/sass/_variables.sass
index 2791edc..a9cfe33 100644
--- a/assets/sass/_variables.sass
+++ b/assets/sass/_variables.sass
@@ -32,6 +32,8 @@
&_choice
&::after
transform: translateX(1.75rem) scale(1.67)
+ &_icon
+ transform: translateX(1.75rem) translateY(-50%)
&.dark:not([data-mode="light"])
@media (prefers-color-scheme: dark)
diff --git a/layouts/partials/mode.html b/layouts/partials/mode.html
index 29af215..d1cb403 100644
--- a/layouts/partials/mode.html
+++ b/layouts/partials/mode.html
@@ -1,4 +1,16 @@
+{{- $s := .Site }}
+{{- $sp := $s.Params }}
+{{- $iconsPath := "icons/" }}
<div class = 'color_mode'>
- <label for = 'mode'></label>
+ <label for = 'mode'>
+ {{- $litPath := absURL (printf "%ssun.svg" $iconsPath) }}
+ {{- $darkPath := absURL (printf "%smoon.svg" $iconsPath) }}
+ <picture data-lit="{{ $litPath }}" data-dark="{{ $darkPath }}">
+ {{ with $sp.enableDarkMode }}
+ <source srcset = '{{ $darkPath }}' media="(prefers-color-scheme: dark)">
+ {{ end }}
+ <img srcset = '{{ $litPath }}' alt = 'Light/Dark Mode Icon' class="color_icon">
+ </picture>
+ </label>
<input type = 'checkbox' class = 'color_choice' id = 'mode' title="Toggle Dark Mode">
</div>
diff --git a/static/icons/moon.svg b/static/icons/moon.svg
new file mode 100644
index 0000000..2866b0c
--- /dev/null
+++ b/static/icons/moon.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="112px" height="124px" viewBox="-0.5 -0.5 112 124"><defs/><g><path d="M 54.06 11 C 29.34 21.72 18 50.39 28.76 75.05 C 39.51 99.7 68.27 111 93 100.28 C 73.61 96.94 57.21 84.1 49.36 66.11 C 41.52 48.13 43.28 27.41 54.06 11 Z" fill="#000000" stroke="none" transform="rotate(-25,55.5,61)" pointer-events="all"/><path d="M 45.5 31 L 53.5 29 L 55.5 21 L 57.5 29 L 65.5 31 L 57.5 33 L 55.5 41 L 53.5 33 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 62 61 L 68 59.5 L 69.5 53.5 L 71 59.5 L 77 61 L 71 62.5 L 69.5 68.5 L 68 62.5 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 77 41 L 85 39 L 87 31 L 89 39 L 97 41 L 89 43 L 87 51 L 85 43 Z" fill="#000000" stroke="none" pointer-events="all"/></g></svg>
\ No newline at end of file
diff --git a/static/icons/sun.svg b/static/icons/sun.svg
new file mode 100644
index 0000000..5f60a8b
--- /dev/null
+++ b/static/icons/sun.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="201px" height="201px" viewBox="-0.5 -0.5 201 201"><defs/><g><ellipse cx="100" cy="100" rx="50" ry="50" fill="#000000" stroke="none" pointer-events="all"/><path d="M 80 10 L 120 20 L 80 30 Z" fill="#000000" stroke="none" transform="rotate(270,100,20)" pointer-events="all"/><path d="M 80 170 L 120 180 L 80 190 Z" fill="#000000" stroke="none" transform="rotate(90,100,180)" pointer-events="all"/><path d="M 160 90 L 200 100 L 160 110 Z" fill="#000000" stroke="none" pointer-events="all"/><path d="M 0 90 L 40 100 L 0 110 Z" fill="#000000" stroke="none" transform="rotate(180,20,100)" pointer-events="all"/><path d="M 137 147 L 177 157 L 137 167 Z" fill="#000000" stroke="none" transform="rotate(45,157,157)" pointer-events="all"/><path d="M 23 147 L 63 157 L 23 167 Z" fill="#000000" stroke="none" transform="rotate(135,43,157)" pointer-events="all"/><path d="M 23 33 L 63 43 L 23 53 Z" fill="#000000" stroke="none" transform="rotate(225,43,43)" pointer-events="all"/><path d="M 137 33 L 177 43 L 137 53 Z" fill="#000000" stroke="none" transform="rotate(315,157,43)" pointer-events="all"/></g></svg>
\ No newline at end of file
--
Gitblit v1.10.0