diff options
| author | Francesco <tomaselli.fr@gmail.com> | 2024-04-23 16:38:35 +0200 |
|---|---|---|
| committer | Francesco <tomaselli.fr@gmail.com> | 2024-04-23 16:38:35 +0200 |
| commit | 4d5d0708aa283cda073a0e244f721af275f153ce (patch) | |
| tree | 2e8111f31b7ca883221f84a10854d26f08f34d61 /layouts | |
| parent | 1ca2dbd5c8bb4cc10a023ab56d077dff9a95c101 (diff) | |
Theme Update
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/404.html | 4 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 46 |
2 files changed, 44 insertions, 6 deletions
diff --git a/layouts/404.html b/layouts/404.html index dd02979..75b031c 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -3,8 +3,8 @@ <div class="not-found"> <div> - <h1> 404 </h1> - <p> You shouldn't be here, click on the header to return to home </p> + <h1> typo? </h1> + <p> Click <a href="/"> here </a> to return to home </p> </div> </div> diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 458589f..524af7f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,7 +9,13 @@ {{ end }} </head> -<body class="light"> +{{ $theme := "auto"}} + +{{ with .Param "theme" }} +{{ $theme = .}} +{{ end }} + +<body class="{{ $theme }}"> <div class="content"> <header> @@ -27,13 +33,45 @@ </body> + <script> - function toggleTheme() { - document.body.classList.toggle('light'); - document.body.classList.toggle('dark'); + function isAuto() { + return document.body.classList.contains("auto"); + } + + function setTheme() { + if (!isAuto()) { + return + } + + console + document.body.classList.remove("auto"); + let cls = "light"; + + console.log + + if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { + cls = "dark"; + } + + document.body.classList.add(cls); + + } + + function invert() { + document.body.classList.toggle("dark"); + document.body.classList.toggle("light"); } + if (isAuto()) { + console.log("Setting invert listener"); + window.matchMedia('(prefers-color-scheme: dark)').addListener(invert); + } + + setTheme(); + + </script> |