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

feat: theme switch web component

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-27 13:47:04 -08:00
parent d4dda8061e
commit d2f00d4ca0
No known key found for this signature in database
6 changed files with 82 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/assets/scripts/components/theme-toggle.js Normal file
View file

@ -0,0 +1,61 @@
const themeToggleTemplate = document.createElement('template')
themeToggleTemplate.innerHTML = `
<button class="theme__toggle">
<span class="placeholder"></span>
<span class="light"></span>
<span class="dark"></span>
</button>
`
themeToggleTemplate.id = "theme-toggle-template"
if (!document.getElementById(themeToggleTemplate.id)) document.body.appendChild(themeToggleTemplate)
class ThemeToggle extends HTMLElement {
static register(tagName) {
if ("customElements" in window) customElements.define(tagName || "theme-toggle", ThemeToggle)
}
async connectedCallback() {
this.append(this.template)
const btn = this.querySelector('.theme__toggle')
const setTheme = (isOnLoad) => {
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 (isOnLoad) {
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)
}
setTheme(true);
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light')
document.body.classList.toggle('theme__dark')
setTheme()
})
}
get template() {
return document.getElementById(themeToggleTemplate.id).content.cloneNode(true)
}
}
ThemeToggle.register()

20
src/assets/scripts/theme-handler.js
View file

@ -1,20 +0,0 @@
;(async function() {
const btn = document.querySelector('.theme__toggle');
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 {
theme = document.body.classList.contains('theme__dark') ? 'dark' : 'light';
}
localStorage?.setItem('theme', theme);
});
})()

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

@ -1,24 +0,0 @@
;(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);
})()