SERIOUS UI BUG in DARK MODE

[oro106]

Using basic ChatGPT in dark mode/desktop. The input box appears with white background & white letters (UNREADABLE). Tested in light mode &

works fine, so bug is limited to dark mode.

[josh5]

I’m also getting this, it’s pretty much unusable in darkmode

[pdt2dssy8b]

dark mode or no mode. Same here.. Hopefully fixed soon.

[tewysxd]

Yup, same here, only light theme works

[_j]

I just got this massive interruption upon reload to even go look.

One has to scroll down to discover “try it” or “not now” about the image creator.

But I can’t reproduce a symptom of user chat messages becoming odd, nor the input box. Firefox on desktop, or going over to a different account, a different browser, what have you. The CTRL-Refresh without an ad blocker may have solved it all.

The big “totally friggin busted” is the “enter your password” field on Chromium - the placeholder text stays despite trying to type.

Lookin’ OK:

[cKingc05]

I had to make an extension to change the color. Here’s how to do it if you’d like a fix now.
(Used ChatGPT to make the instructions. This should work on any browser that supports Chrome extensions. Be aware that it also changes the color of the boxes in Light Mode, which causes black text on a gray background.)

Instructions for Creating a Chrome Extension to Change ChatGPT’s Text Color

1. Create a New Folder:

• Inside this folder, create three files: styles.css, manifest.json, and content.js.

2. Create the styles.css File:

• Open a normal text editor like Notepad and add the following content to the styles.css file:

.whitespace-pre-wrap {
    background-color: #303030;
}
.bg-token-message-surface { 
    background-color: #303030; 
}

Create the manifest.json File:

• Open a normal text editor like Notepad and add the following content to the manifest.json file:

{
  "manifest_version": 3,
  "name": "ChatGPT Style Fix",
  "version": "1.0",
  "description": "Temporary fix for ChatGPT text color bug.",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["*://chatgpt.com/*"],
      "js": ["content.js"]
    }
  ]
}

4. Create the content.js File:

• Open a normal text editor like Notepad and add the following content to the content.js file:

const style = document.createElement("style");
style.textContent = `.whitespace-pre-wrap { background-color: #303030; }`;
style.textContent = `.bg-token-message-surface { background-color: #303030; }`;
document.head.appendChild(style);

5. Load the Extension:

• Go to chrome://extensions/ (or the equivalent page for your browser, as long as it supports Chrome extensions).
• Turn on Developer Mode in the top right corner.
• Click Load unpacked and select the folder you created with the files.

[InnominatusAmbrosius]

Thank you so much. That really helps.

[oro106]

I would hire this guy to my company. What a quick fix…

[dll]

Super simple fix is just pasting the below in browser dev console.

function applyBackgroundColor() {
    document.querySelectorAll('.relative').forEach(function(div) {
        if (div.classList.contains('max-w-[var(--user-chat-width,70%)]')) {
            div.style.backgroundColor = '#303030';
        }
    });
}

if (localStorage.getItem('backgroundColorSet') !== 'true') {
    applyBackgroundColor();

    localStorage.setItem('backgroundColorSet', 'true');
} else {
    applyBackgroundColor();
}

const observer = new MutationObserver(function() {
    applyBackgroundColor();
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

[slab]

same here. white user message boxs in dark mode, windows 10 firefox latest

[bwhurd]

Actual rule to add would be (so it doesn’t mess up light mode):
.bg-token-message-surface {
background-color: var(–main-surface-secondary) !important;
}

Not sure where the whitespace-pre-wrap comes into play, but same strategy there so it works in dark and light modes.

[_j]

I have a much higher-level selector:

div[class~="group/conversation-turn"] {
	background-color: var(--main-surface-tertiary) !important;
	padding-left: 2.5rem !important;
}

That works in tandem with

.rounded-3xl.bg-token-message-surface {
	background-color: unset !important;
	max-width: 56rem !important;
	padding: 4px 0px 30px 0px !important;
	min-height: 40px !important;
}

Where the metrics are doing other stuff within other stuff I want.

I thus have not seen any symptom (although OpenAI keeps hitting the new image display with changes to see if one can keep up…)