Logo WPDistrib, fond transparent, version principale du visuel

Stop au simple “inverser les couleurs”

Pour un vrai #DarkMode, définis une palette par rôles (#primaire, #secondaire, #accent, #fond, #texte). Ensuite tu déclares chaque couleur avec light-dark(). Résultat : un thème #WordPress lisible et cohérent, clair comme sombre.

light-dark() est une fonction CSS récente.
Elle prend deux couleurs : la première est utilisée en mode clair, la seconde en mode sombre. Le navigateur choisit automatiquement selon la préférence système (ou l’override du thème).

Exemple simple :

body {
  background: light-dark(#ffffff, #000000);
  color: light-dark(#000000, #ffffff);
}

Résultat :

  • En clair → fond blanc + texte noir.
  • En sombre → fond noir + texte blanc.

Dans #WordPress, tu peux l’utiliser directement dans theme.json pour définir la palette.

Autre solution: Deux palettes, un switch.

Plutôt que d’inverser les couleurs, crée une palette #Light et une palette #Dark dans ton theme.json. Un bouton toggle applique la bonne classe (is-light / is-dark). Résultat : un #WordPress propre, cohérent et facile à maintenir.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *


Logo WPDistrib, fond transparent, version principale du visuel

Stop au simple “inverser les couleurs”

Pour un vrai #DarkMode, définis une palette par rôles (#primaire, #secondaire, #accent, #fond, #texte). Ensuite tu déclares chaque couleur avec light-dark(). Résultat : un thème #WordPress lisible et cohérent, clair comme sombre.

light-dark() est une fonction CSS récente.
Elle prend deux couleurs : la première est utilisée en mode clair, la seconde en mode sombre. Le navigateur choisit automatiquement selon la préférence système (ou l’override du thème).

Exemple simple :

body {
  background: light-dark(#ffffff, #000000);
  color: light-dark(#000000, #ffffff);
}

Résultat :

  • En clair → fond blanc + texte noir.
  • En sombre → fond noir + texte blanc.

Dans #WordPress, tu peux l’utiliser directement dans theme.json pour définir la palette.

Autre solution: Deux palettes, un switch.

Plutôt que d’inverser les couleurs, crée une palette #Light et une palette #Dark dans ton theme.json. Un bouton toggle applique la bonne classe (is-light / is-dark). Résultat : un #WordPress propre, cohérent et facile à maintenir.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *


  • Logo WPDistrib, fond transparent, version principale du visuel

    1 Transformez votre site avec un design professionnel en un instant 🎨

    Découvrez comment transformer rapidement votre site WordPress en utilisant des designs professionnels prêts à l’emploi. Apprenez à créer une page, choisir un modèle et personnaliser votre contenu facilement grâce à ce tutoriel pas à pas.

    1 Transformez votre site avec un design professionnel en un instant 🎨
  • Logo WPDistrib, fond transparent, version principale du visuel

    Créez un design Professionnel sur WPDistrib

    Apprenez à créer un design professionnel sur WPDistrib en utilisant l’extension Spectra. Ce tutoriel vous guide étape par étape pour créer, personnaliser et publier une page WordPress attrayante, même sans compétences techniques.

    Créez un design Professionnel sur WPDistrib
  • Logo WPDistrib, fond transparent, version principale du visuel

    WordPress Vs magazine papier: une analogie pour mieux comprendre

    Et si un site WordPress fonctionnait comme un magazine papier ? Découvrez comment ces deux supports organisent leur contenu, leurs points communs et leurs différences pour mieux structurer votre site web !

    WordPress Vs magazine papier: une analogie pour mieux comprendre
  • Logo WPDistrib, fond transparent, version principale du visuel

    WPDistrib : Avancez pas-à-pas vers un site WordPress performant

    Simplifiez la création de votre site WordPress avec WPDistrib. Pas-à-pas, transformez l’effort en opportunité grâce à des modèles gratuits, des guides clairs et un contrôle total sur votre projet.

    WPDistrib : Avancez pas-à-pas vers un site WordPress performant
  • Logo WPDistrib, fond transparent, version principale du visuel

    Créer un site web: Évitez les pièges et adoptez la voie du milieu

    Créez un site web sans stress ni complexité ! 🚀 Adoptez une approche simplifiée avec des outils modernes et des processus optimisés pour un résultat pro, sans perdre de temps.

    Créer un site web: Évitez les pièges et adoptez la voie du milieu