diff --git a/README.md b/README.md index 015ad2c..ffea2fd 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 and dimmable images shortcodes. diff --git a/static/js/main.js b/static/js/main.js index 946380e..3a1af20 100644 --- a/static/js/main.js +++ b/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'); -var currentTheme = localStorage.getItem('theme'); +function setTheme(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); - if (currentTheme === 'dark') { - themeSwitcher.checked = true; - } + setTheme(currentTheme); +} else { + 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'); + } +}); 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 f00f4a2..0000000 Binary files a/static/menu_icon/moon.webp and /dev/null differ diff --git a/static/menu_icon/sun.svg b/static/menu_icon/sun.svg new file mode 100644 index 0000000..d7ee03d --- /dev/null +++ b/static/menu_icon/sun.svg @@ -0,0 +1 @@ + \ 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 2ccaf37..0000000 Binary files a/static/menu_icon/sun.webp and /dev/null differ diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 3d99fa9..88b281a 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -8,18 +8,19 @@
{% for menu in config.extra.menu %} - {{ menu.name }} + {{ menu.name + }} {% endfor %}
{% endif %} - - + +