forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
1---
2import { themeConfig } from '@/config'
3---
4
5{
6 themeConfig.general.themeToggle && (
7 <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
8 <div class="theme-icon hollow-circle" />
9 <div class="theme-icon solid-circle" />
10 </button>
11 )
12}
13
14<script is:inline>
15 function bindThemeToggle() {
16 const themeToggle = document.getElementById('theme-toggle')
17 if (themeToggle && window.ThemeManager) {
18 // Remove existing event listeners to prevent duplicates
19 const newToggle = themeToggle.cloneNode(true)
20 themeToggle.parentNode.replaceChild(newToggle, themeToggle)
21
22 newToggle.addEventListener('click', function (e) {
23 e.preventDefault()
24 e.stopPropagation()
25 window.ThemeManager.toggle()
26 })
27 }
28 }
29
30 // Bind on initial load
31 window.addEventListener('DOMContentLoaded', bindThemeToggle)
32
33 // Bind on Astro page transitions
34 document.addEventListener('astro:page-load', bindThemeToggle)
35</script>
36
37<style>
38 .theme-toggle {
39 background: none;
40 border: none;
41 cursor: pointer;
42 display: flex;
43 align-items: center;
44 height: 1.5rem;
45 gap: 0.1875rem;
46 color: var(--text-primary);
47 transition: opacity 0.2s ease;
48 padding: 0 0 0 0.5rem;
49 position: relative;
50 }
51
52 .theme-icon {
53 width: 0.4375rem;
54 height: 0.4375rem;
55 transition: all 0.2s ease;
56 }
57
58 .hollow-circle {
59 border: none;
60 border-radius: 50%;
61 box-shadow: inset 0 0 0 1.125px var(--text-primary);
62 }
63
64 .solid-circle {
65 background-color: var(--text-primary);
66 border-radius: 50%;
67 }
68</style>