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 SecurityHeaders.com

    🧰 SecurityHeaders.com permet de tester en ligne la configuration des en-têtes HTTP. Cet outil vérifie si l’extension Security Headers & HSTS, incluse dans le starter WPDistrib, agit correctement. Aucun réglage manuel requis.

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

    Pourquoi commencer par le contenu est souvent plus efficace que soigner le design

    💡 Commencer par le contenu, c’est bâtir une stratégie SEO solide avant toute considération esthétique. Cette méthode WPDistrib renforce la clarté, la rapidité de production et la pertinence éditoriale.

    Pourquoi commencer par le contenu est souvent plus efficace que soigner le design
  • Logo WPDistrib, fond transparent, version principale du visuel

    Comment alimenter progressivement une base documentaire métier sans s’épuiser ?

    Créer une base documentaire métier utile ne veut pas dire tout écrire d’un coup. Il suffit de documenter au bon moment, avec une structure claire et un maillage intelligent. 📚

    Comment alimenter progressivement une base documentaire métier sans s’épuiser ?
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧩 Présentation de WP-Optimize

    WP-Optimize regroupe trois fonctions clés : nettoyage, cache et compression. Cette fiche vous aide à comprendre pourquoi elle est incluse dans WPDistrib. 🟢

    🧩 Présentation de WP-Optimize
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧩 Présentation de WP-Sweep

    WP-Sweep propose de nettoyer votre base de données WordPress en quelques clics : révisions, transients, brouillons… mais reste une solution trop risquée pour WPDistrib. 🔴

    🧩 Présentation de WP-Sweep