fix

ocavue · Jan 16, 2025 · b88930a · b88930a
1 parent c6eef4c
commit b88930a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/lib/toggle.astro b/lib/toggle.astro
@@ -8,7 +8,7 @@ type Props = HTMLAttributes<'button'>
 const props: Props = Astro.props
 ---
 
-<button id="astro-theme-toggle" class="astro-theme-toggle" {...props}>
+<button id="astro-theme-toggle" {...props}>
   <div class="astro-theme-toggle-icon-light">
     <slot name="icon-light">
       <IconSunSvg />
@@ -33,7 +33,7 @@ const props: Props = Astro.props
 </script>
 
 <style is:global>
-  .astro-theme-toggle {
+  :where(#astro-theme-toggle) {
     padding: 0;
     margin: 0;
     border: none;

diff --git a/website/components/theme-toggle-button-custom.astro b/website/components/theme-toggle-button-custom.astro
@@ -2,13 +2,11 @@
 import { Toggle } from 'astro-theme-toggle'
 ---
 
-<div style="width: 64px; height: 64px;">
-  <Toggle>
-    <Fragment slot="icon-light">
-      <span style="font-size: 64px;">🌞</span>
-    </Fragment>
-    <Fragment slot="icon-dark">
-      <span style="font-size: 64px;">🌚</span>
-    </Fragment>
-  </Toggle>
-</div>
+<Toggle style="width: 64px; height: 64px;">
+  <Fragment slot="icon-light">
+    <span style="font-size: 64px;">🌞</span>
+  </Fragment>
+  <Fragment slot="icon-dark">
+    <span style="font-size: 64px;">🌚</span>
+  </Fragment>
+</Toggle>
diff --git a/website/components/theme-toggle-button.astro b/website/components/theme-toggle-button.astro
@@ -2,6 +2,11 @@
 import { Toggle } from 'astro-theme-toggle'
 ---
 
-<div style="width: 24px; height: 24px;">
-  <Toggle />
-</div>
+<Toggle class="theme-toggle" />
+
+<style>
+  .theme-toggle {
+    width: 24px;
+    height: 24px;
+  }
+</style>