diff --git a/src/web/App.mjs b/src/web/App.mjs index bb8d8c9a..1039b7b2 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -492,8 +492,9 @@ class App { } catch (err) {} } + // Read in theme from URI params if (this.uriParams.theme) { - document.querySelector(":root").className = this.uriParams.theme; + this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme)); } this.autoBakePause = false; diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs index a19c6066..5ef517d4 100755 --- a/src/web/waiters/OptionsWaiter.mjs +++ b/src/web/waiters/OptionsWaiter.mjs @@ -153,14 +153,28 @@ class OptionsWaiter { /** - * Changes the theme by setting the class of the element. + * Theme change event listener * * @param {Event} e */ themeChange(e) { const themeClass = e.target.value; - document.querySelector(":root").className = themeClass; + this.changeTheme(themeClass); + } + + + /** + * Changes the theme by setting the class of the element. + * + * @param (string} theme + */ + changeTheme(theme) { + document.querySelector(":root").className = theme; + + // Update theme selection + const themeSelect = document.getElementById("theme"); + themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index; }