Open root

Change Link Colors in Dark Mode

When adding support for Dark Mode to a web page, the browser's default link colors remain static. They are ill-suited for most dark interfaces, though. To change link colors in either system appearance, you can leverage CSS variables:

:root {
    --link-color: #001ae4;
    --link-visited-color: #4e2286;
}

@media(prefers-color-scheme: dark) {
    :root {
        --link-color: #0A84FF;
        --link-visited-color: #5E5CE6;
    }
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-visited-color);
}

References