Merge pull request #39 from welpo/feature/default-theme-switcher

Change default theme to OS default; listen to OS default theme changes and switch accordingly (as long as there's no user preference set)

README.md

@@ -4,26 +4,15 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [
 
 > tabi (旅): Journey.
 
-
+![tabi](https://user-images.githubusercontent.com/6399341/219136652-23d0a4fd-cf3c-4a00-8fb1-ce1ca7b2660f.png)
-<details open>
-  <summary>Light theme</summary>
-
-![tabi-light](https://user-images.githubusercontent.com/6399341/216767537-94c431bb-10f9-48c3-942b-e64b27d98c7d.png)
-</details>
-
-<details close>
-  <summary>Dark theme</summary>
-
-![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png)
-</details>
 
 ## Features
 
-- [X] Dark and light modes. Default theme is light with a switcher in the navbar.
+- [X] Dark and light themes. Defaults to the OS setting, with a switcher in the navigation bar.
 - [X] Projects page.
 - [X] Archive page.
-- [x] Social Links.
 - [x] Tags.
+- [x] Social Links.
 - [X] Syntax highlighting.
 - [X] Invertable and dimmable images shortcodes.
 

static/js/main.js

@@ -1,27 +1,31 @@
-//https://codepen.io/codeorum/pen/bGedRJO
+const themeSwitcher = document.querySelector('.theme-switcher input');
+let currentTheme = localStorage.getItem('theme');
+let userHasManuallyChangedTheme = currentTheme !== null;
 
-var themeSwitcher = document.querySelector('.theme-switcher input');
+function setTheme(theme) {
-var currentTheme = localStorage.getItem('theme');
+  document.documentElement.setAttribute('data-theme', theme);
+  themeSwitcher.checked = theme === 'dark';
+  localStorage.setItem('theme', theme);
+  currentTheme = theme;
+}
 
-// check what is current theme right now and activate it
 if (currentTheme) {
-    document.documentElement.setAttribute('data-theme', currentTheme);
+  setTheme(currentTheme);
-    if (currentTheme === 'dark') {
+} else {
-        themeSwitcher.checked = true;
+  const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
+  setTheme(isSystemDark ? 'dark' : 'light');
 }
 
-// switch between themes
 function switchTheme(e) {
-    if (e.target.checked) {
+  const newTheme = e.target.checked ? 'dark' : 'light';
-        document.documentElement.setAttribute('data-theme', 'dark');
+  setTheme(newTheme);
-        localStorage.setItem('theme', 'dark');
+  userHasManuallyChangedTheme = true;
-    }
-    else {
-        document.documentElement.setAttribute('data-theme', 'light');
-        localStorage.setItem('theme', 'light');
-    }
 }
 
-// event listener on checkbox change
 themeSwitcher.addEventListener('change', switchTheme, false);
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!userHasManuallyChangedTheme) {
+    setTheme(e.matches ? 'dark' : 'light');
+  }
+});

static/menu_icon/moon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"/>
+</svg>

static/menu_icon/sun.svg

@@ -0,0 +1 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m12 17q-2.07 0-3.54-1.46-1.46-1.47-1.46-3.54t1.46-3.54q1.47-1.46 3.54-1.46t3.54 1.46q1.46 1.47 1.46 3.54 0 2.07-1.46 3.54-1.47 1.46-3.54 1.46zm-10-4q-.43 0-.71-.29-.29-.28-.29-.71t.29-.71q.29-.29.71-.29h2q.42 0 .71.29.29.28.29.71t-.29.71q-.29.29-.71.29zm18 0q-.43 0-.71-.29-.29-.28-.29-.71t.29-.71q.28-.29.71-.29h2q.43 0 .71.29.29.29.29.71t-.29.71q-.28.29-.71.29zm-8-8q-.43 0-.71-.29-.29-.29-.29-.71v-2q0-.43.29-.71.28-.29.71-.29t.71.29q.29.29.29.71v2q0 .42-.29.71-.28.29-.71.29zm0 18q-.43 0-.71-.29-.29-.28-.29-.71v-2q0-.43.29-.71.28-.29.71-.29t.71.29q.29.28.29.71v2q0 .43-.29.71-.28.29-.71.29zm-6.35-15.95-1.07-1.05q-.3-.28-.29-.7.01-.42.29-.72.3-.3.72-.3t.7.3l1.05 1.07q.28.3.28.7 0 .4-.28.7-.28.3-.69.29-.41-.01-.71-.29zm12.35 12.38-1.05-1.08q-.27-.3-.27-.71 0-.41.27-.69.27-.3.69-.29.41.02.71.29l1.08 1.05q.3.27.28.7-.01.43-.28.73-.3.3-.73.3t-.7-.3zm-1.05-12.38q-.3-.27-.29-.69.02-.41.29-.71l1.05-1.07q.27-.3.7-.29.43.01.73.29.3.3.3.72t-.3.7l-1.08 1.05q-.3.28-.7.28-.4 0-.7-.28zm-12.38 12.38q-.3-.3-.3-.73t.3-.7l1.08-1.05q.3-.27.71-.27.41 0 .69.27.3.27.29.69-.01.41-.29.71l-1.05 1.08q-.28.3-.7.28-.42-.01-.72-.28z" fill="#fff"/></svg>

templates/partials/nav.html

@@ -8,18 +8,19 @@
 		<div class="nav-navs">
 			<div>
 				{% for menu in config.extra.menu %}
-				<a class="nav-links" href={{ menu.url | safe | replace(from="$BASE_URL", to=config.base_url) }}>{{ menu.name }}</a>
+				<a class="nav-links" href={{ menu.url | safe | replace(from="$BASE_URL" , to=config.base_url) }}>{{ menu.name
+					}}</a>
 				{% endfor %}
 			</div>
 			<label class="theme-switcher" for="themeswitch">
 				<input type="checkbox" id="themeswitch">
 				<div class="switch">
-					<img alt="set dark theme" class="moon" src="{{ config.base_url }}/menu_icon/moon.webp">
+					<img alt="set dark theme" class="moon" src="{{ config.base_url }}/menu_icon/moon.svg">
-					<img alt="set light theme" class="sun" src="{{config.base_url}}/menu_icon/sun.webp">
+					<img alt="set light theme" class="sun" src="{{ config.base_url }}/menu_icon/sun.svg">
 				</div>
 			</label>
 		</div>
 		{% endif %}
 
-	</nav>
+		</nav>
-</header>
+		</header>