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

    Traduire WordPress sans casser Gutenberg

    via une automatisation #N8N, récupérer le code brut, le passer à un #LLM local (gratuit) et réinjecter sur le site anglais en gardant la mise en page. J’ai le HTML rendu, mais 😤 pas le…

    Traduire WordPress sans casser Gutenberg
  • Logo WPDistrib, fond transparent, version principale du visuel

    Vitesse de chargement, on cherche tous le meilleur combo.

    LiteSpeed Cache → pas le boost attendu. Depuis que je mixe cache-objet Redis + cache WP-Optimize + Gutenberg = 95-100% perf. Et vous, vos combos et résultats ?

    Vitesse de chargement, on cherche tous le meilleur combo.
  • Logo WPDistrib, fond transparent, version principale du visuel

    Migrer un site Wix vers WordPress.org sans prise de tête ?

    Astuce : passe par un compte gratuit wordpress.com → importe (Outils > Importer > Wix) → exporte.Pas de plugin, pas d’abonnement, et ton contenu est déjà structuré sur ton propre WordPress.

    Migrer un site Wix vers WordPress.org sans prise de tête ?
  • Logo WPDistrib, fond transparent, version principale du visuel

    Cocarde X.com sans payer ? facile !

    J’suis pas sur X, mais juste sur ma reproduction fidèle du thème dans mon WordPress. Et bim ! cocarde gratos 😉

    Cocarde X.com sans payer ? facile !
  • Logo WPDistrib, fond transparent, version principale du visuel

    Avant je postais à la main sur chaque réseau. Maintenant ?

    J’écris sur WordPress → tout part dans Notion → N8N balance sur X, Bluesky, LinkedIn. Plus d’oubli, plus de copier/coller. J’vous montre le workflow !

    Avant je postais à la main sur chaque réseau. Maintenant ?