Dark Mode Demo

Experience our comprehensive theme system with smooth transitions, system preference detection, and carefully crafted color palettes.

Current Theme: Light Mode

Theme persisted in localStorage and synced across tabs

Theme Properties

Mode:light

Primary Color:

#065de9ff

Background:

#ffffff

Text Color:

#0f172a

Features

LocalStorage persistence

System preference detection

Smooth CSS transitions

Accessibility compliant

Theme Features

Light Mode

Clean, bright interface optimized for daylight use

Dark Mode

Easy on the eyes with carefully selected dark colors

System Sync

Automatically follows your system preference

Smooth Transitions

Seamless animated transitions between themes

Data Structure Colors

Arrays

#8b5cf6

Linked Lists

#06b6d4

Stacks

#10b981

Queues

#f59e0b

Trees

#84cc16

Graphs

#ec4899

Hash Tables

#f97316

Algorithm Colors

Sorting

#6366f1

Searching

#8b5cf6

Graph Algorithms

#ec4899

Dynamic Programming

#06b6d4

Greedy

#84cc16

Divide & Conquer

#f97316

Live Color Controls

Primary

Accent

Text Primary

BG Primary

Arrays

Graphs

Sorting

Searching

Divide & Conquer

How to Use Dark Mode

1. Use the Theme Context

import { useTheme } from '@/contexts/ThemeContext';

const { theme, toggleTheme, isDark } = useTheme();

2. Add Theme Toggle Component

import { ThemeToggle } from '@/components/ThemeToggle';

3. Use Tailwind Dark Mode Classes

className="bg-white dark:bg-gray-800 text-gray-900 dark:text-black"