Adaptive Theming System
Modern Auth's powerful theming engine creates a seamless experience across light and dark modes
Advanced Theme Architecture
Our theming system is engineered for maximum flexibility and developer experience, addressing common pain points in dark mode implementation:
- Zero theme flashing during page load
- OS-level theme preference detection
- User theme preference persistence
- Smooth CSS transitions between themes
- Contrast ratios that meet AA accessibility standards
- Theme-consistent component library
- Simple API for theme customization
Built on CSS variables and Tailwind CSS, the theming system provides fine-grained control while maintaining consistent visual hierarchy in both light and dark modes.
Theme Provider Implementation
// ThemeProvider.tsx
import { createContext, useState, useEffect } from "react";
type Theme = "light" | "dark" | "system";
interface ThemeContextType {
theme: Theme;
isDarkMode: boolean;
setTheme: (theme: Theme) => void;
toggleTheme: () => void;
}
export function ThemeProvider({ children }) {
const [theme, setTheme] = useState<Theme>("system");
const [isDarkMode, setIsDarkMode] = useState(false);
// Theme toggle and system detection logic
// Read user preference from localStorage
// Set CSS variables dynamically
}
Theme-Aware Components
Modern Auth's components automatically adapt to the current theme without any additional configuration:
Form Controls
Button System
Primary Actions
Secondary Actions
Tertiary Actions
Theme-Aware Toast Notifications
Our toast notification system provides contextual feedback while automatically adapting to light and dark modes:
Toast Features
- Four notification types with optimized contrast
- Theme-aware styling for both light and dark modes
- Customizable duration and message content
- Accessible design with proper ARIA attributes
- Smooth animations for entrance and exit
- Global context-based API for app-wide access
- Clean, minimal design that doesn't interrupt workflow
Try it yourself:
Toast Types
Error- For critical issues requiring attention
Warning- For important but non-critical notices
Success- For confirmed actions or operations
Info- For general information or updates
Toast Implementation
// Toast usage in components
import { useToast } from '@/components/ui/Toast';
function ProfileForm() {
const { showToast } = useToast();
// Define form submission handler
function onSubmit(data) {
try {
// Update profile logic here
showToast(
"Profile updated successfully!",
"success"
);
} catch (error) {
showToast(
"Failed to update profile",
"error",
8000 // custom duration in ms
);
}
}
return (
<form>
<Button type="submit">Update Profile</Button>
</form>
);
}
// Toast automatically adapts to theme
// The toast uses the current theme context
// No additional configuration needed!Developer-First Customization
Modern Auth's theming system is designed to be completely customizable while requiring minimal code changes.
CSS Variables System
Customize the entire theme by modifying a single set of CSS variables:
/* globals.css */
:root {
/* Primary brand colors */
--color-primary: #3B82F6;
--color-primary-hover: #2563EB;
--color-primary-light: rgba(59, 130, 246, 0.1);
/* Light mode variables */
--background-color: #ffffff;
--text-color: #171717;
--border-color: #e5e7eb;
--card-bg: #ffffff;
--input-bg: #ffffff;
}
.dark {
/* Dark mode variables */
--color-primary: #3B82F6; /* Same primary color */
--color-primary-hover: #60a5fa;
--background-color: #0f172a;
--text-color: #f8fafc;
--border-color: #374151;
}
Why Choose Our Theming System
Technical Benefits
- Zero flash of incorrect theme (FOIT)
- Server-side rendering compatible
- Automatic system preference detection
- Theme persistence across sessions
- Small runtime footprint (~1KB)
- No external dependencies
- Compatible with any UI framework
- CSS variables for easy customization
- Built-in prefers-color-scheme support
User Experience Benefits
- Consistent visual hierarchy in both modes
- Reduced eye strain in dark environments
- Battery savings on OLED screens
- Smooth theme transitions
- Respects user system preferences
- Accessible color contrast ratios
- Proper focus states in both themes
- Polished, professional appearance
- Carefully crafted color palette