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

    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…

    Stop au simple “inverser les couleurs”
  • Logo WPDistrib, fond transparent, version principale du visuel

    Des sites vitrines qui convertissent

    Nouveau projet : proposer les meilleurs templates #WordPress pour sites vitrines. Exemple concret 👉 un modèle #Gutenberg pensé pour une entreprise d’électricité, avec preuves sociales et CTA intégrés.

    Des sites vitrines qui convertissent
  • Logo WPDistrib, fond transparent, version principale du visuel

    Mise en place du multisite WordPress en Docker

    Le déploiement est réussi à partir d’une sauvegarde d’un multisite en ligne. Cette étape valide la maîtrise technique et ouvre la voie pour construire et développer le réseau de sites.

    Mise en place du multisite WordPress en Docker
  • Logo WPDistrib, fond transparent, version principale du visuel

    Transformer un ban en opportunité

    Être banni m’a rappelé que la vraie liberté c’est publier d’abord chez soi. Je vais bosser à une plateforme où chacun peut « tweeter » pour lui-même avant de relayer. #WordPress #Automatisation

    Transformer un ban en opportunité
  • Logo WPDistrib, fond transparent, version principale du visuel

    WP Admin Columns plus fort que Admin Columns !

    Configure tes colonnes direct dans les pages et articles. Simple et rapide. À tester puis intégrer dans #WordPress #WPDistrib #AdminColumns #WPAdminColumns

    WP Admin Columns plus fort que Admin Columns !