Found a problem where the message window appears white in dark mode

[yeung1715]

Subject: [Bug Report] My messages are unreadable in dark mode

Hello, I’ve encountered a visibility issue in ChatGPT’s dark mode.
After a recent update, my own message bubbles appear with a white background and white (or nearly white) text — making it extremely difficult to read.

This didn’t happen before. It only occurs in “Dark Mode”; when I switch to “System” or “Light Mode,” the issue disappears.

Please investigate this — it seems like a UI regression that impacts accessibility and user experience. I’ve attached a screenshot for reference.

Thank you!

[dirk.puehl]

Same here! Comment to see updates

[tewysxd]

Same here, only light theme fix this problem which I dont want

[pdt2dssy8b]

same. have tried everything. seems to have no fix for now.

[yeung1715]

I’m currently using Chrome, and the issue still seems unresolved.
I’ve tried clearing the cache, switching Chrome themes, and even using incognito mode, but nothing worked.
I think this might be something the GPT UI team needs to look into.

[quentinbragard]

I have the same issue and have identified the cause :

It comes from : @media (prefers-reduced-transparency: reduce) {
:is(html,.light,.dark .light) {
–message-surface: #f4f4f4;
}
}

There is a missing comme between .dark and .light Without the comma, it’s selecting light-themed elements inside dark-themed containers.

To fix it (before a chatGPT official fix, you can go in the developper console (F12 or inspect an element) and in the styles, you look at --message-surface and when you see the rule, add the missing comma yourself

[e9afcfd4942b52cc6c07]

Yes. This is happening with me in Chrome and Edge. But firefox works fine.
I’m wondering why is it happening to only some of us.

[RedShewhart]

Same here. Chrome, extensions disabled for chatgpt website

[e9afcfd4942b52cc6c07]

thanks a lot. this works. but only until you refresh the page. Is this a chrome/edge problem or chatgpt?

[quentinbragard]

I suspect a chatGPT issue as it can be fixed by adding a comma in the code

[deezel]

ok, updated, not just for the already posted messages

For the lazy one, crate a bookmark, name it what you want (Dark mode fix for ChatGPT)

Put this in the address field, run from bookmark on chatgpt.

javascript:(() => {
const root = document.querySelector(‘:root’);
if (root) {
root.style.setProperty(‘–message-surface’, ‘#424242’);
} else {
console.log(‘ Could not find :root to patch’);
}
})();

[jonathanpsloan98]

Also happening on Opera GX

[undividedsun]

Happening to me too, sucks cause with eye issues I can’t use it on light or system mode.

[Sixtic]

OMG SAME THING! It comes with the new update no? Some bug or something… I really hate it tho

[zhadrak]

Here is a substantial fix I discovered to remedy this problem (at least for those who use a Chrome based web browser).

1. Go to the settings in ChatGPT and set the Theme to Light.

2. Next, go to the webstore for extensions:

3. Search for/download the dark mode extension Dark Reader by darkreader_dot_org.

4. Assuming you know how to “pin [an] extension to [the] toolbar” and click on it’s icon, all you need do then is simply turn in on aaaaaand…
   VOILÀ!!
   Problem solved. The natural order has been restored.
   

Here’s a screenshot of the How-To PDF that ChatGPT came up with. Apparently ya can’t upload PDF’s on this forum.

[Sixtic]

Im using Brave and I have the exact problem

[zhadrak]

Here’s a screenshot of my most recent GPT chat for those you require proof.

[theieltsix]

Getting a shady third party plugin is not really a good solution.

How can a giant tech company make a mistake that even junior programmers or web designers with 2 weeks of experience wouldn’t make smh

[undividedsun]

This is the way.!!!

[lNDlGO]

Quick permanent fix (even after refreshing page)

1. Download TamperMonkey to create a new script
2. Copy & paste the script, save and refresh ChatGPT

> // ==UserScript==
> // @name         Bubble color fix
> // @namespace    http://tampermonkey.net/
> // @version      1.1
> // @description  Fixes user speech bubble in dark mode because of missing comma (makes it use the light mode)
> // @match        https://chatgpt.com/*
> // @grant        none
> // ==/UserScript==
> 
> (function () {
>     'use strict';
> 
>     const style = document.createElement('style');
>     style.textContent = `
>         @media (prefers-reduced-transparency: reduce) {
>             :is(html, .light, .dark, .light) {
>                 --message-surface: #2f2f2f !important;
>             }
>         }
>     `;
>     document.head.appendChild(style);
> })();