michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 22:37:49 +00:00
Code Issues Projects Releases Wiki Activity

Remember chosen theme in localStorage

Browse Source 
This way, the selected theme is kept when changing pages, and for subsequent visits. To prevent flickering, we set the selected theme in a blocking script directly on load. To speed things up further, we now use a `data-theme` attribute instead of classes on the body tag, this way we don't need to wait until the body element is loaded.
This commit is contained in:
Philipp Oppermann
2021-10-17 14:51:00 +02:00
parent 3281df3a41
commit 69917e234c
3 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
blog/static/js/edition-2/main.js
View File

@@ -1,17 +1,21 @@
window.onload = function() {
var container = document.querySelector('#toc-aside');
window.onload = function () {
let theme = localStorage.getItem("theme");
if (theme != null) {
set_theme(theme)
}
let container = document.querySelector('#toc-aside');
if (container != null) {
resize_toc(container);
toc_scroll_position(container);
window.onscroll = function() { toc_scroll_position(container) };
window.onscroll = function () { toc_scroll_position(container) };
}
}
function resize_toc(container) {
var containerHeight = container.clientHeight;
let containerHeight = container.clientHeight;
var resize = function() {
let resize = function () {
if (containerHeight > document.documentElement.clientHeight - 100) {
container.classList.add('coarse');
} else {
@@ -20,8 +24,8 @@ function resize_toc(container) {
};
resize();
var resizeId;
window.onresize = function() {
let resizeId;
window.onresize = function () {
clearTimeout(resizeId);
resizeId = setTimeout(resize, 300);
};
@@ -32,7 +36,6 @@ function toc_scroll_position(container) {
// skip computation if ToC is not visible
return;
}
var items = container.querySelectorAll("li")
// remove active class for all items
for (item of container.querySelectorAll("li")) {
@@ -40,15 +43,15 @@ function toc_scroll_position(container) {
}
// look for active item
var site_offset = document.documentElement.scrollTop;
var current_toc_item = null;
let site_offset = document.documentElement.scrollTop;
let current_toc_item = null;
for (item of container.querySelectorAll("li")) {
if (item.offsetParent === null) {
// skip items that are not visible
continue;
}
var anchor = item.firstElementChild.getAttribute("href");
var heading = document.querySelector(anchor);
let anchor = item.firstElementChild.getAttribute("href");
let heading = document.querySelector(anchor);
if (heading.offsetTop <= (site_offset + document.documentElement.clientHeight / 3)) {
current_toc_item = item;
} else {
@@ -63,25 +66,20 @@ function toc_scroll_position(container) {
}
function toggle_lights() {
var body = document.querySelector("body");
var comment_form = document.querySelector("iframe.giscus-frame");
if (body != null) {
if (body.classList.contains("dark")) {
body.classList.replace("dark", "light");
if (comment_form != null) {
comment_form.contentWindow.postMessage({
giscus: { setConfig: { theme: 'light' } }
}, "https://giscus.app")
}
} else {
body.classList.remove("light");
body.classList.add("dark");
if (comment_form != null) {
comment_form.contentWindow.postMessage({
giscus: { setConfig: { theme: 'dark' } }
}, "https://giscus.app")
}
}
console.log(body)
if (document.documentElement.getAttribute("data-theme") === "dark") {
set_theme("light")
} else {
set_theme("dark")
}
}
function set_theme(theme) {
let comment_form = document.querySelector("iframe.giscus-frame");
document.documentElement.setAttribute("data-theme", theme);
if (comment_form != null) {
comment_form.contentWindow.postMessage({
giscus: { setConfig: { theme: theme } }
}, "https://giscus.app")
}
localStorage.setItem("theme", theme);
}