Broken Dark Theme which is totally BLACK

ChatGPT Bugs
1

For those who struggle with eye strain due to ChatGPT interface dark theme being pitch black, here’s an idea.

Installed Stylus extension and create this new StyleSheet

:root {
--main-grey: #202124;
--panel-grey: #252629;
--panel-grey-2: #2b2c30;
--input-grey: #303136;
--hover-grey: #34363a;
--text-main: #ededed;
--text-soft: #c9c9c9;
}

/* Main backgrounds /
html,
body,
main,
#__next,
[data-testid],
[class="bg-black"],
[class*="bg-token-main-surface-primary"],
[class*="bg-token-main-surface-secondary"],
[class*="bg-token-main-surface-tertiary"],
[class*="bg-token-sidebar-surface-primary"],
[class*="bg-token-sidebar-surface-secondary"] {
background-color: var(--main-grey) !important;
}

/* Sidebar /
nav,
aside,
[class="sidebar"],
[class*="SideBar"],
[class*="bg-token-sidebar"] {
background-color: var(--panel-grey) !important;
}

/* Cards, menus, suggestions, popups /
div,
section,
article,
form,
button,
[role="menu"],
[role="dialog"],
[role="listbox"],
[role="option"],
[class="rounded"],
[class*="shadow"],
[class*="popover"],
[class*="menu"],
[class*="card"] {
background-color: transparent !important;
}

/* Prompt box */
form,
textarea,
input,
[contenteditable="true"],
.ProseMirror {
background-color: var(--input-grey) !important;
color: var(--text-main) !important;
caret-color: white !important;
}

/* Prompt container */
form:has(textarea),
form:has(.ProseMirror),
div:has(> textarea),
div:has(> .ProseMirror) {
background-color: var(--panel-grey-2) !important;
border-color: #44464c !important;
}

/* Suggestion area under prompt */
main div:has(svg) {
background-color: transparent !important;
}

/* Buttons / pills */
button,
a,
[role="button"] {
color: var(--text-main) !important;
}

button:hover,
a:hover,
[role="button"]:hover {
background-color: var(--hover-grey) !important;
}

/* Text */
body,
div,
span,
p,
h1,
h2,
h3,
h4,
h5,
h6,
label,
textarea,
input,
[contenteditable="true"],
.ProseMirror {
color: var(--text-main) !important;
}

/* Placeholder / faded text /
::placeholder,
.text-token-text-secondary,
[class="text-token-text-secondary"],
[class*="placeholder"] {
color: var(--text-soft) !important;
opacity: 1 !important;
}

/* Links stay blue */
a,
a span {
color: #6bb6ff !important;
}

/* Remove pure black leftovers */
[style="background-color: rgb(0, 0, 0)"],
[style="background: rgb(0, 0, 0)"],
[style="background-color: black"],
[style="background: black"] {
background-color: var(--panel-grey) !important;
}

/* Remove black gradient behind the prompt /
main div[class="sticky"],
main div[class*="fixed"],
main div[class*="absolute"],
div[class*="from-black"],
div[class*="to-black"],
div[class*="via-black"],
div[class*="bg-gradient"],
div[class*="gradient"] {
background: var(--main-grey) !important;
background-image: none !important;
}

/* Make the inside textbox match the prompt box */
textarea,
textarea *,
[contenteditable="true"],
[contenteditable="true"] *,
.ProseMirror,
.ProseMirror *,
div[contenteditable="true"],
div[contenteditable="true"] *,
form textarea,
form [contenteditable="true"],
form .ProseMirror {
background: var(--panel-grey-2) !important;
background-color: var(--panel-grey-2) !important;
color: var(--text-main) !important;
}

/* Prompt placeholder */
textarea::placeholder,
.ProseMirror p.is-empty::before,
[contenteditable="true"]::before {
color: var(--text-soft) !important;
opacity: 1 !important;
}

