Skip to content

Instantly share code, notes, and snippets.

@florentmorin
Last active April 13, 2020 21:42
Show Gist options
  • Save florentmorin/fb384dc50777bc2217c01f5ccfec7177 to your computer and use it in GitHub Desktop.
Save florentmorin/fb384dc50777bc2217c01f5ccfec7177 to your computer and use it in GitHub Desktop.
Mode sombre et accessibilité
h1 {
color: black;
}
@media (prefers-color-scheme: dark) {
h1 {
color: white;
}
}
<picture>
<source srcset="/image-sombre.svg" media="(prefers-color-scheme: dark)">
<img src="/image-par-defaut.svg">
</picture>
// Mode sombre actif ?
function isDarkModeEnabled() {
return window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
}
// Exécuté lorsque le mode sombre est activé / désactivé
function colorSchemeChanged() {
// ...
}
// Mise en place du "listener"
if (window.matchMedia) {
var colorSchemeCheck = window.matchMedia('(prefers-color-scheme: dark)');
colorSchemeCheck.addListener(colorSchemeChanged);
}
@supports (font: -apple-system-body) {
html {
font: -apple-system-body !important;
}
}
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
<html>
<head>
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment