Dark Mode Examples - Inspiration & Best Practices

Dark mode has grown from a niche preference to a standard user expectation. A well-implemented dark theme reduces eye strain in low-light environments, saves battery on OLED screens, and provides a visually appealing alternative. But implementing dark mode correctly goes beyond inverting colours — it requires thoughtful colour design, attention to contrast and accessibility, and a smooth switching experience.

Design system with dark mode for a SaaS dashboard

A SaaS company built a complete design system with built-in dark mode support. All UI components use design tokens (CSS custom properties) that automatically switch between light and dark themes. The dark mode colour palette is not simply inverted but carefully designed with reduced saturation and adjusted elevation levels to provide a comfortable reading experience.

• Design tokens via CSS custom properties for theme-independent components
• Tailored colour palette with reduced saturation for dark mode
• Elevation system with subtle shadows and surface colours
• Component library with automatic theme adaptation

Automatic system preference detection with manual override

A productivity app automatically detects the user system setting via the prefers-color-scheme media query and adapts the theme accordingly. Additionally, the app provides a manual toggle with three options: light, dark, and system. The preference is stored in localStorage and applied before the first render to prevent a flash of unstyled content (FOUC).

• prefers-color-scheme media query for automatic system detection
• Three-state toggle: light, dark, and follow system
• FOUC prevention with inline script applying theme before render
• Preference persistence via localStorage with server sync for logged-in users

Accessible dark mode for an e-learning platform

An e-learning platform implemented dark mode with a strong focus on accessibility. All colour combinations meet WCAG 2.1 AA contrast requirements in both themes. Interactive elements have clear focus indicators that remain visible in dark mode. Text overlaid on images uses a semi-transparent overlay to guarantee readability in both modes.

• WCAG 2.1 AA-compliant contrast ratios in both light and dark themes
• Customised focus indicators clearly visible in both themes
• Semi-transparent overlays on images for readable text
• Automatic contrast checking in the CI/CD pipeline with axe-core

Dark mode with custom illustrations and icons

A fintech app invested in separate illustration sets for light and dark themes. SVG illustrations automatically switch when the theme changes via CSS variables embedded in the SVG files. Icons use currentColor so they automatically adopt the correct colour. Photos receive a subtle brightness reduction in dark mode to ease eye strain.

• Dual SVG illustration set with CSS variables for theme switching
• Icons using currentColor for automatic colour adaptation
• Subtle brightness and contrast adjustments for photos in dark mode
• Animation transition of 200ms for smooth theme switching

Dark mode for a code editor and developer portal

A developer portal implemented dark mode as the default, with the option to switch to light mode. The code editor component uses a separate syntax highlighting theme per mode with colours optimised for readability against the respective background colour. All code blocks, terminal output, and API documentation switch consistently.

• Separate syntax highlighting themes for light and dark
• Consistent theming across code editor, terminal, and documentation
• Dark mode as default for developers with light mode opt-in
• Real-time theme preview on the settings page

Key takeaways

• Use design tokens (CSS custom properties) for a maintainable theming system.
• Do not simply invert colours — design a separate palette with reduced saturation for dark mode.
• Prevent FOUC by applying the theme before the first render with an inline script.
• Test all colour combinations for WCAG contrast compliance in both themes.
• Offer three options: light, dark, and follow system preference — and remember the user choice.

How MG Software can help

MG Software implements professional dark mode support in your application. From a complete design token system to accessible colour palettes and smooth theme transitions — we ensure your application looks outstanding in every mode and provides an optimal user experience.