cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: theme flash

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-17 20:02:25 -08:00
parent cf99fba91c
commit 422ac5fb79
No known key found for this signature in database
5 changed files with 78 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/assets/scripts/index.js
View file

@ -42,26 +42,16 @@ if (window.location.hostname !== 'localhost') {
;(async function() {
const btn = document.querySelector('.theme__toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = localStorage?.getItem('theme');
let theme;
if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (currentTheme === 'dark') {
document.body.classList.toggle('theme__dark');
} else if (currentTheme === 'light') {
document.body.classList.toggle('theme__light');
} else if (prefersDarkScheme) {
document.body.classList.toggle('theme__dark');
} else if (!prefersDarkScheme) {
document.body.classList.toggle('theme__light');
}
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = localStorage?.getItem('theme');
let theme;
if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (prefersDarkScheme) {
theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
} else {

24
src/assets/scripts/theme.js Normal file
View file

@ -0,0 +1,24 @@
;(function() {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentTheme = localStorage?.getItem('theme');
let theme;
if (!currentTheme) localStorage?.setItem('theme', (prefersDarkScheme ? 'dark' : 'light'))
if (currentTheme === 'dark') {
document.body.classList.add('theme__dark');
} else if (currentTheme === 'light') {
document.body.classList.add('theme__light');
} else if (prefersDarkScheme) {
document.body.classList.add('theme__dark');
} else if (!prefersDarkScheme) {
document.body.classList.add('theme__light');
}
if (prefersDarkScheme) {
theme = document.body.classList.contains('theme__light') ? 'light' : 'dark';
} else {
theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
}
localStorage?.setItem('theme', theme);
})()