How to Restore Twitter/X Dim Mode with Custom CSS

Restore "Dim" Mode on X (Twitter)

X recently removed the classic Dark Blue (Dim) theme. If you find the "pure black" layout too harsh, you can restore the original aesthetic using this custom CSS script.

💻 Desktop (PC/Mac)

• Install the Control Panel for Twitter extension.
• Paste the code below into the Custom CSS box in settings.

📱 Mobile (Safari/Android)

• iOS: Use Safari with the Control Panel extension app.
• Android: Use Kiwi Browser to support extensions.

🎨 Stylus Extension User?

If you prefer using the Stylus manager, you can install the pre-configured theme directly or view more details here:

View Stylus Extension Info

📋 Here is the script for Control Panel for Twitter extension:

:root {
    --black: #15202b !important;
    --background-color: #15202b !important;
    --colors-background-main: #15202b !important;
}

html, body, #react-root, [role="main"], 
[data-testid="primaryColumn"], [data-testid="sidebarColumn"],
[role="menu"], [data-testid="dropdown"], [data-testid="hoverCard"] {
    background-color: #15202b !important;
}

[role="region"], [role="complementary"], 
[data-testid="trend"], [data-testid="UserCell"], 
section, article, [role="menu"] div, [data-testid="hoverCard"] div,
[data-testid="primaryColumn"], [data-testid="sidebarColumn"] {
    background-color: #15202b !important;
    border-color: #38444d !important;
}

[role="dialog"], #layers div[aria-modal="true"], 
#layers div[role="menu"], [data-testid="tweetTextarea_0"],
.public-DraftEditor-content {
    background-color: #15202b !important;
    background: #15202b !important;
    opacity: 1 !important;
}

[data-testid="mask"] {
    background-color: rgba(21, 32, 43, 0.7) !important;
}

[data-testid="typeaheadFocus"], [data-testid="SearchFilters_Typeahead_Results"], [role="listbox"], [data-testid="typeaheadResult"] {
    background-color: #15202b !important;
    border: 1px solid #38444d !important;
}

div:not([role="dialog"] *):not([role="menu"] *):not([data-testid="hoverCard"] *):not(#layers *):not([data-testid="tweetTextarea_0"] *):not([data-testid="typeaheadFocus"] *) {
    background-color: transparent;
}

span, h1, h2, h3, p, input, textarea, div[dir="auto"], 
article [data-testid="tweetText"], 
[data-testid="User-Name"] div[dir="ltr"]:first-child span {
    color: #ffffff !important;
}

/* Links & Interactive Elements */
a, [role="link"], [role="button"], [data-testid="editProfileButton"], nav a[role="link"] {
    color: #1d9bf0 !important;
}

span:has(> time), 
time, 
[data-testid="User-Name"] div[dir="ltr"]:last-child span,
div[style*="color: rgb(113, 118, 123)"] span,
div[style*="color: rgb(83, 100, 113)"] span {
    color: #8899a6 !important;
}

[data-testid$="follow"], [data-testid*="tweetButton"], [data-testid="confirmationSheetConfirm"], [data-testid="confirmationSheetCancel"] {
    background-color: #eff3f4 !important;
}

[data-testid$="follow"] span, [data-testid*="tweetButton"] span, [data-testid="confirmationSheetConfirm"] span, [data-testid="confirmationSheetCancel"] span {
    color: #0f1419 !important;
}

[data-testid="AppTabBar_Notifications_Link"] div[dir="ltr"] {
    background-color: #1d9bf0 !important;
    border-radius: 50%;
}

[data-testid="AppTabBar_Notifications_Link"] span, div[data-testid="pillLabel"] span {
    color: #ffffff !important;
}

div[data-testid="pillLabel"] {
    background-color: #1d9bf0 !important;
}

nav[aria-label="Footer"]::after {
    content: "Dim Mode by @DanielZahoor";
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 20px !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    background: linear-gradient(135deg, #7f8c8d 0%, #bdc3c7 50%, #7f8c8d 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

Note: Ensure your X display settings are set to "Lights Out" (Pure Black) before applying this CSS for the best result. This is not final version.