teuserer/www.netz39.de
1
0
Fork 0
mirror of https://github.com/netz39/www.netz39.de.git synced 2025-05-17 10:07:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'sylhare/Type-on-Strap'

Browse source
This commit is contained in:
MG-5 2024-03-27 04:13:48 +01:00 • committed by MG-5
parent abb4d6b8e3
commit a8c4c41aaf
91 changed files with 9399 additions and 16125 deletions
assets/js/partials
dark-mode.js

47
assets/js/partials/dark-mode.js
View file

@ -1,48 +1,57 @@
/* @preserve Dark mode Init */
/*
* There are two color palettes on CSS for the data-theme: 'light' and 'dark'.
* Initially the script check if a theme is set in session storage and
* There are two colour palettes on CSS for the data-theme: 'light' and 'dark'.
* Initially the script checks if a theme is set in session storage and
* alternatively listens to a MediaQuery callback looking for "prefers-color-scheme: dark".
*
* The variables darkBtn and lightBtn are defined in head.liquid from the _data/translations.yml
* The isAutoTheme is defined in head.liquid from the _config.yml
*/
const themeButton = {
'light': '<i class="fas fa-adjust" aria-hidden="true"></i>',
'dark': '<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i>'
'light': `<i class="fas fa-adjust" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${darkBtn}</span>`,
'dark': `<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i><span class="navbar-label-with-icon"> ${lightBtn}</span>`
};
function currentTheme(){
return localStorage.getItem('theme');
}
const currentTheme = () => sessionStorage.getItem('theme')
function setMode(theme) {
document.documentElement.setAttribute('data-theme', theme)
sessionStorage.setItem('theme', theme)
const toggle = document.getElementById('theme-toggle')
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
const toggle = document.getElementById('theme-toggle');
if (toggle) {
toggle.innerHTML = themeButton[theme]
toggle.innerHTML = themeButton[theme];
}
}
function themeToggle() {
let sessionPrefers = currentTheme()
let sessionPrefers = currentTheme();
if (sessionPrefers === 'light') {
setMode('dark')
setMode('dark');
} else {
setMode('light')
setMode('light');
}
}
window.onload = function bootstrapTheme() {
function bootstrapTheme() {
if (isAutoTheme) {
if (!currentTheme()) {
// Load browser's preference
let browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (browserPrefersDark.matches) sessionStorage.setItem('theme', 'dark');
if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark');
browserPrefersDark.addEventListener('change', () => {
if (browserPrefersDark.matches) sessionStorage.setItem('theme', 'dark')
if (browserPrefersDark.matches) localStorage.setItem('theme', 'dark');
});
}
// Load theme
let sessionPrefers = currentTheme()
setMode(sessionPrefers ? sessionPrefers : 'light')
let sessionPrefers = currentTheme();
setMode(sessionPrefers ? sessionPrefers : 'light');
}
}
// Init
(function () {
bootstrapTheme();
})()