diff --git a/packages/share-theme/src/scripts/modules/theme.ts b/packages/share-theme/src/scripts/modules/theme.ts
index 16ae943af..466a042a7 100644
--- a/packages/share-theme/src/scripts/modules/theme.ts
+++ b/packages/share-theme/src/scripts/modules/theme.ts
@@ -1,13 +1,14 @@
const themeRootEl = document.documentElement;
+/**
+ * Note:
+ *
+ * - Setting of the .theme-dark or .theme-light is done in the share template's to avoid a flash.
+ * - Setting of the value of the checkbox is also done in the template, near the definition of the input box.
+ */
+
export default function setupThemeSelector() {
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
-
- const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
- themeSelection.classList.add("no-transition");
- themeSwitch.checked = (themeRootEl.classList.contains("theme-dark"));
- setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
-
themeSwitch?.addEventListener("change", () => {
const theme = themeSwitch.checked ? "dark" : "light";
setTheme(theme);
diff --git a/packages/share-theme/src/styles/navbar/header.css b/packages/share-theme/src/styles/navbar/header.css
index 21eecb6e9..0cb93c2c2 100644
--- a/packages/share-theme/src/styles/navbar/header.css
+++ b/packages/share-theme/src/styles/navbar/header.css
@@ -72,14 +72,6 @@ input:checked + .slider:before {
justify-content: space-between;
}
-.theme-selection.no-transition .slider,
-.theme-selection.no-transition .slider::before,
-.theme-selection.no-transition .dark-icon,
-.theme-selection.no-transition .light-icon {
- transition: none!important;
-}
-
-
.theme-selection label {
position: relative;
}
diff --git a/packages/share-theme/src/templates/page.ejs b/packages/share-theme/src/templates/page.ejs
index 78ab2666d..0a7db95b4 100644
--- a/packages/share-theme/src/templates/page.ejs
+++ b/packages/share-theme/src/templates/page.ejs
@@ -63,7 +63,8 @@
document.documentElement.classList.add(`theme-${theme}`);
window.glob = {
- isStatic: <%= !!isStatic %>
+ isStatic: <%= !!isStatic %>,
+ theme
};
@@ -123,6 +124,10 @@ content = content.replaceAll(headingRe, (...match) => {
+
<% if (hasTree) { %>