It's December 2025 and the BBC website at https://www.bbc.co.uk/ still doesn't have automatic dark mode detection. In an era where virtually every major website respects the prefers-color-scheme media query, the BBC continues to blast users with a bright white interface regardless of their OS settings.
The frustrating part? It would be trivially easy for them to add. The CSS @media (prefers-color-scheme: dark) query has been widely supported since 2019. Six years later, we're still waiting.
The DIY Fix: Stylus Browser Extension
Until the BBC catches up with the rest of the internet, you can fix it yourself using the Stylus browser extension. Here's how:
Step 1: Install Stylus
Install the Stylus extension for your browser:
Step 2: Create a New Style
- Click the Stylus extension icon in your browser toolbar
- Click "Manage" to open the Stylus dashboard
- Click "Write new style" (or the + button)
- Give it a name like "BBC Dark Mode"
Step 3: Configure the URL Pattern
Important: You need to set this style to apply to all BBC pages. In the style editor:
- Click "Specify" next to "Applies to"
- Select "URLs starting with"
- Enter:
https://www.bbc.co.uk/
Step 4: Paste the CSS
Copy and paste the following CSS into the code editor:
/* This media query checks the user's OS preference */
@media (prefers-color-scheme: dark) {
/* 1. Base Colors: Set the background of the whole page and the main text color */
body {
background-color: #121212 !important; /* Dark gray background */
color: #e0e0e0 !important; /* Light gray text */
}
/* 2. Primary Containers: Override white backgrounds on main content blocks, HEADER, NAV, FOOTER, and individual news cards */
header,
nav,
footer,
article,
aside,
.nw-c-most-read-list,
.gs-c-promo-body, /* Targets the body of a promotional card */
.gs-c-promo, /* Targets the promotional card itself */
.nw-o-keyline, /* Targets common section separators/containers */
.ssrcss-11vwucc-Container, /* Targets the specific content wrapper shown in Dev Tools */
.ssrcss-1b2q7d0-GridItem, /* Targets a common list/grid item container */
.ssrcss-17p825a-StyledWrapper, /* Targets another common section wrapper */
.ssrcss-1pm1h7u-StyledBorders, /* Ensure background behind bordered elements is dark */
.ssrcss-17c37qf-StyledBorders, /* Ensure background behind bordered elements is dark */
.ssrcss-1yv54b, /* Example of a potential main article wrapper class */
.ssrcss-17lvw4x-GridContainer, /* Example of a potential grid container */
.ssrcss-vy1h6s-GlobalNavigationContainer, /* Targets large global navigation/content wrapper */
.ssrcss-1k5z96v-Container, /* Targets the main grid/story wrapper */
.ssrcss-de737q-Container, /* Targets the recurring child div content containers */
*:not(img):not(svg) { /* NEW: Highly specific fix for any element with an explicit white background */
background-color: #1a1a1a !important;
}
[role="main"] {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
/* 3. Article Text and Headings: Ensure all foreground text is readable */
h1, h2, h3, p, span {
color: #f0f0f0 !important;
}
/* 4. Links: Change default blue/black links to a lighter, readable color */
a:link, a:visited {
color: #8ab4f8 !important; /* A light blue for contrast */
}
/* 4b. Specific Navigation Links: Ensure navigation text (e.g., "News", "UK") is white against the dark header */
nav a,
header a,
.ssrcss-rrm6an-RichTextContainer,
.ssrcss-1j1rzn0-Stack {
color: #f0f0f0 !important;
}
/* 5. Borders: If borders exist, make them slightly darker than the background */
.ssrcss-1pm1h7u-StyledBorders, .ssrcss-17c37qf-StyledBorders {
border-color: #333333 !important;
}
/* 6. Image Background Fix: Prevent white flash when images are loading or transparent */
img,
.ssrcss-153qrb0-ImageWrapper { /* Targets the image element and a common BBC image wrapper */
background-color: #1a1a1a !important;
}
/* 7. Forms */
input,
textarea,
button,
.ssrcss-w94gox-TextAreaWrapper {
color: #f0f0f0 !important;
border-color: #777 !important;
}
}Step 5: Save
Click "Save" (or press Ctrl+S). The style will immediately apply to any open BBC tabs.
The Result
Now when you visit bbc.co.uk with your OS set to dark mode, you'll get a proper dark theme instead of being blinded by white backgrounds.
Dear BBC...
This CSS took about 5 minutes to write. You have a team of developers. Please just add dark mode support. It's 2025. Thank you.
