How to Design a Dark Mode Website: Best Practices for Readability and UX

Dark mode is everywhere now. Phones switch to it at sunset. Apps ask you to pick a theme on first launch. More websites offer it too because visitors expect the choice.

A good dark theme takes more work than flipping colors. White does not simply become black. Text can turn hard to read. Buttons can lose their punch. Logos and photos can look harsh or washed out on a dark backdrop.

This guide shows how to design a dark mode website that stays readable and easy to use. You will get a simple step-by-step process with tested color values and contrast numbers. You will also get copy-ready code and real examples. And you will see the mistakes that make dark mode worse instead of better.

What Is Dark Mode Web Design?

Dark mode web design means styling a website with dark backgrounds and light text instead of dark text on a white page. Good dark themes use deep grays rather than pure black and soft off-white text rather than pure white. Visitors can switch to it by hand or get it from their device setting.

The idea sounds simple but good execution takes real planning. Every color choice on a light site needs a second look once you flip the theme. Shadows behave differently. Borders need new treatment. Icons often need their own dark set.

That is why learning how to design a dark mode website starts with one mindset. Treat dark mode as its own design system rather than a filter placed over your current site.

Dark screens are older than light ones. Early computer terminals showed green or amber text on black. Dark themes went mainstream again in 2018 and 2019 when macOS Mojave, iOS 13 and Android 10 added system-wide dark settings.

Key Parts of a Dark Mode System

1. A dark background scale using a few shades of gray or navy instead of one flat black

2. Text colors with enough contrast to stay readable without feeling harsh

3. Accent colors that still stand out against a dark base

4. Borders and dividers that stay visible without looking too bright

5. Raised surfaces that get lighter to show depth where shadows cannot

6. Image and icon treatments made for a dark canvas

How to Design a Dark Mode Website Step by Step

Here is the whole process in eight steps. Each step gets its own section further down with color values and examples.

The 8 Steps at a Glance

1. Pick a dark gray base color instead of pure black

2. Build lighter surface shades for cards and dialogs

3. Set text colors in three levels of emphasis

4. Lighten and soften your brand and accent colors

5. Check every color pair against WCAG contrast ratios

6. Adapt images, logos and charts for dark backgrounds

7. Follow the device setting and offer a manual toggle

8. Test on real screens in bright and dim light

Why Dark Mode Matters for UX

Most people now use dark mode on their phones and laptops every day. When they turn it on for the whole device they expect websites to follow. A site that flashes a bright white page at midnight feels out of step.

There are real comfort reasons behind the demand. A dark screen gives off less glare in a dark room. Many people find it easier on the eyes late at night. On OLED screens a dark theme also saves battery because dark pixels draw less power.

The research is more mixed than many articles suggest. So the goal is to offer dark mode well rather than force it on everyone.

Real Benefits Users Notice

1. More comfortable browsing at night for many users

2. Lower glare in dim rooms or late evening use

3. Battery savings on OLED phones and laptops with the biggest gains at high brightness

4. A more premium and modern feel for tech and SaaS products

5. Better focus on content since bright white edges stop pulling attention

6. A comfortable option for people who are sensitive to bright light

What the Research Says

1. A Nielsen Norman Group review from 2020 found that people with normal vision read and proofread better in light mode. The gap grew as the text got smaller.

2. The same review points to older studies where people with cloudy eye lenses such as cataracts read faster in dark mode.

3. A 2021 Purdue University study of OLED phones found that dark mode saved 39% to 47% of battery power at full brightness. At the 30% to 50% brightness most people use indoors the saving dropped to 3% to 9%.

4. HTTP Archive's 2022 Web Almanac found that only about 8% of web pages checked the prefers-color-scheme setting. A well-built dark mode can still set your site apart.

The practical lesson is simple. Offer dark mode as a choice and keep light mode strong for long reading.

Dark Mode vs Light Mode: When to Use Each

Neither mode wins everywhere. The right choice depends on your audience and your content. A recipe blog with bright food photos may look strange in dark mode. A developer tool or analytics dashboard often feels right at home in it.

