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

    Je crée mes threads directement dans WordPress et je les envoie partout

    Grâce à mon #N8N local, chaque actu devient auto un #Thread (#BlueSky, #Twitter) tout en restant archivée sur mon site. Rien ne se perd. 😏

    Je crée mes threads directement dans WordPress et je les envoie partout
  • Logo WPDistrib, fond transparent, version principale du visuel

    Link Whisper vs Internal Link Juicer

    1/Deux visions du #SEO interne.Automatiser les liens ou laisser l’humain décider des meilleures ancres ? 👇 2/Avec #LinkWhisper, tu écris ton article et l’extension scanne ton texte.Résultat : une liste d’articles suggérés en fonction des…

    Link Whisper vs Internal Link Juicer
  • Logo WPDistrib, fond transparent, version principale du visuel

    150 catégories WordPress, ça devient sport…

    Pour la version 🇺🇸, j’ai posé un tableau #Notion en référence FR → un flux #N8N traduit & met à jour les catégories auto. Premier test validé 😏

    150 catégories WordPress, ça devient sport…
  • Logo WPDistrib, fond transparent, version principale du visuel

    WPDistrib a désormais sa fiche #Wikidata

    Et un QR-Code en bonus pour pointer direct dessus. L’idée ? Donner plus de visibilité et aider au #référencement de mon projet #WordPress. Première pierre posée, le reste suivra 😏

    WPDistrib a désormais sa fiche #Wikidata
  • Logo WPDistrib, fond transparent, version principale du visuel

    Pourquoi WPDistrib propose-t-il un WordPress prêt à l’emploi ?

    Découvrez comment WPDistrib apporte un WordPress prêt à l’emploi, pour gagner du temps et créer un site complet sans passer par des heures de configuration.

    Pourquoi WPDistrib propose-t-il un WordPress prêt à l’emploi ?