Google Chrome 110.0.5481.177 arm67 Dark Mode Not Rendering Correctly #8726

dcs3spp · 2023-03-02T19:32:55Z

dcs3spp
Mar 2, 2023

Hi,

I have created a landing page that displays fine on Firefox, Safari and Google Chrome (Chrome on Linux and MacOS (Intel)). However, on a MacOS M1(arm64) when viewed in Chrome 110.0.5481.177 it fails to render in dark mode correctly as shown here.

Interestingly, if I try viewing the site in incognito mode or using a guest profile in chrome, the dark mode functions as expected. I have tried clearing the local and session storage in chrome for the user profile, in addition to all browsing data and the problem still persists.

Has anyone else encountered something similar with Docusaurus and Chrome 110.0.5481.177+ on Apple Mac
M1 arm64?

The custom.css is listed below:

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");

/* You can override the default Infima variables here. */

:root {
  --ifm-color-primary: #2e8555;
  --ifm-color-primary-dark: #29784c;
  --ifm-color-primary-darker: #277148;
  --ifm-color-primary-darkest: #205d3b;
  --ifm-color-primary-light: #33925d;
  --ifm-color-primary-lighter: #359962;
  --ifm-color-primary-lightest: #3cad6e;
  --ifm-color-secondary: #d9d9d9;
  --ifm-color-secondary-dark: #e6e6e6;
  --ifm-color-secondary-darker: #d9d9d9;
  --ifm-color-secondary-darkest: #ff1744;
  --ifm-font-family-base: "Roboto";
  --ifm-code-font-size: 90%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: #25c2a0;
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* Slighly increase the default font size and reduce the size of h1 heading */
@media screen and (max-width: 996px) {
  :root {
    --ifm-font-size-base: 18px;
  }
  article header h1 {
    font-size: 1.5rem !important;
  }
  .hero .hero__title {
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 997px) {
  :root {
    --ifm-font-size-base: 17px;
  }
  article header h1 {
    font-size: 2rem !important;
  }
}

/* Icons for light and dark mode */

.navbar__icon:before {
  content: "";
  display: flex;
  height: 24px;
  width: 24px;
  background-color: var(--ifm-navbar-link-color);
}

.navbar__icon:hover:before {
  background-color: var(--ifm-navbar-link-hover-color);
}

.navbar__github:before {
  mask: url("@site/static/img/navbar/github.svg") no-repeat 100% 100%;
  mask-size: cover;
}

.navbar__gitlab:before {
  mask: url("@site/static/img/navbar/gitlab.svg") no-repeat 100% 100%;
  mask-size: cover;
}

.navbar__wordpress:before {
  mask: url("@site/static/img/navbar/wordpress.svg") no-repeat 100% 100%;
  mask-size: cover;
}

#infographic {
  margin: 0 auto;
  width: 50%;
}

@media screen and (min-width: 280px) {
  #infographic {
    margin: 0 auto;
    width: 50%;
  }
}

Advait251206 · 2026-07-01T05:00:43Z

Advait251206
Jul 1, 2026

This issue is almost certainly not specific to Docusaurus itself, but rather a combination of:

Chrome 110 on Apple Silicon (M1 / arm64)
A cached theme preference or stored UI state
A dark-mode CSS variable override getting “stuck” in that profile

The key clue is this:

Works in Incognito / Guest profile, but not in normal profile

That almost always means something persisted in localStorage, cookies, or cached CSS variables is overriding your theme logic.

Likely root cause

Docusaurus dark mode relies on:

data-theme="dark" on <html> or <body>
A value stored in localStorage (usually theme)

If that value becomes inconsistent (for example "dark" is stored but DOM class is not properly updated), you get exactly what you’re seeing:
✔ site loads
❌ but CSS variables don’t match expected theme state

Why it happens only on one Chrome profile

Because Incognito:

does NOT reuse localStorage
does NOT reuse service workers
does NOT reuse cached theme state

So it forces a clean theme initialization.

Normal profile = polluted state persists.

What to check first (most important)

Open DevTools → Console and run:

localStorage.getItem('theme')

Also check:

document.documentElement.getAttribute('data-theme')

If these disagree, that’s your bug.

Fixes

1. Reset Docusaurus theme storage

Run in console:

localStorage.removeItem('theme');
location.reload();

Or hard reset everything:

localStorage.clear();

2. Force correct theme initialization

In docusaurus.config.js, ensure you are NOT overriding theme logic incorrectly:

themeConfig: {
  colorMode: {
    defaultMode: 'light',
    respectPrefersColorScheme: true,
    disableSwitch: false,
  },
}

3. Check custom CSS for dark-mode conflicts

Your CSS uses:

[data-theme="dark"] {

That is correct — but issues happen if:

another stylesheet overrides variables
or :root variables are not fully compatible

One suspicious line:

--docusaurus-highlighted-code-line-bg

Make sure nothing outside this file is overriding html or body background in a hard-coded way like:

body {
  background: white !important;
}

That breaks dark mode in some Chrome builds.

4. Chrome 110-specific issue (important context)

Chrome 110 had known quirks with:

CSS variable repainting
cached :root variable resolution in some GPU paths on Apple Silicon

Fix is usually:

clearing profile cache
or forcing repaint via small CSS tweak:

html {
  color-scheme: light dark;
}

This improves dark-mode correctness in older Chromium builds.

Most probable explanation (based on your symptom)

👉 Corrupted or stale localStorage theme value in that Chrome profile

Because:

Incognito works ✔
clearing storage didn’t fully reset theme logic (likely service worker involved)
only affects dark mode rendering

Quick definitive fix checklist

Try in order:

Hard refresh + clear site data
Remove service worker (Application tab → unregister)
Run:
```
localStorage.clear()
```
Reopen site

Summary

This is not a Docusaurus bug — it's almost always:

stale persisted theme state + Chrome profile-specific cache issue

If this answer helped or pointed you in the right direction, I'd appreciate it if you could mark it as the accepted answer so it's easier for others with the same issue to find.

Also, if you found my contribution useful, I'd appreciate it if you could check out my GitHub profile, follow me, and star any repositories you find interesting.

GitHub: https://github.com/Advait251206

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Google Chrome 110.0.5481.177 arm67 Dark Mode Not Rendering Correctly #8726

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Uh oh!

Google Chrome 110.0.5481.177 arm67 Dark Mode Not Rendering Correctly #8726

Uh oh!

Uh oh!

dcs3spp Mar 2, 2023

Replies: 1 comment

Uh oh!

Advait251206 Jul 1, 2026

Likely root cause

Why it happens only on one Chrome profile

What to check first (most important)

Fixes

1. Reset Docusaurus theme storage

2. Force correct theme initialization

3. Check custom CSS for dark-mode conflicts

4. Chrome 110-specific issue (important context)

Most probable explanation (based on your symptom)

Quick definitive fix checklist

Summary

dcs3spp
Mar 2, 2023

Advait251206
Jul 1, 2026