From 84b4469b07c33bd1f4c63e200cc9029acc06e087 Mon Sep 17 00:00:00 2001 From: welpo Date: Tue, 14 Feb 2023 23:21:32 +0100 Subject: [PATCH 1/6] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20improvement:=20switch?= =?UTF-8?q?=20from=20webp=20to=20svg=20icons=20Saves=20a=20bit=20of=20spac?= =?UTF-8?q?e=20:)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/menu_icon/moon.svg | 3 +++ static/menu_icon/moon.webp | Bin 2448 -> 0 bytes static/menu_icon/sun.svg | 1 + static/menu_icon/sun.webp | Bin 3382 -> 0 bytes templates/partials/nav.html | 11 ++++++----- 5 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 static/menu_icon/moon.svg delete mode 100644 static/menu_icon/moon.webp create mode 100644 static/menu_icon/sun.svg delete mode 100644 static/menu_icon/sun.webp diff --git a/static/menu_icon/moon.svg b/static/menu_icon/moon.svg new file mode 100644 index 0000000..47aedd3 --- /dev/null +++ b/static/menu_icon/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/menu_icon/moon.webp b/static/menu_icon/moon.webp deleted file mode 100644 index f00f4a250a2c3cfc6621827d580bed7ea6a39d68..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2448 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 \ No newline at end of file diff --git a/static/menu_icon/sun.webp b/static/menu_icon/sun.webp deleted file mode 100644 index 2ccaf375328cb09826460f6dacea5ae0b5eea202..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3382 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

