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

Fix dark & light mode flicker (#28)

Browse Source 
Fix dark & light mode flicker (#28)
This commit is contained in:
Mahendrata Harpi
2020-09-16 10:25:51 +07:00
committed by GitHub
parent fefff75774 484d30b622
commit 50166dee4d
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 " }}"> <html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %} {% 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 %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
<main aria-label="Content"> <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 " }}"> <html lang="{{ page.lang | default: site.lang | default: " en " }}">
{% include header.html %} {% 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 %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
{% include author.html %} {% include author.html %}

22
_layouts/page.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %} {% 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 %} {% include navbar.html %}
<div class="wrapper"> <div class="wrapper">
<header class="header"> <header class="header">

22
_layouts/post.html
View File

@@ -7,7 +7,27 @@ layout: compress
{% include header.html %} {% 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 %} {% include navbar.html %}
<div class="wrapper post"> <div class="wrapper post">
<main class="page-content" aria-label="Content"> <main class="page-content" aria-label="Content">

8
_sass/klise/_base.scss
View File

@@ -7,6 +7,14 @@
transition: background-color 75ms ease-in, border-color 75ms ease-in; 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 { html {
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;

13
assets/js/main.js
View File

@@ -2,17 +2,6 @@
// Theme switch // Theme switch
const body = document.body; const body = document.body;
const lamp = document.getElementById("mode"); 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) => { const toggleTheme = (state) => {
if (state === "dark") { if (state === "dark") {
@@ -26,8 +15,6 @@
} }
}; };
initTheme(localStorage.getItem("theme"));
lamp.addEventListener("click", () => lamp.addEventListener("click", () =>
toggleTheme(localStorage.getItem("theme")) toggleTheme(localStorage.getItem("theme"))
); );