Dark mode UI design is the most misunderstood area of frontend work right now. Most developers treat it as a color inversion task. You take your light palette, swap white for near-black and flip the text colors. The result looks like a dark website but it does not look like a well designed dark interface. The products that feel genuinely premium in dark mode, the ones from Linear, Vercel and Stripe, are not inverted light interfaces. They are built from scratch with a completely different spatial logic that happens to share the same data as the light version.

This guide breaks down exactly what that spatial logic is. We cover the elevation model that replaces shadows in dark environments, the text opacity system that creates readable hierarchy without size extremes and the color temperature rules that prevent the eye strain most poorly built dark interfaces cause. Whether you are building a dark mode website template from scratch or retrofitting an existing site these principles apply directly.

Why Dark Mode Is Not Just Inverted Light Mode

In a light interface elevation is communicated through shadow. Taller elements cast darker shadows. A card sits above the page surface because it has a visible drop shadow beneath it. You can see this in almost every material design component from 2014 onward.

This logic completely breaks in dark environments because shadows are invisible against a dark background. A black drop shadow on a near-black surface does nothing. So the entire system of communicating depth through shadow has to be replaced.

The correct replacement is the elevation through lightness model. In a dark interface higher surfaces are lighter. The page background is the darkest surface. Cards float above it by being slightly lighter. Modals float above cards by being slightly lighter still. The hierarchy reads identically to the shadow model except the spatial cue is surface luminance rather than shadow depth. Material Design 3 adopted this model in 2021. Linear, Raycast and most serious dark mode first products use it.

A practical implementation uses four surface tiers. Base at around #0a0a0c for the page background. Raised at #111114 for cards and panels. Float at #18181c for modals and drawers. Overlay at #222228 for dropdown menus and tooltips. Each step adds roughly 4 to 6 percent lightness with no hue shift. The absence of hue shift is important because any green or blue cast in your dark surfaces will cause color conflicts with your brand accents.

The Text Opacity System

Pure white text on a dark background causes halation. This is a real optical phenomenon where the visual system perceives a glowing outline around high contrast white letterforms. After five or ten minutes of reading it causes measurable eye fatigue. This is why the complaint that dark mode hurts people's eyes is not imaginary. It is a real consequence of using pure white text.

The fix is to never use #ffffff for body text. Reserve full white for display headings only where the large size reduces the effective contrast ratio to a comfortable level. Set body text at rgba(255, 255, 255, 0.88). Set secondary text like captions and metadata at rgba(255, 255, 255, 0.56). Set muted text like placeholder copy at rgba(255, 255, 255, 0.35). Set disabled states at rgba(255, 255, 255, 0.22).

These four opacity tiers create full readable hierarchy without touching font size or font weight. On a well built dark interface you should be able to identify the importance of any text element purely from its opacity even if all the type were set at the same size. If you cannot, your hierarchy is broken.

The opacity approach has another advantage over using discrete hex values for each text tier. When your brand color or background color changes slightly the opacity relationships remain correct automatically. You do not need to recalculate six text colors every time a designer decides the background should be slightly warmer.

Color Temperature and the Gray Trap

The single most common mistake in how to make a dark mode website is using neutral gray for the background surfaces. Pure gray backgrounds at any darkness level look cold and clinical. They also conflict with almost every brand accent color because pure gray has no temperature relationship with any hue.

The correct approach is to use very slightly warm or very slightly cool dark surfaces depending on your brand palette. A background of #0a0a0f instead of #0a0a0a adds an almost imperceptible cool blue cast. This makes blue and purple accents feel harmonious with the surface rather than stuck on top of it. A background of #0c0a09 adds a barely visible warm cast that makes red and orange accents feel embedded in the environment rather than floating above a gray void.

The shift is subtle enough that most users will never consciously notice the temperature. But remove it and ask those same users which version feels more premium. They will pick the temperature shifted version almost every time without being able to explain why. This is the kind of detail that separates dark mode UI design that feels crafted from dark mode that just feels dark.

Accent Colors in Dark Environments

Saturated colors behave completely differently in dark environments than in light ones. A red button at full saturation on a light background reads as a confident call to action. The same red button on a near-black background glows like an emergency warning. The eye responds to high saturation colors more intensely when the surrounding environment is dark because the contrast ratio is much higher.

The practical consequence is that your accent colors need to be desaturated by 10 to 20 percent compared to your light mode equivalents. If your brand red is #dc2626 in light mode, your dark mode accent might be closer to #c42020 or you use the same red but reduce the button background opacity so the color reads as less intense. Neither approach is universally correct. Test both and look at your interface on a calibrated monitor in a dim room which is the actual environment most dark mode users are in.

For glow effects and focus rings around accent elements, use your accent color at very low opacity rather than trying to match the intensity of the button itself. A red focus ring at rgba(220, 38, 38, 0.3) looks intentional. The same ring at full red saturation looks like a debug outline someone forgot to remove.

Building Your Dark Mode CSS Architecture

The cleanest implementation uses CSS custom properties for every color decision so you can switch between light and dark with a single class on the root element. Define your surface stack, your text opacity tiers and your accent variants all as custom properties. Then write your component styles using only these properties with no hardcoded hex values anywhere in the component CSS.

This approach makes the dark and light variants genuinely maintainable. When your designer decides the dark mode background should be slightly lighter next quarter you change one variable and every component updates correctly without any risk of missing an instance buried in a stylesheet someone wrote three months ago.

The prefers-color-scheme media query handles users who have system dark mode enabled. Your class-based toggle handles users who want to override the system setting within your app. Support both. Users with sensitive eyes sometimes want dark mode even when their system is in light mode. Users on battery-conscious settings sometimes want light mode even when the system prefers dark. Respecting both preferences is a small implementation cost for a meaningful accessibility improvement.

Where ProofMatcher's Dark Mode Templates Fit

Every template in our library ships with a dark mode first design built on the elevation through lightness model described in this guide. We do not include inverted light palettes. We built the dark variants from scratch using the four surface tiers, the opacity based text system and temperature shifted backgrounds.

If you want a dark mode template free download to study, our free tier includes three complete dark mode layouts with all the CSS custom properties exposed and documented in the source. You can see exactly how we structured the elevation stack and adapt it directly to your own project. Our free website templates are production ready and include the semantic HTML, the component CSS and the dark mode variables all in one clean download with no build tools required.

Dark mode done correctly is one of the highest leverage things you can do for perceived product quality. Users who prefer dark environments spend more time in apps that do not hurt their eyes. The elevation model and text opacity system we covered here take less than a day to implement correctly and the result is an interface that feels more premium at every level of the product than a light mode equivalent would at the same level of polish.