minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-31 18:04:52 +03:00
Code Activity

Light/dark mode: avoid flickering on page reload (#995)

Browse Source 
**Current behaviour:**


https://github.com/minio/docs/assets/13393018/1c8b5762-9ee5-45ec-9e44-88f99c1750dd

**Fix:**


https://github.com/minio/docs/assets/13393018/658f7858-d793-40ca-87de-8f519a12dffa
This commit is contained in:
Rushan
2023-09-11 13:30:27 +00:00
committed by GitHub
parent 0e917c2fad
commit d54b54cafa
4 changed files with 21 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
source/_static/js/main.js
View File

@ -74,17 +74,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
// -------------------------------------------------- // --------------------------------------------------
(function () { (function () {
const readModeEl = document.getElementById("read-mode-toggle"); const readModeEl = document.getElementById("read-mode-toggle");
const headerEl = document.querySelector(".header");
// Check if the read mode in enabled in user's local storage
if (readModeLs === "true") {
document.documentElement.classList.add("read-mode");
readModeEl.classList.add("active");
}
// Make header visible after the page is loaded and read-mode is decided.
// This is to prevent the flickering of the header on page load.
headerEl.classList.remove("inactive");
// Toggle read mode on icon click // Toggle read mode on icon click
readModeEl.addEventListener("click", (event) => { readModeEl.addEventListener("click", (event) => {
@ -136,13 +125,6 @@ window.addEventListener("DOMContentLoaded", (event) => {
// -------------------------------------------------- // --------------------------------------------------
(function () { (function () {
const darkModeEl = document.getElementById("dark-mode-toggle"); const darkModeEl = document.getElementById("dark-mode-toggle");
var darkModeLs = localStorage.getItem("dark-mode");
// Check if the dark mode in enabled in user's local storage
if (darkModeLs === "true") {
document.documentElement.classList.add("dark-mode");
darkModeEl.classList.add("active");
}
darkModeEl.addEventListener("click", (event) => { darkModeEl.addEventListener("click", (event) => {
document.documentElement.classList.toggle("dark-mode"); document.documentElement.classList.toggle("dark-mode");

4
source/_static/scss/includes/_header.scss
View File

@ -8,10 +8,6 @@
& > .container { & > .container {
position: relative; position: relative;
} }
&.inactive {
display: none;
}
} }
.header__top { .header__top {

20
source/_templates/custom-scripts.html Normal file
View File

@ -0,0 +1,20 @@
<script>
// Dark mode and read mode detection
// Dark mode
var isDarkMode = localStorage.getItem("dark-mode");
var dmToggleBtn = document.getElementById("dark-mode-toggle");
if (isDarkMode === "true") {
document.documentElement.classList.add("dark-mode");
dmToggleBtn.classList.add("active");
}
// Read mode
var isReadMode = localStorage.getItem("read-mode");
var rmToggleBtn = document.getElementById("read-mode-toggle");
if (isReadMode === "true") {
document.documentElement.classList.add("read-mode");
rmToggleBtn.classList.add("active");
}
</script>

1
source/_templates/layout.html
View File

@ -93,4 +93,5 @@
{%- block footer %} {%- block footer %}
{%- include "cookie.html" %} {%- include "cookie.html" %}
{%- include "custom-scripts.html" %}
{%- endblock %} {%- endblock %}