From ce49f1dc96c59c7f4f786d376e12b4fa5e64e050 Mon Sep 17 00:00:00 2001 From: Oliver Booth Date: Thu, 31 Oct 2024 12:55:29 +0000 Subject: [PATCH] style: change favicon based on light/dark theme switch --- OliverBooth/Pages/Shared/_Layout.cshtml | 2 ++ src/img/favicon-dark.png | Bin 0 -> 4334 bytes src/ts/app.ts | 10 ++++++++++ 3 files changed, 12 insertions(+) create mode 100644 src/img/favicon-dark.png diff --git a/OliverBooth/Pages/Shared/_Layout.cshtml b/OliverBooth/Pages/Shared/_Layout.cshtml index fc5c87b..ea92463 100644 --- a/OliverBooth/Pages/Shared/_Layout.cshtml +++ b/OliverBooth/Pages/Shared/_Layout.cshtml @@ -48,6 +48,8 @@ } + + diff --git a/src/img/favicon-dark.png b/src/img/favicon-dark.png new file mode 100644 index 0000000000000000000000000000000000000000..67c407746bea97434096641cc1c0ad5d1458dc5c GIT binary patch literal 4334 zcmV{QNdN^Q0+}E+DkVUGgd_wACCR(~ao)%K@^R1E-Fx?z z?}gvY&b;^CyL->>p1XI;*|Qxwj>gebwT8=uf6tEJo1~3#@6<8Zs5m*)& z0Q3bKg|P_u82AwQ0GI*%7kCSp4!jJ^ElYR}*9-2Y06mbtNCj^NYzk})Yy=Dg`bB!i z2f#F7GVl!WK-d2ZBc&gO4xdjz4`~5b1$IX&eKarxdF#t$I&e!@c(9BII_oz{5@%>* zHUUlmCISn9q(;8^4nQy9*=?STr=A2jQl<$k7S>7`QNFK0c!- zb^?b07m)u=`ve)HosBfTn1Ru5|t>!tu(Ix>;~?<1dw zFIb#&vCD0nv`BSQfQ^vKwKDNKV%hTrpJxCthrqr-T@+v?#Hhlm{Qn{A=XGK!a4;*nVec$DzUuc{R|*N|mG^Nm$0z)-{# z%PO?GtmLhV{jK*2XOt}S7KSYI5i4b&It6&j5HLYHSao1E;7!~W{4Zb}VvLb?{fd(1 z2AHbIk^uWRZmL27PBsKffXj1cJQhQc4yYyT%QO`xGW<)suZk(_pDD5=h;~@mT!r7r*iMHrAWOvYb&xWR?cNBfUD`R%c|ae*m9nk5@$KY z7$xog?TZ&Vm1h-s5@dH$sR}UO5GFyI&pL1pww$La@eWh&pF;+7?MPgx$dmxzhw>C) zS>RJcm??4dotZJ%m2dUtH9NftMx3GYseuh}#$O_LUazL*jW9 z%fspDdE2RI1-ROH_^ZX`IfzTqWpp`UxX6fmd_nStav-{lhZm^;LlI9F+QSblG~3;b zMJ8yj=ktp)!wvb~MBZ?XuN!e+qudohiyhJByr4)0u$Fqudi%FddG_$8>k|zbU6VIj z=PChqjh2J_Y=$o9Ek!9nFQk{LJ@~M~vn`~p-yhX=ZG<78Yn$~MMqJebw<4^5*gZul zfVI{?pZLCZH11A${uW)=?lokzwwGC-4OiSM7>eG>omi9tq!oN4{IU2v1Jb*1ZH1Chtp96F03PxetyDVDU&uwS$e{|b z9JVc=xl=VVX$sH>eg5HZi0xk**P?Iqn2k&&*Oh+gGm;BjkwX<=2lTb?$%vIrS+r() z5z>tBsobx1{*J~T*Z%-9!>%g>(bro(aYYVY$r^23yEQPayrgx=#?WLD+r;Zg3((4N zQg+icaRV~TSZ4;H`y>9?6*;s8NZog?yFLMy9wL9%6^CeNh@n0Zs|5cCWVF}WAVO7MRX!f z?+nCd?{Q?_;yJ`WX4PJUPgSuM62HQ{rmo-Hq^@rh8Wa_CX9= zot@*#l$^ zC&Vg%E{-ssHNsW5A)kQZ#T6+3(_ljufxz9r6N$NgoVEOuF>a=1-Ne=4}^*LM`qA6Z~Y zV;VBdDjOeL{5zWdJ`eFxWKpJp=Yfd5VP3R)alifeXLt?ZOUktuJ=2IyhyomfJ&(I|FOjx1|0d$o$P3?zAWcI*p&A7kh~6ss(1{#Q)i{u{3|2F)IhSoy z&=lZ)0&E0*6+qhtwSa02C6`9Gf|-Zyi)aGkuizK4g>vv!<@eVSXH=nSt*%_VHzXln z1<*9A(d#T5%L?WlWXss2Ex*r3j-A;bnZ7QYQOfVn5^mM2z5NLR-+%D$130ZqOJ*Q? zr)nNi1b70)MIQyYU3=&N>*Wk^r6VVs2Y0le{50L{9z7uD>NwVX~g?@Q1e zK9$XQgjeC78(RI^*g>HwCtF~yhV(cQ|wMfkkK7}8t6`N+&* z5P21#FV!f3X8Z}&txag0iEg*w*uWZsrc8Gt9pE5*6+oNq>q9keQY>qrx_Bl5`R-d= zr*p7JUiDbvV?Z3ieP!{1F>fjK5`mNy2bJ$#09QOEUVxT&^uRadZrPR<(1!q zX2A;LLhNDcNrbPTj3<54?sD?xIbdIa<`VXSTmoc6+oSNK3S?>K8|ZI-Lbge&-sm3L z()t985vv6NeF0@1Y-5Ka7^M9EUYSC)uoP|&DOsFn?nAm?qZ{zF{Wl3{0W6oKWqt+* zBBPQtIV``wMRSfKQzKlFF&hI#8v=pBZA*9lsN3A$gmLIOsXhc$K$?A zc6*5lDe1jO;2c711<(#FEOU$ap^6L(kj;{1u>$VnaYtlKTXS`LcxXbg6=0N+*|8Zj z8_L7DzfJi9r}Cf@>Cnw$IkvnE!A0-TZ}U?YU?$IHqZ zi1UZ{kximyo!z${`W!?fjLMPzmMQ6VBKgfk5el$Vija+Pa#lezVr{pI&9aDLj8*x0 zS4NLXN%MDk5-dUimPL1+_H-U$Yt9qcm4ADLXB^Oy=4<3Mxhp~ez&S?!K9EI!!ZIlT|~0i(UDP&>b~pVI;QemmrE#fR&J4!D$6Di|WtQ zjYZlwxiuV6nRFf$r2vq=P|*mxm6E$+(PkW*LlrJ^gD6q~jzlk*iKXPOIKGR!@~^H; zx&Vq)fWg>@GH+H!1`A*h+?D@$Wzq#wqym6GEt}ANgj+kYFYd~J1>5MeRuruOX=nE~ zLMINB<(e@Tcjdo>?fSKL6s-VYAF_N+p}C94c-)o$F|rQPR+OOtuHJIpCx(v4UHP5p zK7MLV84Az~X&SY{vkqpe8tats=1`~O;)5td0l*#-CRFE6*5U^ID!)oo^W2oB0R7NU zuuh1vfgv8l5Lc=`mA`jIGDf2;1pwK*ZWZS7MPx9Lk;q=U9^LFWQ>FrdSO;qbx`=8v zk~Z+^=_iPxr*%MPTT!+GY=>RA-ac$2(t$W@@TvTn=stMblCl*5WXrNu$Yoj$Z4OLv z$kW_Usj`JCgenxEKjKx)D(q45vZ!)6Zu`APc!+F1`)f}X3IKBIrd8l`DQ=p07-BH$ zQ}GFHvZ|MrsuTd=EbM}RnSf1>o{YoY`ZR|VBR{`(RH*7gEafW)^D+OKy@?gAQk_r zN4m}7th||NH(Yhw;ZwmK9l2cqZI6C%Vk@^JCef1-bL)kOca1d>E2A9{r->m#y@E^x zWpbz5&N%D0gchK|K7_rk39{wer}ePHWwen6Pi*S&320^v`6@FcOape0DSSIpHw6G` z!t=h>u5dQhoMTWs>Zkx9^XmIIyB^sLL?WmjQ?}j7BVQ2O-DOEJW51UO;>kKTNp0^(7Kl{dy_D c7xY~I56mCS*ccKfxc~qF07*qoM6N<$g4op(EdT%j literal 0 HcmV?d00001 diff --git a/src/ts/app.ts b/src/ts/app.ts index c370eea..319f8e1 100644 --- a/src/ts/app.ts +++ b/src/ts/app.ts @@ -69,4 +69,14 @@ declare const lucide: any; } }); } + + function setFavicon() { + const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; + const favicon = document.querySelector("link[rel~=\"icon\"]"); + // @ts-ignore + favicon.href = `/img/${darkMode ? "favicon-dark.png" : "favicon.png"}`; + } + + setFavicon(); + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", setFavicon); })();