The safest approach for most business sites is offering both. Follow the visitor's device setting and let them switch by hand. This respects personal preference instead of forcing one look on everyone.

Dark mode has weak spots too. It is harder to read in direct sunlight. Long articles can feel more tiring. Many people with astigmatism see light text on black as slightly blurry or glowing. This effect is called halation.

Signs Dark Mode Fits Your Site

1. Your audience is mostly tech users such as developers and designers

2. Your product is used for long sessions like dashboards or writing tools

3. Your brand already leans modern and minimal or premium

4. Your users often work at night or in low light

5. You already have strong brand colors that stand out on a dark base

6. Your analytics show lots of evening visits from mobile since GA4 can break visits down by hour and device

Signs You Should Stick with Light Mode Only

1. Your site relies on bright photography such as food or travel shots

2. Your readers spend long stretches on dense text in bright offices

3. You lack the design time to build and test a second full theme

4. Your brand identity depends on a clean white and airy feel

How to Choose Background and Surface Colors for Dark Mode

Start with one base color for the whole page. #121212 is a safe choice and the default in Material Design's dark theme. It feels dark enough for night use and leaves room for lighter layers on top.

Your base can carry a tint too. A deep navy like #0B1220 feels cooler and more on brand than neutral gray. Slightly blue darks usually look calm on screen. Brown or red tinted darks can look muddy so test them with care.

Pure black is not banned. iPhone dark mode uses true black for its base layer and lighter grays for anything raised above it. That works on OLED screens when text is softened. For most websites a dark gray base is easier to layer.

In light mode shadows show depth. On a dark page shadows barely show. So raised elements get lighter instead. Material Design adds a thin white overlay that grows with height. Here is what that looks like on a #121212 page with #E0E0E0 text.

How to Show Depth Without Shadows

1. Make each raised layer a little lighter than the one below it

2. Add a thin border that is slightly lighter than the surface

3. Use a faint highlight along the top edge of panels and modals

4. Dim the page behind a modal with a dark see-through layer

5. Keep shadows for large floating elements and make them darker and softer than in light mode

6. Stick to four or five surface levels so the layers stay easy to read

Color and Contrast Rules for Dark Mode

Contrast is where most dark mode designs fail. Pure white text on pure black looks harsh and can cause halation for many readers. The fix is softer contrast rather than the maximum possible contrast.

Accessibility rules still apply in dark mode. WCAG 2.2 asks for a contrast ratio of at least 4.5 to 1 for body text. Large text can go down to 3 to 1. Large means about 24px at regular weight or about 19px in bold. Input borders, focus rings and meaningful icons need at least 3 to 1 against the colors next to them. These numbers do not change because the background got dark.

Use three levels of text color. Material Design uses white text at 87% opacity for main text. Secondary text drops to 60% and disabled text to 38%. On #121212 that gives you roughly #E0E0E0 for main text and #A0A0A0 for secondary text. Disabled text lands near #6C6C6C.

Bright saturated colors seem to vibrate on a dark background. Use lighter and softer versions of your brand colors instead. A typical light mode link blue like #0066CC scores only 3.4 to 1 on #121212 and fails. A lighter blue like #66B2FF scores 8.4 to 1 and passes.

Brand color also needs testing on its own. A bright orange or blue that stands out on white can turn muddy or glaring on a dark base. Many teams lighten their accent color slightly for the dark theme so it keeps the same visual weight. This kind of color system planning is part of what a proper branding and UI/UX process should cover before launch.

We ran our own brand orange #F66B05 through a contrast checker while writing this guide. On white it scores 2.99 to 1. That fails for body text and just misses the 3 to 1 bar for large text. On a deep navy like #0B1220 the same orange scores 6.26 to 1 and passes with room to spare. White text on an orange button also scores 2.99 to 1 while dark navy text on it scores 6.26 to 1. For us dark mode made the accent color easier to use. Test yours in both themes because it can go either way.

Look at the dialog row. Muted text that passes on the page can fail on a raised surface. So check contrast on every surface level including menus and dialogs.

Contrast Best Practices

1. Use off-white text like #E0E0E0 or #E6E6E6 instead of pure white #FFFFFF

