Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 18:39:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Make reloading in light theme less janky

Browse Source
This commit is contained in:
Zerebos 2024-06-08 15:21:59 -04:00
parent 81e986db30
commit 01a8d0f864
No known key found for this signature in database
GPG Key ID: 79BE50E3D28D5686
4 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scripts/index.ts
View File

@ -14,9 +14,10 @@ function $try<T extends (...a: unknown[]) => 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);

9
src/scripts/modules/theme.ts
View File

@ -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");

13
src/styles/navbar/header.css
View File

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

13
src/templates/page.ejs
View File

@ -105,6 +105,19 @@ 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 %>">
<% if (subRoot.note.hasRelation("shareLogo")) { %>