13hannes11/hugo-coder-timeline
1
0
Fork 0
mirror of https://github.com/13hannes11/hugo-coder-timeline.git synced 2024-09-04 00:50:58 +02:00
Code Issues Projects Releases Wiki Activity

Add theme toggle button feature (#358)

Browse Source 
* Add theme toggle button feature

* Add theme toggle button feature

* Replaced svg icon with FA icon + fixed indentation + refactored css

* Added back colorsheme configurations + script moved to be process by hugo pipe

* Make release

* Fix toggle button not working when loading new page + setTheme() refactor

* Make release

* Update exampleSite/config.toml

Co-authored-by: Luiz F. A. de Prá <luizdepra@users.noreply.github.com>
This commit is contained in:
Clément Pannetier
2020-08-11 20:51:13 +02:00
committed by GitHub
parent b3237d1ead
commit be7b79af62
12 changed files with 103 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
exampleSite/assets/js/dark-mode.js Normal file
View File

@@ -0,0 +1,28 @@
const body = document.body;
const darkModeToggle = document.getElementById('dark-mode-toggle');
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
// Check if user preference is set, if not check value of body class for light or dark else it means that colorsheme = auto
if (localStorage.getItem("colorscheme")) {
setTheme(localStorage.getItem("colorscheme"));
} else if (body.classList.contains('colorscheme-light') || body.classList.contains('colorscheme-dark')) {
setTheme(body.classList.contains("colorscheme-dark") ? "dark" : "light");
} else {
setTheme(darkModeMediaQuery.matches ? "dark" : "light");
}
darkModeToggle.addEventListener('click', () => {
setTheme(body.classList.contains("colorscheme-dark") ? "light" : "dark");
});
darkModeMediaQuery.addListener((event) => {
setTheme(event.matches ? "dark" : "light");
});
function setTheme(theme) {
body.classList.remove('colorscheme-auto');
inverse = theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('colorscheme', theme);
body.classList.remove('colorscheme-' + inverse);
body.classList.add('colorscheme-' + theme);
}