Venez du côté léger-dark ()

Créer simultanément des modes clairs et sombres peut sembler intimidant. Gestion des requêtes @media basées sur prefers-color-scheme, pour s'adapter aux remplacements des paramètres du système d'exploitation et à fabriquer des palettes de couleurs contrastées pour l'accessibilité, ajoutent la complexité. Mais le CSS moderne simplifie cela considérablement.

Tirer parti des schémas de couleurs HTML natifs

HTML propose à la fois un thème standard noir sur blanc et blanc sur noir (bien que souvent caché par les réinitialisations du CSS). Le thème blanc sur noir offre une excellente base pour le mode sombre, minimisant le besoin de réglages manuels aux éléments tels que les entrées et les boutons.

Commutation automatique du schéma de couleurs via les préférences du système d'exploitation

Sans aucune des requêtes @media, il suffit de déclarer color-scheme: light dark; sur l'élément racine permet la commutation automatique en fonction des préférences du système d'exploitation de l'utilisateur. Les navigateurs respectent le paramètre de jeu de couleurs «clair», «sombre» ou «automatique». Cela peut également être réalisé via une balise HTML <meta>: <meta content="light dark" name="color-scheme">. Les deux méthodes obtiennent le même résultat: rendre les schémas légers et sombres disponibles et appliquer celui approprié.

Vous pouvez contrôler la propriété <meta> TAG ou CSS avec JavaScript. Appliquer color-scheme aux éléments individuels est également possible, mais nécessite une déclaration explicite des propriétés color et background-color pour éviter les problèmes d'héritage.

Variables de couleur de texte et d'arrière-plan par défaut

Le "noir" et le "blanc" par défaut dans ces thèmes sont souvent légèrement décalés et blancs, améliorant le contraste. Ces couleurs sont accessibles sous forme de variables <system-color></system-color>: Canvas (arrière-plan) et CanvasText (texte). Ces variables s'ajustent automatiquement avec le changement color-scheme, se comportant de manière similaire à currentColor, mais CanvasText reste fixe comme la couleur du texte par défaut.

Les exemples suivants démontrent l'impact de la modification de la propriété color-scheme:

Il existe de nombreuses autres variables <system-color></system-color> (19 au total). MDN fournit une liste complète. Cependant, les incohérences du navigateur et du système d'exploitation existent dans leur rendu et leur soutien. Le cadre system.css d'Egor Kloos suit l'état actuel de ces variables.

déclarant les couleurs pour les deux modes

Avec une commutation automatique / commutation sombre automatique en place, la méthode optimale pour déclarer les couleurs devient cruciale. Voici trois approches, classées du moins au plus efficace:

3. Approche basée sur l'opacité:

L'utilisation d'opacité de couleur (par exemple, rgb(128 0 0 / 0.5)) permet à la couleur Canvas de se montrer, mais est moins efficace pour le texte et entraîne des couleurs en sourdine.

2. color-mix() Fonction:

La fonction color-mix() permet de mélanger les couleurs avec des proportions spécifiées (par exemple, color-mix(in oklab, Canvas 75%, RebeccaPurple)). Ceci est utile pour maintenir la cohérence des teintes et de la saturation entre les modes. Les espaces de couleurs OKLAB et OKLCH offrent un meilleur contrôle perçu de légèreté et de saturation par rapport à HSL.

1. light-dark() Fonction:

La fonction light-dark() (par exemple, light-dark(lavender, saddlebrown)) offre le contrôle le plus précis, permettant des couleurs complètement différentes dans les modes légers et sombres. Il peut également incorporer color-mix(). La prise en charge du navigateur est élevée mais une reproche peut être nécessaire.

Avantages de color-scheme et light-dark() sur @media requêtes

color-scheme offre plusieurs avantages par rapport à @media prefers-color-scheme:

• fournit un mode sombre de base sans effort.
• gère la commutation basée sur les préférences du SG nativement.
• permet une bascule basée sur JavaScript tout en respectant les couleurs déclarées.

Implémentation de commandes de mode clair, sombre et automatique

Offrir des modes légers, sombres et automobiles offre une flexibilité. Le mode automatique par défaut est par défaut le paramètre du système d'exploitation, tandis que les utilisateurs peuvent changer manuellement. Cela élimine la nécessité d'une logique de détection complexe et des auditeurs d'événements.

Ajustement des palettes de couleurs basés sur CSS

Le réglage CSS pur est possible en utilisant les éléments de pseudo-sélectionneur et de radio ou :has(). Cependant, cela est limité aux changements par page et nécessite <select></select> support. :has()

Ajustement des jeu de couleurs basés sur JavaScript

JavaScript est utile pour les paramètres persistants et les interactions utilisateur. La balise

ou <meta> peut être utilisée pour manipuler le html.style.setProperty(). Les fonctions améliorent la réutilisabilité du code. color-scheme

se souvenir des préférences des utilisateurs

L'API de stockage Web (localStorage ou SessionStorage) permet de stocker les préférences des utilisateurs pour les visites futures.

persiste à travers les séances, tandis que localStorage est effacé sur la fermeture du navigateur. Le choix dépend du comportement des utilisateurs et des considérations de conformité du RGPD. sessionStorage

Considérations d'accessibilité

Fournir des modes clairs et sombres améliore l'accessibilité. Envisagez d'ajouter des paramètres de contraste (en utilisant

et prefers-contrast) pour une personnalisation supplémentaire. Utilisez des attributs ARIA (par exemple, filter: contrast()) pour une compatibilité améliorée du lecteur d'écran. aria-pressed

En conclusion, le CSS moderne simplifie la création de modes clairs et sombres. Adopter la flexibilité et le choix des utilisateurs offerts par

, color-scheme et le stockage des préférences des utilisateurs. light-dark()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!