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

fix: theme icon shift

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-17 19:32:37 -08:00
parent 9003d20ee3
commit 825ae15e00
No known key found for this signature in database
4 changed files with 25 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,9 @@ I built the button as a short Liquid partial:
{% raw %}
```liquid
<li class="theme__toggle client-side">
<span class="placeholder">
{% tablericon "placeholder" "Toggle theme placeholder" %}
</span>
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>
@ -82,6 +85,15 @@ Finally, the theme is updated based on the body class applied by the JavaScript,
.theme__toggle > .light svg { stroke: var(--sun) !important; }
.theme__toggle > .dark svg { stroke: var(--moon) !important; }
.theme__toggle > .light ,
.theme__toggle > .dark {
display: none;
}
:is(.theme__light, .theme__dark) .theme__toggle > .placeholder {
display: none;
}
.theme__dark .theme__toggle > .light {
display: inline;
}