Writing block (md/txt/email editor) keeps ChatGPT's default background in dark mode
- Dominant language
- CSS
- Stars
- 5
- Forks
- 3
- PR merge metrics
- No merged PRs in 30d
Description
## What happens
Chat bubbles, code blocks, popups, composer: all themed nicely. But ChatGPT's writing block, the editor card you get for canvas-style output like `.md` files, draft emails and documents, holds onto its stock `#2a2a2a`. The result is a pale gray slab sitting in the middle of an otherwise Dracula chat.
Odd detail: the card's header row themes fine. Only the body underneath misses out.
## Repro
1. Install the theme in Stylus, ChatGPT in dark mode.
2. Ask for something that renders as a writing block. "Write a sample email" does it.
3. The body renders `#2a2a2a` instead of `#282a36`.
## Screenshots
Before:
After:
## Why it happens
Two things stack up here.
The class isn't covered. Writing blocks ship their background utilities with Tailwind's forced-important modifier (`bg-token-bg-primary!`, `dark:bg-[#2a2a2a]!`), which compile to different class names than the `.dark\:bg-\[\#2a2a2a\]` that the "Chat Input Block" rule already targets. The body surface then lives on an inner wrapper that no current rule reaches at all.
Specificity ties lose the race. Writing this fix with the theme's usual `:where(.dark, .dark *):not(…)` pattern lands on exactly the same specificity as ChatGPT's own rule. The writing-block stylesheet loads lazily and sometimes gets injected after Stylus's sheet, so the tie breaks ChatGPT's way and the theming flickers off. Adding `html.dark` wins every time, whatever the load order.
## The fix
```css
html.dark [data-writing-block="true"] .relative.z-\[1\] {
background-color: var(--bg-primary) !important;
}
```
One rule does it. It keys off the semantic `data-writing-block` attribute rather than the component's hashed CSS-module classes (`mt4SwW_editor` and friends), since those are build output and rotate on every ChatGPT deploy. Scoping to that container also stops the very generic `.relative.z-[1]` from splashing onto unrelated elements.
PR incoming.
Contributor guide
No contributing guide indexed for this repository
Research direction
Reproduce the issue in ChatGPT dark mode by generating a writing block, then locate the theme's main CSS stylesheet and inspect the existing Chat Input Block rule alongside the writing-block markup. Confirm that the writing-block body uses the Dracula background while its header and unrelated surfaces remain unchanged; the issue includes the proposed selector and expected colors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 35/100