dracula / dracula/chatgpt

Writing block (md/txt/email editor) keeps ChatGPT's default background in dark mode

Open
#4 0 comments 0 reactions 0 assignees View on GitHub
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:

Image

After:

Image

## 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.