fix: theme icon shift

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.9.0",
+  "version": "5.9.1",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_includes/partials/nav/theme.liquid

@@ -1,4 +1,7 @@
 <li class="theme__toggle client-side">
+  <span class="placeholder">
+    {% tablericon "placeholder" "Toggle theme placeholder" %}
+  </span>
   <span class="light">
     {% tablericon "sun" "Toggle light theme" %}
   </span>

src/assets/styles/index.css

@@ -504,6 +504,15 @@ footer nav {
 .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;
 }

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

@@ -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;
 }