SERIOUS UI BUG in DARK MODE

ChatGPT Bugs
6

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.
1 Like