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) return
18
19 // Skip if already bound
20 if (themeToggle.dataset.themeBound) return
21 themeToggle.dataset.themeBound = 'true'
22
23 themeToggle.addEventListener('click', function (e) {
24 e.preventDefault()
25 e.stopPropagation()
26 window.ThemeManager.toggle()
27 })
28 }
29
30 // Use only astro:page-load as it fires on initial load and navigation
31 document.addEventListener('astro:page-load', bindThemeToggle)
32</script>
33
34<style>
35 .theme-toggle {
36 background: none;
37 border: none;
38 cursor: pointer;
39 display: flex;
40 align-items: center;
41 height: 1.5rem;
42 gap: 0.1875rem;
43 color: var(--text-primary);
44 transition: opacity 0.2s ease;
45 padding: 0 0 0 0.5rem;
46 position: relative;
47 }
48
49 .theme-icon {
50 width: 0.4375rem;
51 height: 0.4375rem;
52 transition: all 0.2s ease;
53 }
54
55 .hollow-circle {
56 border: none;
57 border-radius: 50%;
58 box-shadow: inset 0 0 0 1.125px var(--text-primary);
59 }
60
61 .solid-circle {
62 background-color: var(--text-primary);
63 border-radius: 50%;
64 }
65</style>