prefers-color-scheme = light
Change your device's system theme or your browser's theme to change themes
prefers-color-scheme = dark
Change your device's system theme or your browser's theme to change themes
Example of how to implement automatic theme switching using prefers-color-scheme.
Credit: https://web.dev/prefers-color-scheme/
<head>
<link href="light-theme.css" rel="stylesheet" media="(prefers-color-scheme: light)" />
<link href="dark-theme.css" rel="stylesheet" media="(prefers-color-scheme: dark)" id="default-theme" />
<script>
// Fall back if the browser doesn't support prefers-color-scheme
if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
// Hide content until CSS loads to prevent show unstyled code.
document.documentElement.style.display = 'none';
// Get the default theme's path.
var defaultCssHref = document.getElementById('default-theme').getAttribute('href');
// Insert stylesheet with onload event to show page content.
document.head.insertAdjacentHTML(
'beforeend',
'<link href="' + defaultCssHref + '" rel="stylesheet" onload="document.documentElement.style.display=\'\'" />'
);
}
</script>
</head>