diff --git a/packages/share-theme/src/scripts/modules/theme.ts b/packages/share-theme/src/scripts/modules/theme.ts index 4017f3b77..39f34341f 100644 --- a/packages/share-theme/src/scripts/modules/theme.ts +++ b/packages/share-theme/src/scripts/modules/theme.ts @@ -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"); } }); -} \ No newline at end of file +} diff --git a/packages/share-theme/src/templates/page.ejs b/packages/share-theme/src/templates/page.ejs index de3e2941c..f112617ee 100644 --- a/packages/share-theme/src/templates/page.ejs +++ b/packages/share-theme/src/templates/page.ejs @@ -106,19 +106,6 @@ content = content.replaceAll(headingRe, (...match) => { }); %> -
Logo diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8e75ae276..9c55af441 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -198,6 +198,9 @@ importers: '@triliumnext/highlightjs': specifier: workspace:* version: link:../../packages/highlightjs + '@triliumnext/share-theme': + specifier: workspace:* + version: link:../../packages/share-theme autocomplete.js: specifier: 0.38.1 version: 0.38.1 @@ -1279,9 +1282,6 @@ importers: '@digitak/esrun': specifier: ^3.2.24 version: 3.2.26 - '@digitalmaas/esbuild-plugin-ejs': - specifier: 1.0.0 - version: 1.0.0(esbuild@0.25.5) '@types/swagger-ui': specifier: ^3.52.0 version: 3.52.4 @@ -2326,12 +2326,6 @@ packages: '@digitak/grubber@3.1.4': 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': resolution: {integrity: sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==} @@ -14968,11 +14962,6 @@ snapshots: '@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': {} '@electron-forge/cli@7.8.1(encoding@0.1.13)':