/* Kill bottom fade / gradient under prompt /
div[class="bg-gradient-to-t"],
div[class*="bg-gradient-to-b"],
div[class*="from-token-main-surface-primary"],
div[class*="to-token-main-surface-primary"],
div[class*="from-black"],
div[class*="to-black"],
div[class*="via-black"] {
background: var(--main-grey) !important;
background-image: none !important;
}

/* Bottom composer wrapper */
main > div:last-child,
main form,
main form::before,
main form::after,
main div:has(form),
main div:has(form)::before,
main div:has(form)::after {
background: var(--main-grey) !important;
background-image: none !important;
box-shadow: none !important;
}

/* Opaque popup / chat menu */
[role="menu"],
[role="menu"] *,
div[data-radix-popper-content-wrapper],
div[data-radix-popper-content-wrapper] *,
div[data-side],
div[data-side] * {
background-color: #2b2c30 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

/* Menu container */
[role="menu"],
div[data-radix-popper-content-wrapper] > div,
div[data-side] {
border: 1px solid #4a4c52 !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
}

/* Menu items */
[role="menuitem"],
[role="menuitem"] *,
div[data-radix-collection-item],
div[data-radix-collection-item] * {
background-color: #2b2c30 !important;
color: #f1f1f1 !important;
}

/* Menu hover */
[role="menuitem"]:hover,
div[data-radix-collection-item]:hover {
background-color: #3a3c42 !important;
}

/* Remove square background behind rounded boxes */
div:has(> textarea),
div:has(> .ProseMirror),
div:has([contenteditable="true"]),
div:has(pre),
div:has(code) {
background: transparent !important;
background-color: transparent !important;
}

/* Keep actual rounded prompt/code blocks visible /
form,
form:has(textarea),
form:has(.ProseMirror),
.ProseMirror,
textarea,
pre,
code,
[class="rounded"] pre,
[class*="rounded"] code {
background-color: var(--panel-grey-2) !important;
}

/* Code block wrapper */
div:has(> pre),
div:has(> code),
pre:has(code) {
border-radius: 12px !important;
overflow: hidden !important;
background-color: var(--panel-grey-2) !important;
}

/* Remove square plate behind prompt rounded corners */
main form,
main form > div,
main form > div > div,
main form div:has(textarea),
main form div:has(.ProseMirror),
main form div:has([contenteditable="true"]) {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}

/* Keep the real prompt box grey */
main form textarea,
main form .ProseMirror,
main form [contenteditable="true"] {
background: var(--panel-grey-2) !important;
background-color: var(--panel-grey-2) !important;
}

/* Force outer prompt container to clip correctly */
main form {
border-radius: 28px !important;
overflow: hidden !important;
}

/* Hide "ChatGPT can make mistakes..." warning /
div:has(> span):has(a[href="help.openai.com"]),
div:has(> span):has(a[href*="chatgpt.com"]),
div:has(> span):has(a):has(span),
div:has(span) {
text-shadow: none !important;
}

/* Hide only the small centered disclaimer above prompt /
main div:has(> div > span):has(a[href="help.openai.com"]),
main div:has(> span):has(a[href*="help.openai.com"]),
main div:has(a[href*="help.openai.com"]) {
display: none !important;
}

/* Hide bottom mistake warning */
[data-testid="thread-disclaimer"],
[data-testid="thread-disclaimer"] * {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
2

Hey geardoom3, that could definitely be helpful.

I'm curious though..how well does the styling hold up after ChatGPT interface updates? Which selectors usually end up needing changes?

Avinash

3

It’s a very welcome help from Stylus. ChatGPT helped me to finalize the CSS so any bad residue is eliminated.

image.png1747×2032 181 KB

It’s best to look at the CSS that ChatGPT gave me

4

The softer grey palette looks much easier on the eyes than a pure black background :)

Avinash

5

I don’t understand what they’re waiting for to fix that.

6

I'll pass this feedback along to the product team so they can review it and decide whether it can be implemented.

In the meantime, I'll be closing this topic.

Avinash