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

    Premiers Pas avec WPDistrib

    Premiers Pas avec WPDistrib 🚀 Découvrez comment bien démarrer avec WPDistrib, la distribution WordPress 100% gratuite et optimisée. Sécurité 🛡️, sauvegarde 🔒 et performance ⚡ sont déjà en place : concentrez-vous sur l’essentiel, votre contenu…

    Premiers Pas avec WPDistrib
  • Logo WPDistrib, fond transparent, version principale du visuel

    3 Optimiser et sécuriser votre site WordPress⚙️

    Optimisez et sécurisez votre site WordPress en trois étapes essentielles : renforcez vos mots de passe 🔐, sécurisez l’accès à l’administration 🛡️ et sauvegardez vos données 📤. Suivez ce guide pour protéger efficacement votre site…

    3 Optimiser et sécuriser votre site WordPress⚙️
  • Logo WPDistrib, fond transparent, version principale du visuel

    2.2 Finalisez votre modèle avec le thème FSE 2025 et WPDistrib

    Personnalisez votre site avec le thème FSE 2025 et WPDistrib. Adaptez vos modèles, créez des en-têtes et pieds de page uniques, et harmonisez les styles pour un design totalement sur-mesure.

    2.2 Finalisez votre modèle avec le thème FSE 2025 et WPDistrib
  • Logo WPDistrib, fond transparent, version principale du visuel

    2.1 Installer Astra avec WPDistrib pour vos modèles Spectra

    Installer Astra avec WPDistrib pour un design parfaitement aligné avec vos modèles Spectra. Suivez ce guide pour une installation rapide et un rendu fidèle à votre modèle importé.

    2.1 Installer Astra avec WPDistrib pour vos modèles Spectra
  • Logo WPDistrib, fond transparent, version principale du visuel

    2 Personnalisez votre site WordPress à 100%✏️

    Personnalisez votre site WordPress selon vos besoins ! Optez pour une configuration simple et rapide ou une flexibilité totale pour ajuster chaque détail de votre design. Découvrez les avantages de chaque méthode et faites le…

    2 Personnalisez votre site WordPress à 100%✏️