Aesthetic Excellence
Dark Mode Mastery
Sellzar features a premium, system-aware dark mode that goes beyond simple color inversion to provide a high-end nocturnal experience.
Architecture Overview
Sellzar's dark mode is built on a **dual-variable architecture**. Instead of using complex CSS math, we provide dedicated theme settings for both Light and Dark modes for every major UI element.
System Aware
Automatically detects the user's OS preference using the prefers-color-scheme media query.
Manual Toggle
Includes a sticky theme switcher that allows users to override system settings. Preferences are saved in local storage.
Dual Variables
Every primary color has a corresponding "Dark" variant in **Theme Settings** for perfect control.
Configuration
Sticky Toggle
Enable or disable the floating theme switcher in **Theme Settings > General Settings > Enable Sticky Theme Toggle**.
Dark Color Schema
Navigate to **Theme Settings > Colors**. You will find "Dark Mode" specific color pickers for headers, footers, and product sections.
Developer Insights
If you are adding custom styles, you can leverage Sellzar's dark mode system using the .dark class selector.
.my-custom-element {
background: white;
color: black;
}
/* Dark mode override */
.dark .my-custom-element {
background: #111827;
color: #f9fafb;
}Premium Tip
When choosing dark mode colors, avoid pure black (
#000000). Instead, use deep grays or navy blues (like #111827) to maintain depth and reduce eye strain.