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

fix: class names

Browse source
This commit is contained in:
Cory Dransfeldt 2024-04-16 08:43:38 -07:00
parent e935d25c0b
commit 4034a6d942
No known key found for this signature in database
6 changed files with 42 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/posts/2024/adding-a-light-dark-theme-toggle.md
View file

@ -10,7 +10,7 @@ I built the button as a short Liquid partial:
{% raw %}
```liquid
<li class="theme__toggle client-side">
<li class="theme-toggle client-side">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
@ -70,7 +70,7 @@ With the following JavaScript set in `assets/scripts/index.js` to add the `click
```javascript
;(async function() {
const btn = document.querySelector('.theme__toggle');
const btn = document.querySelector('.theme-toggle');
btn.addEventListener('click', () => {
document.body.classList.toggle('theme__light');
document.body.classList.toggle('theme__dark');
@ -95,36 +95,36 @@ Finally, the theme is updated based on the body class applied by the JavaScript,
```css
/* theme toggle */
.theme__toggle,
.theme__toggle svg {
.theme-toggle,
.theme-toggle svg {
cursor: pointer;
}
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light ,
.theme__toggle > .dark {
.theme-toggle > .light ,
.theme-toggle > .dark {
display: none;
}
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
:is(.theme__light, .theme__dark) .theme-toggle > .placeholder {
display: none;
}
.theme__dark .theme__toggle > .light {
.theme__dark .theme-toggle > .light {
display: inline;
}
.theme__dark .theme__toggle > .dark {
.theme__dark .theme-toggle > .dark {
display: none;
}
.theme__light .theme__toggle > .light {
.theme__light .theme-toggle > .light {
display: none;
}
.theme__light .theme__toggle > .dark {
.theme__light .theme-toggle > .dark {
display: inline;
}
...

30
src/posts/2024/building-a-theme-toggle-web-component.md
View file

@ -12,7 +12,7 @@ Much like my `now-playing` component, I start out by registering the component t
const themeToggleTemplate = document.createElement('template')
themeToggleTemplate.innerHTML = `
<button class="theme__toggle">
<button class="theme-toggle">
<span class="light"></span>
<span class="dark"></span>
</button>
@ -37,7 +37,7 @@ My verbose, `connectedCallback` handles appending the template and appending the
```javascript
async connectedCallback() {
this.append(this.template)
const btn = this.querySelector('.theme__toggle')
const btn = this.querySelector('.theme-toggle')
const setTheme = (isOnLoad) => {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
const currentTheme = localStorage?.getItem('theme')
@ -75,41 +75,41 @@ async connectedCallback() {
The CSS for this is straightforward and contains a few vars specific to my implementation (related to icon color and SVG `stroke-width`):
```css
.theme__toggle {
.theme-toggle {
background: transparent;
padding: 0;
}
.theme__toggle svg {
.theme-toggle svg {
cursor: pointer;
}
.theme__toggle:hover,
.theme__toggle svg:hover {
.theme-toggle:hover,
.theme-toggle svg:hover {
stroke-width: var(--stroke-width-bold);
}
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme-toggle > .light svg { stroke: var(--sun) !important; }
.theme-toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light ,
.theme__toggle > .dark {
.theme-toggle > .light ,
.theme-toggle > .dark {
display: none;
}
.theme__dark .theme__toggle > .light {
.theme__dark .theme-toggle > .light {
display: inline;
}
.theme__dark .theme__toggle > .dark {
.theme__dark .theme-toggle > .dark {
display: none;
}
.theme__light .theme__toggle > .light {
.theme__light .theme-toggle > .light {
display: none;
}
.theme__light .theme__toggle > .dark {
.theme__light .theme-toggle > .dark {
display: inline;
}
```
@ -119,7 +119,7 @@ The final template that leverages the component looks like this:
```liquid
<script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
<template id="theme-toggle-template">
<button class="theme__toggle">
<button class="theme-toggle">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>