Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-19 00:42:29 +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 console.error(e); // eslint-disable-line no-console
} }
} }
$try(setupThemeSelector);
$try(setupToC); $try(setupToC);
$try(highlight); $try(highlight);
$try(setupExpanders); $try(setupExpanders);
$try(setupMobileMenu); $try(setupMobileMenu);
$try(setupSearch); $try(setupSearch);
$try(setupThemeSelector);

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

@ -12,7 +12,14 @@ if (preference) {
export default function setupThemeSelector() { export default function setupThemeSelector() {
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!; 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", () => { themeSwitch?.addEventListener("change", () => {
if (themeSwitch.checked) { if (themeSwitch.checked) {
document.body.classList.add("theme-dark"); document.body.classList.add("theme-dark");

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

@ -36,7 +36,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: var(--text-primary);; background-color: var(--text-primary);;
transition: .4s; transition: 0.4s;
border-radius: 34px; border-radius: 34px;
} }
@ -48,8 +48,8 @@
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
transition: .4s; transition: 0.4s;
border-radius: 50%; border-radius: 50%;
z-index: 2; z-index: 2;
} }
@ -72,6 +72,13 @@ input:checked + .slider:before {
justify-content: space-between; 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 { .theme-selection label {
position: relative; 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 %>"> <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 %>">
<% if (subRoot.note.hasRelation("shareLogo")) { %> <% if (subRoot.note.hasRelation("shareLogo")) { %>