Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | 1x 1x 1x 1x 1x 1x 1x | 'use client'
import type React from 'react'
import { useTheme } from '@/contexts/ThemeContext'
import { css } from '../../styled-system/css'
export function ThemeToggle({ style }: { style?: React.CSSProperties } = {}) {
const { theme, resolvedTheme, setTheme } = useTheme()
const cycleTheme = () => {
// Cycle: light → dark → system → light
if (theme === 'light') {
setTheme('dark')
} else if (theme === 'dark') {
setTheme('system')
} else {
setTheme('light')
}
}
const getThemeLabel = () => {
if (theme === 'system') {
return `Auto (${resolvedTheme === 'dark' ? 'Dark' : 'Light'})`
}
return theme === 'dark' ? 'Dark' : 'Light'
}
const getThemeIcon = () => {
if (theme === 'system') {
return '🌗' // Half moon for system/auto
}
return resolvedTheme === 'dark' ? '🌙' : '☀️'
}
return (
<button
type="button"
onClick={cycleTheme}
aria-label={`Current theme: ${getThemeLabel()}. Click to cycle.`}
title={`Current: ${getThemeLabel()}. Click to cycle themes.`}
style={style}
className={css({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
px: '0.5rem',
py: '0.5rem',
bg: 'bg.surface',
color: 'text.primary',
border: '1px solid',
borderColor: 'border.default',
borderRadius: '0.5rem',
cursor: 'pointer',
fontSize: '1.1rem',
transition: 'all 0.2s',
_hover: {
bg: 'interactive.hover',
borderColor: 'border.emphasis',
},
})}
>
{getThemeIcon()}
</button>
)
}
|