Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 21:11:30 +08:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
3 changed files with 17 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,32 +1,26 @@
const preference = localStorage.getItem("theme"); const prefersDark = localStorage.getItem("theme") === "dark" || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (preference) { if (prefersDark) {
if (preference === "dark") {
document.body.classList.add("theme-dark"); document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light"); document.body.classList.remove("theme-light");
} } else {
else {
document.body.classList.remove("theme-dark"); document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light"); document.body.classList.add("theme-light");
}
} }
export default function setupThemeSelector() { export default function setupThemeSelector() {
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!; const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
if (preference) {
const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!; const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
themeSelection.classList.add("no-transition"); themeSelection.classList.add("no-transition");
themeSwitch.checked = preference === "dark"; themeSwitch.checked = prefersDark;
setTimeout(() => themeSelection.classList.remove("no-transition"), 400); setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
}
themeSwitch?.addEventListener("change", () => { themeSwitch?.addEventListener("change", () => {
if (themeSwitch.checked) { if (themeSwitch.checked) {
document.body.classList.add("theme-dark"); document.body.classList.add("theme-dark");
document.body.classList.remove("theme-light"); document.body.classList.remove("theme-light");
localStorage.setItem("theme", "dark"); localStorage.setItem("theme", "dark");
} } else {
else {
document.body.classList.remove("theme-dark"); document.body.classList.remove("theme-dark");
document.body.classList.add("theme-light"); document.body.classList.add("theme-light");
localStorage.setItem("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 %>"> <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"> <div id="mobile-header">
<a href="<%= shareRootLink %>"> <a href="<%= shareRootLink %>">
<img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" /> <img src="<%= logoUrl %>" width="32" height="<%= mobileLogoHeight %>" alt="Logo" />

17
pnpm-lock.yaml generated
View File

@ -198,6 +198,9 @@ importers:
'@triliumnext/highlightjs': '@triliumnext/highlightjs':
specifier: workspace:* specifier: workspace:*
version: link:../../packages/highlightjs version: link:../../packages/highlightjs
'@triliumnext/share-theme':
specifier: workspace:*
version: link:../../packages/share-theme
autocomplete.js: autocomplete.js:
specifier: 0.38.1 specifier: 0.38.1
version: 0.38.1 version: 0.38.1
@ -1279,9 +1282,6 @@ importers:
'@digitak/esrun': '@digitak/esrun':
specifier: ^3.2.24 specifier: ^3.2.24
version: 3.2.26 version: 3.2.26
'@digitalmaas/esbuild-plugin-ejs':
specifier: 1.0.0
version: 1.0.0(esbuild@0.25.5)
'@types/swagger-ui': '@types/swagger-ui':
specifier: ^3.52.0 specifier: ^3.52.0
version: 3.52.4 version: 3.52.4
@ -2326,12 +2326,6 @@ packages:
'@digitak/grubber@3.1.4': '@digitak/grubber@3.1.4':
resolution: {integrity: sha512-pqsnp2BUYlDoTXWG34HWgEJse/Eo1okRgNex8IG84wHrJp8h3SakeR5WhB4VxSA2+/D+frNYJ0ch3yXzsfNDoA==} resolution: {integrity: sha512-pqsnp2BUYlDoTXWG34HWgEJse/Eo1okRgNex8IG84wHrJp8h3SakeR5WhB4VxSA2+/D+frNYJ0ch3yXzsfNDoA==}
'@digitalmaas/esbuild-plugin-ejs@1.0.0':
resolution: {integrity: sha512-R6FHotduWyXExphqMJuv0CK42ZCt5Z+gZATFOXvL/lVHLyRVRdTlZqvKyP6DRCQVGz9ecYpk++AWhRzkNODKwQ==}
engines: {node: '>=14'}
peerDependencies:
esbuild: '>=0.25.0'
'@dual-bundle/import-meta-resolve@4.1.0': '@dual-bundle/import-meta-resolve@4.1.0':
resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==} resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==}
@ -14968,11 +14962,6 @@ snapshots:
'@digitak/grubber@3.1.4': {} '@digitak/grubber@3.1.4': {}
'@digitalmaas/esbuild-plugin-ejs@1.0.0(esbuild@0.25.5)':
dependencies:
ejs: 3.1.10
esbuild: 0.25.5
'@dual-bundle/import-meta-resolve@4.1.0': {} '@dual-bundle/import-meta-resolve@4.1.0': {}
'@electron-forge/cli@7.8.1(encoding@0.1.13)': '@electron-forge/cli@7.8.1(encoding@0.1.13)':