Skip to content

Instantly share code, notes, and snippets.

@florentmorin

florentmorin/darkmode.css

Last active April 13, 2020 21:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save florentmorin/fb384dc50777bc2217c01f5ccfec7177 to your computer and use it in GitHub Desktop.
Save florentmorin/fb384dc50777bc2217c01f5ccfec7177 to your computer and use it in GitHub Desktop.
Download ZIP
Mode sombre et accessibilité
Raw
darkmode.css
h1 {
color: black;
}
@media (prefers-color-scheme: dark) {
h1 {
color: white;
}
}
Raw
darkmode.html
<picture>
<source srcset="/image-sombre.svg" media="(prefers-color-scheme: dark)">
<img src="/image-par-defaut.svg">
</picture>
Raw
darkmode.js
// 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);
}
Raw
dynamictype.css
@supports (font: -apple-system-body) {
html {
font: -apple-system-body !important;
}
}
Raw
iphonex.css
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
Raw
iphonex.html
<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