A Chrome extension that restores the classic Dim (dark navy) color scheme to x.com, replacing the Lights Out pure-black theme.
X.com still ships the full Dim theme CSS variables internally, but no longer exposes it as a user-selectable option. This extension flips the theme attribute back to "dim" and patches the hardcoded black colors that bypass X's theme system.
-
Theme attribute override — A content script sets
data-theme="dim"on both<html>and<body>atdocument_start(before X's JS runs) and usesMutationObserverto keep it from being reset. -
CSS overrides — A stylesheet catches all the places X hardcodes pure black outside the CSS variable system: React Native Web utility classes, Tailwind classes (
bg-black,dark:bg-black, gradients), inline styles, and sticky headers. -
Fallback variables — A complete copy of X's Dim CSS variable definitions is included in case they're ever removed from the site.
| Role | Color | Value |
|---|---|---|
| Primary background | #15202B |
hsl(210, 34%, 13%) |
| Secondary background | #192734 |
hsl(213, 25%, 16%) |
| Hover/elevated background | #253341 |
hsl(211, 24%, 20%) |
| Border | #3D5466 |
hsl(210, 21%, 28%) |
- Clone this repository
- Open
chrome://extensionsin Chrome - Enable Developer mode
- Click Load unpacked and select the project folder
| File | Purpose |
|---|---|
manifest.json |
Manifest V3 extension config |
content.js |
Sets and maintains data-theme="dim" on the page |
styles.css |
CSS overrides for hardcoded black colors |
dim-theme-fallback.css |
Complete Dim CSS variable definitions extracted from x.com |
icons/ |
Extension icons (16, 32, 48, 128px) |
MIT