From 8ee40e016c173b2a2f3b26138bac06f6a14c4d21 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Tue, 27 Feb 2024 16:48:41 -0800
Subject: [PATCH] chore: button go click click
---
src/_includes/partials/nav/theme-toggle.liquid | 4 ++--
src/assets/styles/components/theme-toggle.css | 5 +++++
src/posts/2024/building-a-theme-toggle-web-component.md | 9 +++++++--
3 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/_includes/partials/nav/theme-toggle.liquid b/src/_includes/partials/nav/theme-toggle.liquid
index f3ac5d99..1e6390c7 100644
--- a/src/_includes/partials/nav/theme-toggle.liquid
+++ b/src/_includes/partials/nav/theme-toggle.liquid
@@ -4,14 +4,14 @@
{% endcapture %}
<style>{{ css }}</style>
<template id="theme-toggle-template">
- <div class="theme__toggle">
+ <button class="theme__toggle">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>
<span class="dark">
{% tablericon "moon" "Toggle dark theme" %}
</span>
- </div>
+ </button>
</template>
<li class="client-side">
<theme-toggle></theme-toggle>
diff --git a/src/assets/styles/components/theme-toggle.css b/src/assets/styles/components/theme-toggle.css
index 354ccab8..576ba963 100644
--- a/src/assets/styles/components/theme-toggle.css
+++ b/src/assets/styles/components/theme-toggle.css
@@ -1,3 +1,8 @@
+.theme__toggle {
+ background: transparent;
+ padding: 0;
+}
+
.theme__toggle svg {
cursor: pointer;
}
diff --git a/src/posts/2024/building-a-theme-toggle-web-component.md b/src/posts/2024/building-a-theme-toggle-web-component.md
index 42fd13c8..f173409b 100644
--- a/src/posts/2024/building-a-theme-toggle-web-component.md
+++ b/src/posts/2024/building-a-theme-toggle-web-component.md
@@ -75,6 +75,11 @@ 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 {
+ background: transparent;
+ padding: 0;
+}
+
.theme__toggle svg {
cursor: pointer;
}
@@ -118,14 +123,14 @@ The final template that leverages the component looks like this:
{% endcapture %}
<style>{{ css }}</style>
<template id="theme-toggle-template">
- <div class="theme__toggle">
+ <button class="theme__toggle">
<span class="light">
{% tablericon "sun" "Toggle light theme" %}
</span>
<span class="dark">
{% tablericon "moon" "Toggle dark theme" %}
</span>
- </div>
+ </button>
</template>
<li class="client-side">
<theme-toggle></theme-toggle>