| 60 | initTheme() |
| 61 | |
| 62 | function themeFieldChanged() { |
| 63 | var theme_key = themeField.value |
| 64 | |
| 65 | var body = document.querySelector("body") |
| 66 | body.classList.remove(...THEMES.map((theme) => theme.key)) |
| 67 | body.classList.add(theme_key) |
| 68 | |
| 69 | // |
| 70 | |
| 71 | body.style = "" |
| 72 | var theme = THEMES.find((t) => t.key == theme_key) |
| 73 | let borderColor = undefined |
| 74 | if (theme) { |
| 75 | borderColor = theme.rule.style.getPropertyValue("--input-border-color").trim() |
| 76 | if (!borderColor.startsWith("#")) { |
| 77 | borderColor = theme.rule.style.getPropertyValue("--theme-color-fallback") |
| 78 | } |
| 79 | } else { |
| 80 | borderColor = DEFAULT_THEME.rule.style.getPropertyValue("--theme-color-fallback") |
| 81 | } |
| 82 | document.querySelector('meta[name="theme-color"]').setAttribute("content", borderColor) |
| 83 | } |
| 84 | |
| 85 | themeField.addEventListener("change", themeFieldChanged) |