diff --git a/src/scripts/index.ts b/src/scripts/index.ts index 38f0933b1..6e53929c2 100644 --- a/src/scripts/index.ts +++ b/src/scripts/index.ts @@ -14,9 +14,10 @@ function $try unknown>(func: T, ...args: Paramete console.error(e); // eslint-disable-line no-console } } + +$try(setupThemeSelector); $try(setupToC); $try(highlight); $try(setupExpanders); $try(setupMobileMenu); $try(setupSearch); -$try(setupThemeSelector); diff --git a/src/scripts/modules/theme.ts b/src/scripts/modules/theme.ts index 31d1f0ffd..4017f3b77 100644 --- a/src/scripts/modules/theme.ts +++ b/src/scripts/modules/theme.ts @@ -12,7 +12,14 @@ if (preference) { export default function setupThemeSelector() { const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!; - themeSwitch.checked = preference ? preference === "dark" : true; + + if (preference) { + const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!; + themeSelection.classList.add("no-transition"); + themeSwitch.checked = preference === "dark"; + setTimeout(() => themeSelection.classList.remove("no-transition"), 400); + } + themeSwitch?.addEventListener("change", () => { if (themeSwitch.checked) { document.body.classList.add("theme-dark"); diff --git a/src/styles/navbar/header.css b/src/styles/navbar/header.css index c43c1326c..21eecb6e9 100644 --- a/src/styles/navbar/header.css +++ b/src/styles/navbar/header.css @@ -36,7 +36,7 @@ right: 0; bottom: 0; background-color: var(--text-primary);; - transition: .4s; + transition: 0.4s; border-radius: 34px; } @@ -48,8 +48,8 @@ left: 4px; bottom: 4px; background-color: white; - transition: .4s; - border-radius: 50%; + transition: 0.4s; + border-radius: 50%; z-index: 2; } @@ -72,6 +72,13 @@ 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/src/templates/page.ejs b/src/templates/page.ejs index e41146228..31d1c593d 100644 --- a/src/templates/page.ejs +++ b/src/templates/page.ejs @@ -105,6 +105,19 @@ content = content.replaceAll(headingRe, (...match) => { }); %> +
<% if (subRoot.note.hasRelation("shareLogo")) { %>