theme.ts

src/lib/theme.ts

1. import { useEffect } from 'react'
3. import type { Settings } from '../ipc/gen/Settings'
5. /** Resolve the theme and transparency settings onto <html>. */
6. export function useTheme(settings: Settings | null, vibrancy: boolean) {
7. useEffect(() => {
8. const root = document.documentElement
9. const media = window.matchMedia('(prefers-color-scheme: dark)')
10. const apply = () => {
11. const pref = settings?.theme ?? 'system'
12. root.dataset.theme = pref === 'system' ? (media.matches ? 'dark' : 'light') : pref
13. root.dataset.vibrancy = vibrancy ? 'native' : 'none'
14. root.dataset.reduceTransparency = String(!!settings?.reduce_transparency)
15. root.style.setProperty('--tint', String((settings?.glass_tint ?? 100) / 100))
16. }
17. apply()
18. media.addEventListener('change', apply)
19. return () => media.removeEventListener('change', apply)
20. }, [settings?.theme, settings?.reduce_transparency, settings?.glass_tint, vibrancy])
21. }
23. export const isMac = typeof navigator !== 'undefined' && /Mac/i.test(navigator.platform || navigator.userAgent)
24. export const mod = isMac ? '⌘' : 'Ctrl+'
26. /** The quick window's height with no answer, and the most it grows to: `QUICK_HEIGHT` and `QUICK_MAX` in windows.rs. */
27. export const QUICK_HEIGHT = 76
28. export const QUICK_MAX = 560