2. Use deep gray backgrounds like #121212 instead of pure black

3. Check every text and background pair against WCAG contrast minimums

4. Test brand accent colors separately for the dark theme

5. Avoid placing saturated colors directly next to each other

6. Keep error and success colors readable and pair them with an icon or label

7. Give input borders and focus rings at least 3 to 1 contrast

8. Check muted text on raised surfaces as well as on the page background

9. Underline links in body text so they never rely on color alone

Typography and Readability in Dark Mode

Text behaves differently once the background goes dark. Thin font weights that looked fine on white can appear faint or blurry on a dark base. Light text on a dark background needs slightly heavier strokes to stay crisp.

Line spacing also plays a bigger role than people expect. Tight line height on a dark background makes paragraphs feel cramped and harder to scan. Add a little extra line height and the page gets easier to read.

Heavier weights can cause a new problem though. If body text moves from 400 to 500 weight in dark mode the words get wider. Lines wrap differently and the page can jump. A variable font with a grade axis such as Roboto Flex solves this. Grade makes strokes thicker without changing letter width.

Typography Fixes for Dark Themes

1. Bump font weight up slightly for body text compared to the light version

2. Increase line height a touch more than you would on a white background

3. Avoid ultra thin font weights for anything under 16px

4. Keep lines to about 60 to 75 characters so they stay easy to follow

5. Test real content instead of placeholder text since real sentences reveal spacing issues

6. Check headings at every size since large light text can glow more than small text

7. Make headings slightly brighter than body text to keep a clear hierarchy

8. Use a grade axis where your font has one so heavier text does not shift the layout

How to Adapt Images, Logos, Icons and Charts for Dark Mode

Assets made for white pages often break on dark ones. A logo sits inside a white box. A screenshot glows like a light bulb. A chart keeps black gridlines that nobody can see.

The simplest fix for a logo is a second version. Serve it with the picture element so the browser downloads only the file it needs.

<picture>

  <source srcset="/logo-for-dark-bg.svg" media="(prefers-color-scheme: dark)">

  <img src="/logo-for-light-bg.svg" alt="Your brand name">

</picture>

There is one catch. The picture element follows the device setting and ignores your site toggle. If your toggle can differ from the device setting then swap the logo with CSS tied to your theme attribute instead.

Media Checklist for Dark Mode

1. Export logos with transparent backgrounds and make a light version for dark pages

2. Build icons as inline SVG with fill set to currentColor so they follow the text color

3. Make dark versions of screenshots and diagrams that show your interface

4. Tone down very bright decorative photos with a small CSS filter such as brightness(0.9)

5. Recolor charts with lighter series colors and softer gridlines

6. Switch code blocks to a dark syntax highlighting theme

7. Check embedded maps, videos and chat widgets since many have their own dark setting

Dark Mode Website Examples Worth Studying

Open these in both themes and compare how they handle color and depth. Each one solves a different part of the problem.

What Each Example Teaches

1. GitHub offers several dark themes including a dimmed option and high contrast versions. One dark theme does not suit every pair of eyes.

2. X offers Dim with a blue-gray base and Lights out with pure black. Some people want true black on OLED screens while others prefer a softer dark.

3. MDN Web Docs lets readers follow their OS setting or pick light or dark. Respecting the device setting and allowing an override is the pattern to copy.

4. Linear keeps its interface dark and shows depth with lighter panels and thin edge highlights instead of heavy shadows.

5. YouTube keeps its interface quiet in dark mode so thumbnails and video stay the brightest things on screen.

6. iPhone dark mode uses true black for the base and lighter grays for raised layers like sheets and menus. It shows pure black can work when the layers above it are lighter.

How to Build Dark Mode Into Your Design System With Tokens

Dark mode gets messy fast when colors are hard-coded. Design tokens fix this. A token is a named color with a job such as text-muted or surface-raised. Each token holds one value for light mode and one for dark mode.

In Figma you can set this up with variables that have a Light mode and a Dark mode. Designers flip a whole frame between themes in one click. Developers get the same names as CSS custom properties. Nobody has to guess which gray goes where.

