feat: theme switch web component
This commit is contained in:
Cory Dransfeldt
parent
d4dda8061e
commit
d2f00d4ca0
6 changed files with 82 additions and 79 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "coryd.dev",
|
"name": "coryd.dev",
|
||||||
"version": "6.5.14",
|
"version": "6.6.0",
|
||||||
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
|
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,7 @@
|
||||||
<meta property="og:url" content="{{ fullUrl }}" />
|
<meta property="og:url" content="{{ fullUrl }}" />
|
||||||
<meta
|
<meta
|
||||||
property="og:image"
|
property="og:image"
|
||||||
content="{%- if schema == 'blog' %}{{ meta.url }}/assets/img/social-preview/{{
|
content="{%- if schema == 'blog' %}{{ meta.url }}/assets/img/social-preview/{{ title | slugify }}-preview.jpeg{%- else -%}{{ meta.meta_data.opengraph_default }}{% endif -%}"
|
||||||
title | slugify
|
|
||||||
}}-preview.jpeg{%- else -%}{{ meta.meta_data.opengraph_default }}{% endif -%}"
|
|
||||||
/>
|
/>
|
||||||
<meta property="og:image" content="{{ image | getPostImage }}">
|
<meta property="og:image" content="{{ image | getPostImage }}">
|
||||||
<meta name="theme-color" content="{{ meta.themeColor }}" />
|
<meta name="theme-color" content="{{ meta.themeColor }}" />
|
||||||
|
|
@ -82,28 +80,10 @@
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<script defer data-domain="coryd.dev" src="/js/script.js"></script>
|
<script defer data-domain="coryd.dev" src="/js/script.js"></script>
|
||||||
<script>
|
<script>window.plausible = window.plausible || function() {(window.plausible.q = window.plausible.q || []).push(arguments)}</script>
|
||||||
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
|
|
||||||
</script>
|
|
||||||
<noscript>
|
<noscript>
|
||||||
<style>
|
<style>.client-side {display:none}</style>
|
||||||
.client-side {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</noscript>
|
</noscript>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>{{ content }}</body>
|
||||||
{% capture theme %}
|
|
||||||
{% render "../assets/scripts/theme.js" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<script>{{ theme }}</script>
|
|
||||||
{{ content }}
|
|
||||||
{% capture js %}
|
|
||||||
{% render "../assets/scripts/theme-handler.js" %}
|
|
||||||
{% endcapture %}
|
|
||||||
<script>
|
|
||||||
{{ js }}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,11 +1,17 @@
|
||||||
<li class="theme__toggle client-side">
|
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
|
||||||
<span class="placeholder">
|
<template id="theme-toggle-template">
|
||||||
{% tablericon "placeholder" "Toggle theme placeholder" %}
|
<div class="theme__toggle">
|
||||||
</span>
|
<span class="placeholder">
|
||||||
<span class="light">
|
{% tablericon "placeholder" "Toggle theme placeholder" %}
|
||||||
{% tablericon "sun" "Toggle light theme" %}
|
</span>
|
||||||
</span>
|
<span class="light">
|
||||||
<span class="dark">
|
{% tablericon "sun" "Toggle light theme" %}
|
||||||
{% tablericon "moon" "Toggle dark theme" %}
|
</span>
|
||||||
</span>
|
<span class="dark">
|
||||||
|
{% tablericon "moon" "Toggle dark theme" %}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<li class="client-side">
|
||||||
|
<theme-toggle></theme-toggle>
|
||||||
</li>
|
</li>
|
||||||
61
src/assets/scripts/components/theme-toggle.js
Normal file
61
src/assets/scripts/components/theme-toggle.js
Normal 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()
|
||||||
|
|
@ -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);
|
|
||||||
});
|
|
||||||
})()
|
|
||||||
|
|
@ -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);
|
|
||||||
})()
|
|
||||||
Reference in a new issue