BBC Website Dark Mode HOWTO

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:

• Stylus for Chrome
• Stylus for Firefox
• Stylus for Edge

Step 2: Create a New Style

1. Click the Stylus extension icon in your browser toolbar
2. Click "Manage" to open the Stylus dashboard
3. Click "Write new style" (or the + button)
4. 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:

1. Click "Specify" next to "Applies to"
2. Select "URLs starting with"
3. 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.