dbroqua/MusicTopus
2
0
Fork 1
Code Issues 13 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

{WIP} Mise en place des thèmes clair et sombre

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 18:51:23 +01:00
parent 18d4970ebd
commit 118586be47
20 changed files with 223 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

39
views/index.ejs
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="fr">
<html lang="fr" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -107,6 +107,17 @@
setCookie('ariatheme', body.classList.contains("is-accessible"));
}
/**
* Fonction permettant de switcher de thème clair/sombre
* @param {Object} e
*/
function switchTheme(e) {
const theme = e.target.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
setCookie('theme', theme);
}
/**
* Ensemble d'actions effectuées au chargement de la page
*/
@ -126,9 +137,23 @@
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
setAriaTheme(getCookie('ariatheme'));
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);
let currentThemeIsDark = getCookie('theme');
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
console.log('currentThemeIsDark:', currentThemeIsDark);
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
toggleSwitch.checked = currentThemeIsDark === 'dark';
});
console.log('window.matchMedia:', window.matchMedia('(prefers-color-scheme: dark)').matches);
</script>
</head>
<body>
@ -182,9 +207,17 @@
</div>
</div>
<% } %>
<div class="navbar-item apparence">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</div>
</div>
<div class="navbar-item">
<div class="buttons">
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site">
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
<i class="icon-eye"></i>
</button>
<% if ( !user ) { %>