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[data-theme="dark"] {
  --background: 215, 29%, 13%;
  --border: 206, 16%, 26%;
}

:root {
  --dim-background-color: rgb(21, 32, 43);
  --dim-background-color-hover: rgb(30, 39, 50);
  --dim-backdrop-background-color: rgba(21, 32, 43, .85);
  --dim-color: rgb(139, 152, 165);
  --dim-border-color: rgb(56, 68, 77);
  --silver-gradient: linear-gradient(145deg, #bdc3c7, #ffffff, #8e9eab);
}

/* Background & Layout Corrections */
body[style*="background-color: rgb(0, 0, 0)"] {
  background-color: var(--dim-background-color) !important;
}

.r-kemksi { background-color: var(--dim-background-color); }
.r-5zmot { background-color: var(--dim-backdrop-background-color); }
.r-1shrkeu { background-color: var(--dim-border-color); }
.r-1hdo0pc, .r-g2wdr4 { background-color: var(--dim-background-color-hover); }

.r-1kqtdi0, .r-1igl3o0, .r-2sztyj, .r-1roi411, .r-gu4em3 {
  border-color: var(--dim-border-color);
}

/* Typography */
.r-1bwzh9t, .draftjs-styles_0 .public-DraftEditorPlaceholder-root {
  color: var(--dim-color);
}

[style*="color: rgb(113, 118, 123)"],
[style*="-webkit-line-clamp: 3; color: rgb(113, 118, 123)"],
[style*="-webkit-line-clamp: 2; color: rgb(113, 118, 123)"],
input::placeholder {
  color: var(--dim-color) !important;
}

/* Specialized Element Fixes */
[style*="background-color: rgb(0, 0, 0); border-color: rgb(47, 51, 54)"],
[style*="border-color: rgb(47, 51, 54); background-color: rgb(0, 0, 0)"] {
  background-color: var(--dim-background-color) !important;
}

[style*="border-color: rgb(47, 51, 54)"].r-1che71a {
  background-color: var(--dim-background-color-hover);
}

/* --- SILVER FOLLOW BUTTON WITH SHINE EFFECT --- */
[data-testid$="-follow"] {
  background: var(--silver-gradient) !important;
  color: #15202b !important; /* Dark text for contrast on silver */
  font-weight: 800 !important;
  border: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

/* The Shine/Swoosh Effect */
[data-testid$="-follow"]::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 50%;
  height: 200%;
  background: rgba(255, 255, 255, 0.6);
  transform: rotate(30deg);
  transition: none;
}

/* Hover State */
[data-testid$="-follow"]:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

/* Trigger Shine on Hover */
[data-testid$="-follow"]:hover::after {
  left: 150%;
  transition: left 0.6s ease-in-out;
}

/* Footer Credit */
nav[aria-label="Footer"]::after {
  content: "Dim Mode by @DanielZahoor";
  display: block;
  margin-block-start: 24px;
  padding-block: 6px;
  font-size: 0.6875rem;
  font-weight: 450;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, currentColor 55%, transparent);
  text-align: center;
  border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
}

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.