TriliumNext/Trilium
1
0
Fork 0
mirror of https://github.com/TriliumNext/Trilium.git synced 2025-12-10 03:53:37 -06:00
Code Issues 1.1k Packages Projects Releases 10 Wiki Activity

fix(share): theme toggle flashing while switching between notes

Browse Source
This commit is contained in:
Elian Doran 2025-10-29 19:05:23 +02:00
parent eeec3e440d
commit a317331551
No known key found for this signature in database
3 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/share-theme/src/scripts/modules/theme.ts
View File

@ -1,13 +1,14 @@
const themeRootEl = document.documentElement;
/**
* Note:
*
* - Setting of the .theme-dark or .theme-light is done in the share template's <head> 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);

8
packages/share-theme/src/styles/navbar/header.css
View File

@ -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;
}

7
packages/share-theme/src/templates/page.ejs
View File

@ -63,7 +63,8 @@
document.documentElement.classList.add(`theme-${theme}`);
window.glob = {
isStatic: <%= !!isStatic %>
isStatic: <%= !!isStatic %>,
theme
};
</script>
<!-- HTML Meta Tags -->
@ -123,6 +124,10 @@ content = content.replaceAll(headingRe, (...match) => {
<svg class="dark-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z"></path></svg>
<svg class="light-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path></svg>
</label>
<script>
const el = document.querySelector(".theme-selection input");
el.checked = (glob.theme === "dark");
</script>
</div>
<% if (hasTree) { %>
<div class="search-item">