Browser toggle - GOVUK prototype kit plugin

This plugin allows you to add a button to toggle between light and dark mode in the browser.

Not familiar with dark mode? It’s a display setting for devices and applications that swaps the default dark text on a bright background for light-coloured text and icons on a dark or black background.

Like a dark theme in my code editor, dark mode on a website helps me reduce eye strain.

The plugin

The plugin is a JavaScript library that creates a button to add a class to the HTML element when clicked.

1. Install the plugin

npm install github:htmlandbacon/govuk-prototype-kit-browser-toggle-plugin

2. Add the JavaScript (your file may be different)

window.GOVUKPrototypeKit.documentReady(() => {
    window.BrowserModeToggle();
})

3. Add the placeholder for the toggle button

<span data-module="browser-mode-toggle"></span>

4. Create your SCSS changes (this is the cheat version)

.govuk-template--dark-mode {
    filter: invert(1) hue-rotate(180deg);
}

Creating your own style

While a browser-mode toggle plugin is useful as an experiment, it is not a production-quality install or an active, well-researched version of a dark theme. It also doesn’t enable someone to apply it consistently across a prototype.

Every active colour choice now needs an inverted version.

Light text on a black background is an easy choice to make. What becomes more tricky is focus styles and button colours, each of which needs to be worked through.

Recently, the GDS Design System team provided root variables for colours that we can override to create a dark theme.

As an example, the GOV.UK footer:

• the border of the footer is —govuk-brand-colour (blue #1d70b8);
• text in the footer is —govuk-surface-text-colour (black #0b0c0c);
• the background is —govuk-template-background-colour (white #f4f8fb);

Links in the footer follow the general site colour —govuk-link-colour (other blue #1a65a6).

We can still scope colours to components, although this is a little bit of scoping, but it will work.

The example below gives our prototype a very purple tint.

// Add extra styles here
.govuk-template--dark-mode {
    --govuk-brand-colour: #{govuk-colour("purple", $variant: "shade-50")};
    --govuk-surface-text-colour: #{govuk-colour("white")};
    --govuk-template-background-colour: #{govuk-colour("purple")};
    --govuk-surface-border-colour: #{govuk-colour("purple")};
    --govuk-body-background-colour: #{govuk-colour("purple", $variant: "tint-80")};
    --govuk-surface-background-colour: #{govuk-colour("purple", $variant: "tint-25")};

    .govuk-service-navigation {
        --govuk-text-colour: #{govuk-colour("white")};
    }

    .govuk-footer {
        --govuk-link-colour: #{govuk-colour("purple", $variant: "tint-95")};
        --govuk-link-visited-colour: #{govuk-colour("purple", $variant: "tint-50")};
        --govuk-text-colour: #{govuk-colour("purple", $variant: "tint-95")};
    }
}

Light and dark function

light-dark is a CSS function that allows you to set both colours at once.

Since 2024, it has been implemented in most common browsers.

MDN is a great source for finding out more.