Every text and accent pair in this table passes WCAG AA on its page background in both themes. Both border values pass the 3 to 1 rule for inputs.

Token Rules That Keep Dark Mode Consistent

1. Name tokens by role such as surface-raised and never by color such as light-gray

2. Keep raw hex codes out of components and use tokens everywhere

3. Give every token a light value and a dark value from day one

4. Map light colors to dark colors by hand rather than inverting them

5. Store contrast results next to each token pair so audits stay quick

6. Review new tokens in both modes before they ship

How to Implement Dark Mode on Your Website

Modern browsers give you a head start. The prefers-color-scheme media query tells your site whether the visitor's device is set to dark. Most teams then store every color as a CSS custom property so the theme can swap without rewriting each style rule.

A manual toggle is still worth adding. Some visitors want your site dark while their device stays light. Save their choice so it sticks on the next visit. Offer three options so people can pick light or dark or simply follow their system.

Steps to Add Dark Mode

1. Define your color palette as variables for both light and dark themes

2. Add color-scheme to the root so form fields and scrollbars turn dark too

3. Set the default theme from the visitor's device setting

4. Add a visible toggle with light, dark and system options

5. Save the user's choice so it persists across visits

6. Apply the saved choice with a tiny script in the head to stop a white flash

7. Match the mobile browser bar color with theme-color meta tags

8. Test every page template including blog and checkout pages

9. Check forms, buttons and third party embeds like maps or chat widgets

10. Run a full contrast audit before launch

Here is the CSS. Light is the default. The device setting applies next. A manual choice always wins.

:root {

  color-scheme: light dark;

  --surface-base: #ffffff;

  --text-primary: #1a1a1a;

  --accent: #0066cc;

}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --surface-base: #121212;

    --text-primary: #e0e0e0;

    --accent: #66b2ff;

  }

}

:root[data-theme="dark"] {

  color-scheme: dark;

  --surface-base: #121212;

  --text-primary: #e0e0e0;

  --accent: #66b2ff;

}

:root[data-theme="light"] {

  color-scheme: light;

}

body {

  background: var(--surface-base);

  color: var(--text-primary);

}

Put this in the head of every page. The meta tags tell the browser early that your site supports both themes. The script applies a saved choice before the page paints so dark mode users never see a white flash.

<meta name="color-scheme" content="light dark">

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">

<meta name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">

<script>

  try {

    var saved = localStorage.getItem('theme');

    if (saved === 'light' || saved === 'dark') {

      document.documentElement.setAttribute('data-theme', saved);

    }

  } catch (e) {}

</script>

The toggle can be a simple labeled select menu. It works with a keyboard and screen readers without extra effort.

<label for="theme">Theme</label>

<select id="theme">

  <option value="system">System</option>

  <option value="light">Light</option>

  <option value="dark">Dark</option>

</select>

<script>

  var picker = document.getElementById('theme');

  picker.value = localStorage.getItem('theme') || 'system';

  picker.addEventListener('change', function () {

    if (picker.value === 'system') {

      localStorage.removeItem('theme');

      document.documentElement.removeAttribute('data-theme');

    } else {

      localStorage.setItem('theme', picker.value);

      document.documentElement.setAttribute('data-theme', picker.value);

    }

  });

</script>

Newer browsers offer a shortcut. The light-dark() CSS function holds both values in one line. It needs color-scheme set on the root and works in Chrome 123, Firefox 120 and Safari 17.5 or later. With it your toggle only has to change color-scheme.

