Skip to content

Legacy Dark Mode

How to customize ChatGPT dark mode with CSS

Updated June 15, 2026

Quick answer

Customizing ChatGPT's background color with CSS requires a style manager like Stylus to inject custom overrides. You can write CSS targeting the page root to replace pure black with gray, but this method is highly fragile. OpenAI updates its class names and DOM structures frequently, which breaks user styles without warning. GPT Master removes this maintenance chore by watching and automatically stripping ChatGPT's OLED attributes, keeping the soft-gray theme intact.

Many users turn to custom user styles to bypass ChatGPT's pure-black layout. While writing your own CSS rules offers full design control, it turns into a recurring project. Every minor update to the ChatGPT interface risks breaking your custom styles and forcing you to rewrite your code.

  1. 1

    Install a style manager like Stylus

    Add a user style extension to your browser to allow custom stylesheet injection on specific websites.

  2. 2

    Create a style rule for ChatGPT

    Add a new style target for chatgpt.com. Use the CSS code [data-oled] { --main-surface-primary: #202123; } or target the root variables to override the dark background.

  3. 3

    Use GPT Master for a maintenance-free fix

    If custom CSS breaks after a ChatGPT update, install GPT Master. Turn on Legacy Dark Mode in the Quick Controls popover to restore the gray layout without writing code.

GPT Master

Stop editing code to fix your theme. Restore the gray theme instantly.

Add to Chrome · Free

Frequently asked questions

Why does my custom ChatGPT CSS keep breaking?
ChatGPT is built as a single-page app and receives frequent updates. When OpenAI changes internal class names or theme attributes, your custom selectors no longer match the page elements.
Does Stylus or custom CSS slow down my browser?
Injecting a few lines of CSS has negligible performance impact. However, keeping stylesheets updated as the site changes requires manual effort.
How does GPT Master handle dark mode differently than CSS?
Instead of relying on fragile CSS class selectors, the extension monitors the root page attributes. When the OLED theme indicator appears, GPT Master removes it directly.

Related guides

Ready to fix this for good?

Stop editing code to fix your theme. Restore the gray theme instantly.

Add to Chrome · Free

Make ChatGPT work the way you actually use it.

★★★★★ 4.8 on Chrome Web Store 4,000+ Power Users Free to install

Add to Chrome