Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 02:45:54 +01:00
Code Issues Packages Projects Releases Activity

feat(share): automatic light/dark mode

Browse Source
This commit is contained in:
Elian Doran
2025-06-09 19:38:44 +03:00
parent 0cba323091
commit 02fe7c97ca
3 changed files with 17 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,29 @@
const preference = localStorage.getItem("theme");
if (preference) {
if (preference === "dark") {
document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light");
}
else {
document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light");
}
const prefersDark = localStorage.getItem("theme") === "dark" || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (prefersDark) {
document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light");
} else {
document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light");
}
export default function setupThemeSelector() {
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
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);
}
const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
themeSelection.classList.add("no-transition");
themeSwitch.checked = prefersDark;
setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
themeSwitch?.addEventListener("change", () => {
if (themeSwitch.checked) {
document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light");
localStorage.setItem("theme", "dark");
}
else {
} else {
document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light");
localStorage.setItem("theme", "light");
}
});
}
}

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

@@ -106,19 +106,6 @@ content = content.replaceAll(headingRe, (...match) => {
});
%>
<body data-note-id="<%= note.noteId %>" class="type-<%= note.type %><%= themeClass %>" data-ancestor-note-id="<%= subRoot.note.noteId %>">
<script>
const preference = localStorage.getItem("theme");
if (preference) {
if (preference === "dark") {
document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light");
}
else {
document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light");
}
}
</script>
<div id="mobile-header">
<a href="<%= shareRootLink %>">
<img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />