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 mes articles sans outil payant: terminé ✅

    FR → EN auto, #Gutenberg intact grâce à #N8N + #LLM local. Zéro token facturé, productivité x10 😍 Reste catégories & ancres à gérer, mais le plus lourd est derrière.

    Traduire mes articles sans outil payant: terminé ✅
  • Logo WPDistrib, fond transparent, version principale du visuel

    Étape clé avant la trad auto : transfert d’un article WordPress FR → EN

    Texte + images passent d’un site 1 à un site 2, avec #GraphQL je garde intacte la structure #Gutenberg. Prochaine étape : trad via #LLM local, sans extension ni tokens payants. 😏

    Étape clé avant la trad auto : transfert d’un article WordPress FR → EN
  • Logo WPDistrib, fond transparent, version principale du visuel

    🧐Avis WPDistrib sur WPS Hide Login 🟢 Inclus

    WPS Hide Login est une extension pivot dans WPDistrib : elle masque l’accès par défaut à l’administration WordPress et réduit instantanément les tentatives d’intrusion. ⚠️ Mais son incompatibilité avec WPGraphQL limite certains usages avancés; une…

    🧐Avis WPDistrib sur WPS Hide Login 🟢 Inclus
  • Logo WPDistrib, fond transparent, version principale du visuel

    Mon cockpit WPDistrib centralise articles et actus pour nourrir mes réseaux

    Base #Notion + #N8N → mes articles longs + mes “tweets maison” sont programmés et diffusés en décalé. Résultat : régularité, même en période creuse.

    Mon cockpit WPDistrib centralise articles et actus pour nourrir mes réseaux
  • Logo WPDistrib, fond transparent, version principale du visuel

    Découverte sympa côté sécurité: AIOS

    J’ai remplacé #WPSHideLogin par #AIOS. Résultat : plus de blocage sur mes flux #GraphQL et quelques options de sécu bien pratiques. Perso je préfère ça à #WordFence, bien trop lourd à mon goût.

    Découverte sympa côté sécurité: AIOS