A lightweight Chrome Extension that lets you customize Twitter/X interface colors with ease. Override inline styles and generated CSS classes to apply your own color themes.
☕ Support the Project: Love XTheme Engine? Buy me a coffee!
- 6 Prebuilt Themes: Dark Default, Midnight Blue, Deep Purple, Ocean Cyan, Amber Fire, and Monochrome
- Custom Color Pickers: Fine-tune any color (background, borders, text, accents) with an intuitive color picker
- Persistent Settings: All customizations sync across your devices via Chrome Storage
- Instant Application: Changes apply immediately without page refresh
- Live Sync: Theme changes from the popup instantly reflect on the page
- Lightweight: No dependencies, minimal overhead
X's Default Dark Theme vs XTheme Engine Default
| Original | XTheme Default |
|---|---|
 |
 |
🎨 Explore all 6 prebuilt themes:
Once published, you can install directly from the Chrome Web Store.
-
Clone or download this repository:
git clone https://github.com/yourusername/xtheme-engine.git cd xtheme-engine -
Open Chrome Extensions:
- Go to
chrome://extensions/in your browser - Enable Developer Mode (toggle in the top-right corner)
- Go to
-
Load the extension:
- Click "Load unpacked"
- Navigate to the
xtheme-enginefolder and select it
-
Start using it:
- Click the XTheme Engine icon in your Chrome toolbar
- Select a theme or customize individual colors
- Enjoy your personalized Twitter/X experience!
- Open the extension popup (click the XTheme Engine icon)
- Select a prebuilt theme from the dropdown
- Click "Apply Theme" or let it apply automatically
- Colors update on x.com instantly
-
Navigate to the "Custom Colors" section
-
Use the color pickers to adjust:
- Background: Page background color
- Card Background: Section/card backgrounds
- Border Color: Borders and dividers
- Text Primary: Primary text color
- Accent Color: Links and highlights
-
Reset to Theme: Click to clear all custom overrides and return to the active theme
XTheme Engine injects CSS overrides into Twitter/X that target:
- The
<body>inline style (background color) - Generated CSS classes (
.r-kemksi,.r-5zmot,.r-1kqtdi0, etc.) - Uses
!importantto override X's inline styles
Settings are stored in chrome.storage.sync, which means:
- Changes persist across sessions
- Settings sync across all your devices (when logged into Chrome)
- Real-time updates when switching themes in the popup
xtheme-engine/
├── manifest.json # Chrome Extension manifest (v3)
├── background.js # Service worker for initialization
├── content/
│ └── inject.js # Injects and manages theme CSS
├── popup/
│ ├── popup.html # Theme selector UI
│ ├── popup.js # Popup logic and color picker handling
│ └── popup.css # Popup styling
├── README.md # This file
└── project-spec.md # Original project specification
Each theme or custom override uses these color keys:
bodyBg: Page backgroundcardBg: Card/section backgroundsoverlayBg: Overlay/modal backgroundsborderColor: Border and divider colorstextPrimary: Primary text coloraccentBlue: Accent color (links, buttons)
{
"activeTheme": "darkDefault", // Current theme name
"customOverrides": { // Custom color overrides (hex)
"bodyBg": "#0f172a",
"cardBg": "#1e293b"
// ... etc
}
}.r-kemksi). While we've identified the main color-related classes, X may change these class names during their update cycles. If this happens, the extension may stop working until class names are remapped.
The extension will be monitored for X updates and maintained accordingly.
- Dynamic CSS class detection (automatic fallback if X changes class names)
- Theme import/export (JSON)
- Additional appearance options (typography, spacing, border-radius)
- Firefox support
- Theme marketplace/sharing
- Time-based theme switching (dark at night, light during day)
Edit content/inject.js and popup/popup.js:
-
Add theme to
getThemes()ininject.js:newTheme: { name: 'New Theme', colors: { bodyBg: 'rgb(r, g, b)', cardBg: 'rgb(r, g, b)', overlayBg: 'rgb(r, g, b / alpha%)', borderColor: 'rgb(r, g, b)', textPrimary: 'rgb(r, g, b)', accentBlue: 'rgb(r, g, b)' } }
-
Add theme object to the
themesconstant inpopup.js -
Add
<option>to the select inpopup.html:<option value="newTheme">New Theme</option>
If you discover a new X CSS class that should be themed:
- Edit the
buildThemeCSS()function in content/inject.js - Add a new rule:
.your-class-name { property: ${colors.colorKey} !important; }
Contributions are welcome! Here's how to help:
- Report Issues: Found a broken class name or theme? Open an issue.
- Suggest Themes: Have a cool color palette? Submit it as an issue or PR.
- Code Improvements: Fork, improve, and submit a pull request.
- Testing: Test on different X pages/devices and report findings.
MIT License – See LICENSE file for details.
This extension is not affiliated with Twitter/X. It's a community project to enhance user experience. Use at your own risk. Keep in mind that X's UI changes may temporarily break the extension until class names are updated.
- Found a bug? Open an issue
- Have a feature request? Let us know
Enjoy your customized Twitter/X experience!
