diff options
| author | Thomas Voss <mail@thomasvoss.com> | 2024-08-10 01:28:11 +0200 |
|---|---|---|
| committer | Thomas Voss <mail@thomasvoss.com> | 2024-08-10 01:28:11 +0200 |
| commit | 9d02dc16a8a0fc420fad36ed4c61bfcc3ea1518c (patch) | |
| tree | 10f9994918081f08840bd4c1da642218f4b6c621 /templates/base.templ | |
| parent | 32fcd6f170e8d8c77936d477f4e489f03d079375 (diff) | |
Do setting and theme toggling on the frontend
Diffstat (limited to 'templates/base.templ')
| -rw-r--r-- | templates/base.templ | 29 |
1 files changed, 28 insertions, 1 deletions
diff --git a/templates/base.templ b/templates/base.templ index 88a9e77..e6c4a1d 100644 --- a/templates/base.templ +++ b/templates/base.templ @@ -5,12 +5,39 @@ import "git.thomasvoss.com/euro-cash.eu/i18n" templ Base(head, body templ.Component) { {{ p := ctx.Value("printer").(i18n.Printer) }} <!DOCTYPE html> - <html lang={ p.Locale.Bcp } data-theme={ ctx.Value("theme").(string) }> + <html lang={ p.Locale.Bcp }> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link rel="stylesheet" type="text/css" href="/style.css"/> <title>Euro Cash</title> + <script type="text/javascript"> + const validate = theme => + ["light", "dark"].includes(theme) ? theme : "light"; + + const toggle = theme => + theme == "light" ? "dark" : "light"; + + const setTheme = theme => { + localStorage.setItem("theme", theme); + document + .getElementsByTagName("html")[0] + .setAttribute("data-theme", theme); + document + .getElementById(`nav-icon-theme-${theme}`) + .style.display = ''; + document + .getElementById(`nav-icon-theme-${toggle(theme)}`) + .style.display = 'none'; + }; + + document.addEventListener('DOMContentLoaded', _ => { + document.getElementById("theme-button").onclick = () => { + setTheme(toggle(validate(localStorage.getItem("theme")))); + }; + setTheme(validate(localStorage.getItem("theme"))); + }); + </script> if head != nil { @head } |