{% for menu in config.extra.menu %} - {{ menu.name }} + {{ menu.name + }} {% endfor %}
{% endif %} - - + + From 2f4d0658d8908785c7627362e5b2a7eaa96e48e2 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 15 Feb 2023 01:33:43 +0100 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=90=9B=20fix:=20rename=20sun=20icon?= =?UTF-8?q?=20reference?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/partials/nav.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 82d5976..88b281a 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -16,7 +16,7 @@
set dark theme - set light theme + set light theme
From af80aef00c867459f28d268dc9d3708d65a408c3 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 15 Feb 2023 20:36:26 +0100 Subject: [PATCH 3/6] =?UTF-8?q?=E2=9C=A8=20feat:=20change=20default=20them?= =?UTF-8?q?e=20to=20OS=20default=20Update=20the=20theme=20switcher=20code?= =?UTF-8?q?=20to=20set=20the=20default=20theme=20to=20the=20OS=20default,?= =?UTF-8?q?=20rather=20than=20the=20"light"=20theme.=20This=20provides=20a?= =?UTF-8?q?=20more=20seamless=20user=20experience=20for=20users=20whose=20?= =?UTF-8?q?OS=20is=20set=20to=20a=20dark=20mode.=20The=20current=20theme?= =?UTF-8?q?=20setting=20in=20local=20storage=20will=20still=20be=20respect?= =?UTF-8?q?ed=20if=20present.=20This=20change=20was=20made=20to=20improve?= =?UTF-8?q?=20the=20accessibility=20and=20usability.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #38 --- static/js/main.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 946380e..cf0b06c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,14 +1,15 @@ -//https://codepen.io/codeorum/pen/bGedRJO - var themeSwitcher = document.querySelector('.theme-switcher input'); var currentTheme = localStorage.getItem('theme'); -// check what is current theme right now and activate it +// detect the user's preferred color scheme and activate it if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { themeSwitcher.checked = true; } +} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-theme', 'dark'); + themeSwitcher.checked = true; } // switch between themes From 26ad170d9fee316fb3eb131cc664cd1eed9e1cfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Wed, 15 Feb 2023 20:50:21 +0100 Subject: [PATCH 4/6] =?UTF-8?q?=E2=9C=A8=20feat:=20change=20default=20them?= =?UTF-8?q?e=20to=20OS=20setting?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index a61d113..d909a54 100644 --- a/README.md +++ b/README.md @@ -4,26 +4,15 @@ A simple blog theme powered by [Zola](https://getzola.org). See a live preview [ > tabi (旅): Journey. - -
- Light theme - -![tabi-light](https://user-images.githubusercontent.com/6399341/216767537-94c431bb-10f9-48c3-942b-e64b27d98c7d.png) -
- -
- Dark theme - -![tabi-dark](https://user-images.githubusercontent.com/6399341/216767530-cfe66699-ee6a-40b0-93ff-ce6879f5381e.png) -
+![tabi](https://user-images.githubusercontent.com/6399341/219136652-23d0a4fd-cf3c-4a00-8fb1-ce1ca7b2660f.png) ## 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 images ([shortcode](https://www.getzola.org/documentation/content/shortcodes/)). From 2f80b0b5ad481d53d5621f84bffd3415fc078672 Mon Sep 17 00:00:00 2001 From: serginogal Date: Thu, 16 Feb 2023 22:19:58 +0900 Subject: [PATCH 5/6] :zap: feat: clean js code --- static/js/main.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index cf0b06c..ab00e97 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,15 +1,14 @@ -var themeSwitcher = document.querySelector('.theme-switcher input'); -var currentTheme = localStorage.getItem('theme'); +const themeSwitcher = document.querySelector('.theme-switcher input'); +const currentTheme = localStorage.getItem('theme'); // detect the user's preferred color scheme and activate it if (currentTheme) { - document.documentElement.setAttribute('data-theme', currentTheme); - if (currentTheme === 'dark') { - themeSwitcher.checked = true; - } -} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { - document.documentElement.setAttribute('data-theme', 'dark'); - themeSwitcher.checked = true; + document.documentElement.setAttribute( 'data-theme', currentTheme); + themeSwitcher.checked = currentTheme === 'dark'; +} else { + const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + document.documentElement.setAttribute( 'data-theme', isSystemDark? 'dark' : 'light'); + themeSwitcher.checked = isSystemDark; } // switch between themes From 9a1f5db45c5b1cb819239e16c315077494eef04f Mon Sep 17 00:00:00 2001 From: welpo Date: Thu, 16 Feb 2023 21:23:48 +0100 Subject: [PATCH 6/6] =?UTF-8?q?=E2=9C=A8=20feat:=20listen=20for=20changes?= =?UTF-8?q?=20on=20OS=20theme=20to=20switch=20accordingly=20As=20long=20as?= =?UTF-8?q?=20the=20visitor=20has=20not=20changed=20the=20default=20theme,?= =?UTF-8?q?=20the=20site=20will=20change=20between=20dark=20and=20light=20?= =?UTF-8?q?themes=20matching=20the=20OS=20setting.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- static/js/main.js | 38 +++++++++++++++++++++----------------- 1 file changed, 21 insertions(+), 17 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index ab00e97..3a1af20 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,27 +1,31 @@ const themeSwitcher = document.querySelector('.theme-switcher input'); -const currentTheme = localStorage.getItem('theme'); +let currentTheme = localStorage.getItem('theme'); +let userHasManuallyChangedTheme = currentTheme !== null; + +function setTheme(theme) { + document.documentElement.setAttribute('data-theme', theme); + themeSwitcher.checked = theme === 'dark'; + localStorage.setItem('theme', theme); + currentTheme = theme; +} -// detect the user's preferred color scheme and activate it if (currentTheme) { - document.documentElement.setAttribute( 'data-theme', currentTheme); - themeSwitcher.checked = currentTheme === 'dark'; + setTheme(currentTheme); } else { - const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - document.documentElement.setAttribute( 'data-theme', isSystemDark? 'dark' : 'light'); - themeSwitcher.checked = isSystemDark; + const isSystemDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + setTheme(isSystemDark ? 'dark' : 'light'); } -// switch between themes function switchTheme(e) { - if (e.target.checked) { - document.documentElement.setAttribute('data-theme', 'dark'); - localStorage.setItem('theme', 'dark'); - } - else { - document.documentElement.setAttribute('data-theme', 'light'); - localStorage.setItem('theme', 'light'); - } + const newTheme = e.target.checked ? 'dark' : 'light'; + setTheme(newTheme); + userHasManuallyChangedTheme = true; } -// 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'); + } +});