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 zcmWIYbaU(AWMBw)bqWXzu!!JdU|08$u5CHd zx2yGUZ_9DR%3}0q*ye|NhGVOX8`2aQ^=O z|Bsr(<@djTS04~C|Co$wtK@aN$4Bjrr2~W;oCO8IgtGCl=`cZ+>2< z%KA0+)TCv1e@3>IZhmx5p{h}KsmzsrMfS`&z4Mt0w9h4oSLAB7E~(>*ytGFAkGRG& zo`nZD1_@v3kG%BBpZVw#Jo!@`=3#?NhFHYi7;yKG3_c{JD_kN^$AT$Nw8HI_bw~sD4fKne{}_V0rJc z(x4Few9HtI)-Wl4ufWXz1@1KUCdj%T5bf6?bW>#9F-?h1Of9QS9Hh z%Fk-nP%;?EMohbsRg(4_N-d4iv4Bn8s_C1*LAZ^=UlU1tre>4 z@jiKN@r=NYS&`Zgw(R?Gd`-aC70Wk%lRU4r;+f~>rt*hQPfx|RT>N)vUTL?~^Zir! zELLk>)yWR#dRsnYd0yc8gu6eMCLLY0jQ#zwDWRutO?6`D{x7vY%Mm1T{07(8u30>L zr2oq-Pm6s0=+FO&C6?DF?(dJ?xZs27Qsw_M12#ql8aI|7O1#yTy4HW8_Ws~iVV7n` zm=}nxjJR-G_ST9x$K-#lmjoXdJdJWa%W-e!>nT}Nx9H5(-J{#;mHM`+^!feAA=)o{ z-dUVk7P5BtZs$blr(UdkZz?{nT584Gs;@CuvqoH0%kn8@AgQhN0`yqc%vghv< zZBy2}Rh|ojE|;82tU7AtdsUO`x7PK{wso~ity;d9b=zB~t}+STZjiU)iivFTjHr!n zlS_FXi#(O`{UGnPTt+Q$jo$?c`*M&F*UQc8EPd8RNW1RsD&>Bh_4Jj>-CLIJl~Z3A z2R%2qH{B_9)3&80y@%|wv?gz{sJJeZ7P8L!iizlf3V*IpPN}!*Ue68u!q;^zns;c| z^9`G3txA!NXXZMyV40fd>PMmne$emGPcw60~*yQ8lf#N#}&v?gw~Tq=}MV>okGK1uw!&3bfKZTddRU9;*FzbS8s%(2G3y<8q zuq>zJi$@_S^3oOR z8-F<%KInh0YdKA&bxv@PVvh@l;j%fVZ>G$)XZqun`DD^F#`OX_EI;&Dm(Q&A=`}ba zQS4`!(ITuEI@&XJ`e=|@^+rS&ZSm`eSEJo@tx<4ppr@uzrf^3&*NyjdDfl(xy^}mK6SL{Mui*cu|{4 zcA7@5@qy)uE3RbdeyB5?;S}jScdPxo+Mt9wQ>jk^rF=(!FFs(Eb>)yktoO%#8XLMd zMM*CGt#OZ^&s}5XQqNtpAJqmt@Hl!wO!Z~do-6AQOzd)e>w8HuAS->t?xcX(i?@hJ z+~qL~;>jxSh+<{SGGpM@X5VV}+Pr>I#o9d|u5QV?a?~x^hAB+Fxq7lxsj>I(#>(0| z3Hq9=R~u$*TYn%c`NP>YT!D9adkc=_IWaA$?v-E)_0?>soox^&IDcAd9R z6XKZ79|UN!hZ=Yb$Fa;PKg+wL(o1u7pQ88vU91N0CrN)eawmvyRoa1{(Ab8b;Bh)bN0O1?p>Z&eLZI-Z1-o_{zz9VtYLotT)!^Q(7wn^OyYky z7ess%t1x6gb$4}&rfR5ln&)Eu;)mrt(Q8EHb-pJ(WB9)_{V%8L(-o`Qr>Gva{8ssA zKF{^;$U^yv)rQ)w5BHbe3VQ6-Wx3*?VydT9@w&I`YF^Lh`FH)h%%(3XlSGO`;@f64 zx5*|SYc;#`{*86qzgO|fKOU?5#}>c&cKW={#J1VN0lyi;0xT4mm>3u?2rC-q`rfRB7G!=ovS? z++{eJpYOe57WC!cnQa*o{vn(V-FZLD46+J0sW9pCPBytAbj;#K!_r4F!i7#xV!qYQ zHd?-%X-BZ?`TBEPrSg}rWz*^WyK4GzCFe~=>rEV{mc`5N`!l6qreO7b>C@q+S?bGV zB^Vg~{Wve^cAz~*wCGrBfzCOLXJ@&Bg^wJ*+d5&pp--m7U$Ml)UoHiD>X^qjF0AKO zE$dqGdh%jxuj}WfZ?z~sw>!Uee%$2ai>g*{wfcE2MEt_hgrf!(UB6oY$+LAto-cio zY&Yk;^u~)5@9%W0Td&o(wrPW3Vbjkm@z=tq>V|f5D0bY+YhpjP#Lh5g3G3zsbDo*p z6A*PeoTuH;wlnDO;-!U~o1@}(>s{~D^Y72{x&KMq_<4@0%)-5|zkf;>wYq8kwnclw zjyX|`)7P)~x5vJFqNvH9_MPVLo1e5^=z2LJ^LVh&^63l*pB!q6+keZf@$gT>sk4y|L*IP?C{oVdbpG8+;jQl zdw%Wt*`hwxW#L^}FMh@xT&u?3*<#w&cqCgScFBCt_n)Lvuc&(VEZy_#S;mwHU(WNz S9h)}ih{V-3??0YqU;qHN- \ 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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 biw*YwPhS2u%jS>Je~$O>OG*M57#J7;XWC>M diff --git a/templates/partials/nav.html b/templates/partials/nav.html index 3d99fa9..82d5976 100644 --- a/templates/partials/nav.html +++ b/templates/partials/nav.html @@ -8,18 +8,19 @@ {% 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'); + } +});