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

    🧰 Présentation de WordPress.com

    WordPress.com est une plateforme d’hébergement commerciale qui repose sur un fork de WordPress.org. ❌ Elle limite l’accès aux fonctionnalités essentielles et monétise ce qui est gratuit ailleurs. ⚠️ WPDistrib la classe parmi les outils à…

    🧰 Présentation de WordPress.com
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧰 Présentation de WordPress.org

    WordPress.org est le site officiel du CMS libre WordPress. 🧩 Il permet de télécharger gratuitement la version standard du logiciel, à installer sur l’hébergement de votre choix. C’est le socle recommandé dans WPDistrib pour créer…

    🧰 Présentation de WordPress.org
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧰 Présentation de ChatGPT.com

    ChatGPT.com est un assistant en ligne basé sur l’intelligence artificielle, utilisé dans WPDistrib pour structurer, reformuler et illustrer rapidement du contenu web. 💡 Chaque interaction suit un prompt métier, garantissant un résultat clair et conforme…

    🧰 Présentation de ChatGPT.com
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧰Présentation de LocalWP

    LocalWP permet de créer un site WordPress en local, sans hébergement ni connexion internet. ⚡ Idéal pour tester, apprendre ou préparer son site hors ligne. La distribution WPDistrib peut être importée en quelques clics via…

    🧰Présentation de LocalWP
  • Logo WPDistrib, fond transparent, version principale du visuel

    Comment isoler une extension WordPress avant de signaler un bug ?

    Isoler une extension WordPress avant de signaler un bug 🧪 permet de savoir si le plugin est réellement fautif. WPDistrib propose une méthode claire pour tester, vérifier et documenter avant de contacter un développeur. ✅

    Comment isoler une extension WordPress avant de signaler un bug ?