Siphalor/siphalor.de
1
0
Fork 0
Code Releases Activity

Fix dark light mode flicker

Browse Source
This commit is contained in:
Nicky van Urk
2020-09-14 18:42:29 +02:00
parent fefff75774
commit 484d30b622
6 changed files with 94 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
_layouts/404.html
View File

@@ -6,7 +6,27 @@ layout: compress
<html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %}
<body>
<body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %}
<div class="wrapper">
<main aria-label="Content">

22
_layouts/default.html
View File

@@ -5,7 +5,27 @@ layout: compress
<html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %}
<body data-theme="{{ site.mode }}">
<body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %}
<div class="wrapper">
{% include author.html %}

22
_layouts/page.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %}
<body data-theme="{{ site.mode }}">
<body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %}
<div class="wrapper">
<header class="header">

24
_layouts/post.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %}
<body data-theme="{{ site.mode }}">
<body data-theme="{{ site.mode }}" class="notransition">
<script>
const body = document.body;
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
initTheme(localStorage.getItem("theme"));
setTimeout(() => body.classList.remove("notransition"), 75);
</script>
{% include navbar.html %}
<div class="wrapper post">
<main class="page-content" aria-label="Content">
@@ -55,7 +75,7 @@ layout: compress
</article>
{% if page.comments %}
{% include comments.html%}
{% include comments.html %}
{% endif %}
</main>

8
_sass/klise/_base.scss
View File

@@ -7,6 +7,14 @@
transition: background-color 75ms ease-in, border-color 75ms ease-in;
}
.notransition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
html {
overflow-x: hidden;
width: 100%;

13
assets/js/main.js
View File

@@ -2,17 +2,6 @@
// Theme switch
const body = document.body;
const lamp = document.getElementById("mode");
const data = body.getAttribute("data-theme");
const initTheme = (state) => {
if (state === "dark") {
body.setAttribute("data-theme", "dark");
} else if (state === "light") {
body.removeAttribute("data-theme");
} else {
localStorage.setItem("theme", data);
}
};
const toggleTheme = (state) => {
if (state === "dark") {
@@ -26,8 +15,6 @@
}
};
initTheme(localStorage.getItem("theme"));
lamp.addEventListener("click", () =>
toggleTheme(localStorage.getItem("theme"))
);