Blocks/Dark Mode Toggle
BeginnerUI

Dark Mode Toggle

Theme engine: accent colors, auto schedule, contrast checker, animated toggle

Full theme engine beyond a toggle: ThemeProvider with CSS variable injection, custom accent color picker with 6 presets + hex input, auto dark/light by sunrise/sunset (no API — pure math from geolocation), animated sliding pill toggle, ThemedImage (different image per theme), useContrastRatio hook for WCAG accessibility checking, per-brand color config, and hydration-safe no-flash script.

8h
Time saved
521
Lines of code
100%
TypeScript
#dark-mode#theme#tailwind#ux

Code preview

blocks/darkmode/index.ts
1var(--text-3);font-style:italic">// Animated sliding pill toggle:
2<ThemeToggle variant="pill" />
3
4var(--text-3);font-style:italic">// Accent color picker — users brand it to their taste:
5<AccentPicker presets={['#EFA020', '#3B82F6', '#10B981']} />
6
7var(--text-3);font-style:italic">// Auto dark at sunset, light at sunrise (no API):
8const { sunTimes } = useThemeSchedule(true)
9
10var(--text-3);font-style:italic">// WCAG contrast ratio checker:
11const { ratio, level } = useContrastRatio()
12var(--text-3);font-style:italic">// → { ratio: 7.2, level: 'AAA' }
13
14var(--text-3);font-style:italic">// Different image per theme:
15<ThemedImage light="/logo-light.svg" dark="/logo-dark.svg" alt="Logo" />

Short excerpt. Full block includes SQL migrations, error handling, RLS policies, and complete file structure.

$19

One-time · Instant GitHub access

🔜 Payments launching soon

We are setting up secure checkout. Email samarthofficial52@gmail.com to get early access.

You might also like