Skip to main content
Dark mode is an essential feature for modern web applications, providing users with a comfortable viewing experience in low-light environments and reducing eye strain. EoN UI provides comprehensive dark mode support across different frameworks.

​
Framework Support

EoN UI offers framework-specific implementations for dark mode to ensure seamless integration with your chosen technology stack. Each implementation is optimized for the framework’s conventions and best practices.

​
Available Framework Guides

Choose your framework to get started with dark mode implementation:

Next.js

Learn how to add dark mode to your Next.js application using next-themes for optimal server-side rendering support.

Vite

Implement dark mode in your Vite application with a custom React Context-based theme provider.

​
How Dark Mode Works

EoN UI’s dark mode implementation uses CSS classes to toggle between light and dark themes. The core principle involves:
  1. Theme Detection: Automatically detecting the user’s system preference or loading saved preferences
  2. CSS Classes: Applying dark or light classes to the root HTML element
  3. Tailwind CSS: Leveraging Tailwind’s dark: variant to style components differently in dark mode
  4. Persistence: Saving user preferences to localStorage for consistent experience across sessions

​
Key Features

All EoN UI components are designed with dark mode support out of the box. Simply implement the theme provider and your components will automatically adapt to the selected theme.
  • System Preference Detection: Automatically respects the user’s operating system theme preference
  • Manual Toggle: Allows users to override system preferences with a manual theme selection
  • Smooth Transitions: Optional transition animations when switching between themes
  • Persistence: User preferences are saved and restored across sessions
  • SSR Compatible: Works seamlessly with server-side rendering in Next.js

​
Quick Overview

Regardless of the framework you choose, the implementation follows a similar pattern:
1

Install Dependencies

Install the necessary theme management package (next-themes for Next.js or use the custom provider for Vite).
2

Create Theme Provider

Set up a theme provider component that wraps your application and manages theme state.
3

Wrap Your Application

Add the theme provider to your root layout or main app component.
4

Add Mode Toggle

Implement a UI component that allows users to switch between light, dark, and system themes.

​
Component Support

All EoN UI components include built-in dark mode styling using Tailwind CSS classes. When you apply the dark class to your root HTML element, components automatically adjust their appearance:
  • Background colors adapt to darker shades
  • Text colors adjust for proper contrast
  • Borders and shadows are modified for visibility
  • Interactive states (hover, focus, active) maintain proper feedback

​
Next Steps

Select your framework guide to begin implementing dark mode: Both guides include complete code examples, step-by-step instructions, and working implementations you can copy directly into your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us