:root {

  color-scheme: light dark;

  --surface-base: light-dark(#ffffff, #121212);

  --text-primary: light-dark(#1a1a1a, #e0e0e0);

}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] { color-scheme: dark; }

Platform Notes

1. WordPress: use a theme with built-in dark mode or a well-reviewed dark mode plugin and then check every template

2. Shopify: many themes support color schemes but a site-wide toggle usually needs a theme code edit or an app

3. Webflow and Wix Studio: set up global color variables first so every element can switch together

4. Next.js and Tailwind: pair Tailwind's dark variant with a small library such as next-themes to handle the saved choice and the no-flash script (this is the stack we use for most custom builds)

5. Samsung Internet: its own dark mode can recolor pages so declare color-scheme in your HTML and test on a Samsung phone

If your site runs on an older platform this might be a good moment to review the whole stack. Our post on choosing the right CMS for your business website covers which platforms make this kind of theme work easier.

Common Dark Mode Design Mistakes

Most failed dark mode launches skip the same few steps. These mistakes show up again and again in redesigns.

A frequent one is using pure black everywhere. It looks bold in a quick screenshot but tires the eyes fast during real use. Another common issue is forgetting to update photography and logos so they still work on the new background. The worst shortcut of all is inverting the whole page with a CSS filter. It flips photos and brand colors along with everything else.

Mistakes That Hurt Dark Mode UX

1. Using pure black backgrounds with pure white text on text-heavy pages

2. Copying light mode shadows which barely show up on dark surfaces

3. Leaving white logo backgrounds that create harsh bright boxes

4. Forgetting form fields, checkboxes and dropdown menus in the redesign

5. Skipping contrast checks on hover and focus states

6. Not testing the footer separately since footers often get missed in redesigns

7. Inverting colors with a filter instead of designing a real palette

8. Using neon saturated accents that seem to vibrate on black

9. Adding a transition to every element so switching themes feels slow

10. Forgetting a print style so printed pages come out pale or heavy on ink

Footers in particular need their own pass since they carry links, legal text and contact details that must stay readable. Our guide on footer design for UX and SEO is worth checking before you finalize either theme.

Dark Mode, Battery Life and Performance

Dark mode saves real battery only at high brightness as the Purdue numbers above show. LCD screens light every pixel from behind so they save almost nothing.

Page speed barely changes either way. A theme built with CSS custom properties adds only a few lines of CSS. The picture element downloads only the image a visitor needs. The real risks are a large blocking script or heavy visual effects.

Performance Notes for Dark Themes

1. Keep the theme script in the head tiny so it never delays the first paint

2. Avoid heavy box shadows and blur effects that strain rendering

3. Check dark images after compression since dark gradients can show visible bands

4. Test load times in both themes

5. Keep font files and icon sets shared between themes to avoid duplicate loading

6. Avoid font weight changes between themes that shift the layout

For a deeper look at speed fixes beyond theme choice check our guide on optimizing website speed and page load time.

How to Test and Maintain Dark Mode

Dark mode needs care after launch. New pages and components keep arriving and each one needs checking in both themes. A banner built only for light mode will eventually ship broken in dark mode if nobody has a process for catching it.

Build a habit of testing new features in both themes before launch. Treat it the same way you treat mobile testing since skipping it leads to the same kind of visible bugs.

You do not need special tools to start. In Chrome DevTools open the Rendering panel and switch the prefers-color-scheme emulation between light and dark. Then move on to real devices.

Pre-Launch Test Checklist

1. Emulate light and dark in Chrome DevTools and check every template

2. Test on an OLED phone and a regular LCD laptop

3. Test outdoors in daylight and in a dark room at low brightness

4. Run every text and border color pair through a contrast checker

5. Tab through each page to confirm focus rings show in both themes

6. Try Windows high contrast mode and 200% browser zoom

7. Reload with a saved dark choice and confirm there is no white flash

8. Print a page and check that the text prints dark on white

9. Open the site in Samsung Internet with its dark mode turned on

Ongoing Dark Mode Checklist

1. Test every new page template in both light and dark themes

2. Recheck contrast whenever brand colors are updated

3. Review third party widgets and embeds after their own updates

4. Audit forms and error states regularly since these get missed often

5. Keep a shared style guide so new team members follow the same rules

Sites that go through frequent updates benefit from folding this into regular upkeep. Our website maintenance and security service covers this kind of ongoing quality check for growing sites.

Dark Mode SEO, AEO and AI Search Visibility

Search engines do not rank pages differently because of light or dark mode. Google reads your HTML and content no matter which theme shows on screen. So dark mode itself has no direct ranking effect.

Where it matters is user experience. If a poorly built dark theme makes text hard to read visitors leave faster. The same goes for AI answer engines. Google AI Overviews, ChatGPT search and Perplexity all pull from pages that are well structured and easy to parse. A dark theme with broken contrast or text baked into images makes that harder.

Two notes for 2026. Google stopped showing FAQ rich results in May 2026 so FAQ markup no longer changes how your listing looks. Clear question and answer sections still help AI tools find direct answers. And a Princeton-led study on generative search found that adding sources, statistics and quotes raised a page's visibility in AI answers by up to 40% in its tests. That is why this guide names its sources and shows real numbers.

Clean semantic HTML with clear headings and readable text is what helps search and AI systems understand your page. Dark mode should never come at the cost of that structure.

Keeping SEO and AEO Strong Alongside Dark Mode

1. Keep heading structure and HTML identical across both themes

2. Keep all text as real HTML text in both modes and never bake it into images

3. Serve the same content to every visitor and change only the colors between themes

4. Test both themes for contrast since poor readability raises bounce rates

5. Keep FAQ answers short and direct so AI tools can quote them

6. Run a technical check after launch to confirm nothing broke in either mode

A quick technical pass using our free SEO audit tool can confirm your dark mode rollout did not introduce indexing or structure issues.

Conclusion

Good dark mode design comes down to a few habits. Start with a dark gray base and lighter layers. Soften your text and brand colors. Check contrast on every surface. Adapt your images. Then let visitors choose and remember what they picked.

Treat dark mode as its own design system from day one. Test it in real light and keep testing as the site grows. Built this way it gives visitors real comfort at night and keeps your brand looking right in both themes.

Frequently Asked Questions

How do you design a dark mode website?

Start with a dark gray base like #121212 and make raised surfaces slightly lighter. Use off-white text in three emphasis levels and lighter versions of your brand colors. Check contrast against WCAG. Then adapt your images and add a toggle that follows the device setting.

What is dark mode web design?

It is a website theme that uses dark backgrounds with light text instead of the standard white background with dark text. It is built as its own color system rather than a simple color flip.

What is the best background color for dark mode?

#121212 is a safe starting point and the default in Material Design. A tinted dark such as deep navy #0B1220 also works well. Use slightly lighter shades like #1E1E1E for cards and menus.

Does dark mode help with eye strain?

It can help in dim rooms and at night because the screen gives off less glare. For long reading in bright light most people still read better in light mode. Offering both is the safest choice.

Is pure black the best background for dark mode?

Usually not. Pure black next to bright white text often causes glare and a glow effect. Soft dark grays or deep navy tones with off-white text read better. True black can work on OLED-focused designs when the raised layers are lighter.

Does dark mode affect SEO rankings?

Not directly. Search engines rank based on content and HTML structure and not on visual theme. Poor readability in dark mode can still hurt engagement.

Should every website offer dark mode?

Not necessarily. Sites built around bright photography or long reading may benefit less. Dashboards, developer tools and content apps usually see the biggest upside.

What contrast ratio should dark mode text use?

Body text should meet at least 4.5 to 1 contrast against its background. Large headings can use 3 to 1. Input borders and focus rings need at least 3 to 1 as well.

Can dark mode save battery life?

On OLED and AMOLED screens yes. Purdue University researchers measured savings of 39% to 47% at full brightness but only 3% to 9% at normal indoor brightness. LCD screens save almost nothing.

How do I add dark mode to my website?

Store your colors as CSS custom properties. Detect the visitor's system preference with prefers-color-scheme. Then add a manual toggle that saves their choice.

Why does my dark mode page flash white when it loads?

The page paints before your theme script runs. Add a tiny inline script in the head that applies the saved theme. Set color-scheme in your HTML and CSS so the browser starts dark.

Do I need a toggle if my site follows the device setting?

A toggle is strongly recommended. Some people keep their phone light but want your site dark or the other way round. A three-way choice of light, dark or system covers everyone.

Why does my dark mode text look blurry?

Thin font weights often look faint or blurry on dark backgrounds. Increasing font weight slightly for dark mode usually fixes this.

Do images need separate treatment for dark mode?

Often yes. Logos with white backgrounds and photos with bright edges can look out of place. Many sites prepare separate transparent or adjusted versions for the dark theme.