diff --git a/CHANGELOG.md b/CHANGELOG.md index 4eb5771a..0c88fd98 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,7 @@ time the changelog page groups these bullets by the master commit that added the git: each group shows the commit's short hash and date, and its tag if the commit has one. So a release is simply a tag on master. +- The browser's title bar and toolbar (Safari, and Chrome on Android) now take the color of the selected theme when a page loads instead of staying bright in dark mode; switching the theme on a page already open still needs a reload to update it in Safari - Switching the theme from the theme button now plays a circular reveal that grows out of the button (in browsers that support view transitions and when reduced motion is not requested) - Capped the "no data for this time range" illustration on the timeline page at a sensible width and centered it, instead of letting it stretch across a wide desktop window - Navigating between the top-bar tabs now animates in browsers that support view transitions (Safari 18.2+, Chrome): the blue underline slides to the new tab and the page slides out and in; other browsers navigate as before diff --git a/spybot-web/src/main/resources/static/theme.js b/spybot-web/src/main/resources/static/theme.js index 929329a6..a9deed47 100644 --- a/spybot-web/src/main/resources/static/theme.js +++ b/spybot-web/src/main/resources/static/theme.js @@ -6,6 +6,20 @@ const themeStorageKey = 'tablerTheme' +// Header (navbar) background per theme. Browsers such as Safari tint their title/tab bar with the +// theme-color meta tag, so keep it in sync with the theme instead of leaving the bar bright in dark mode. +const browserThemeColors = {light: '#ffffff', dark: '#1e293b'} + +function setBrowserThemeColor(realTheme) { + let meta = document.querySelector('meta[name="theme-color"]') + if (!meta) { + meta = document.createElement('meta') + meta.name = 'theme-color' + document.head.appendChild(meta) + } + meta.content = browserThemeColors[realTheme] +} + function configureTheme(wantedTheme) { function readTheme(wantedTheme, urlParams, allowedValues) { if (allowedValues.has(wantedTheme)) { @@ -39,6 +53,7 @@ function configureTheme(wantedTheme) { } document.body.setAttribute("data-spybot-theme", theme) + setBrowserThemeColor(realTheme) } console.log("configuring theme")