BrowserUX Blog

Développement Front-End

Go to BrowserUX
Articles Guides
EN |
HTML CSS JS 🌙 Mode Sombre ♿ Accessibilité 🧩 UX

À propos de BrowserUX Theme Switcher

CSS :focus accessibilité

BrowserUX Theme Switcher est un composant web moderne conçu pour offrir une gestion fiable, accessible et universelle des thèmes clair et sombre. Il répond aux exigences actuelles du web en plaçant la préférence utilisateur, la cohérence visuelle et la simplicité d’intégration au cœur de sa conception.

Conçu comme une brique indépendante et réutilisable, browserux-theme-switcher ne se limite pas à changer un thème : il le fait intelligemment. Il détecte automatiquement les préférences système, mémorise les choix utilisateur, et applique dynamiquement les bons styles grâce à data-theme, tout en restant compatible avec tous les frameworks modernes.

Léger, accessible et personnalisable, il offre une solution robuste pour construire des interfaces respectueuses des bonnes pratiques UX sans complexité technique inutile.

I. Pourquoi BrowserUX Theme Switcher ?

Dans de nombreux projets web, la gestion du thème clair/sombre est souvent bricolée : ajout d’une classe dark, écoute manuelle de prefers-color-scheme, etc. Ces solutions fonctionnent, mais sont rarement centralisées, accessibles ou faciles à maintenir, surtout dans des projets multi-frameworks.

BrowserUX Theme Switcher est né de ce constat. Plutôt que de réinventer la roue à chaque projet, ce composant fournit une solution moderne, cohérente et standardisée. Il encapsule la logique de bascule de thème dans un Web Component léger, accessible, et compatible avec tous les écosystèmes : HTML pur, React, Vue, Angular...

II. Objectifs

  • Offrir une bascule de thème cohérente entre clair et sombre.
  • Détecter automatiquement le thème système via prefers-color-scheme.
  • Persister le choix utilisateur via localStorage.
  • Appliquer dynamiquement data-theme="dark" ou "light" pour déclencher les styles CSS.
  • Rendre le composant accessible par défaut (libellés ARIA, internationalisation).
  • Permettre une personnalisation simple via des variables CSS.
  • Être facilement intégrable sans dépendance ni configuration.

III. Fonctionnalités clés

1. Détection et persistance automatique

À l’initialisation, le composant vérifie si une préférence est enregistrée dans le navigateur. Si ce n’est pas le cas, il applique le thème système. 


// Exemple simplifié
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

Le choix utilisateur est mémorisé dans localStorage et appliqué lors des visites suivantes. Le tout fonctionne sans que le développeur n’ait à écrire une seule ligne de logique.

2. Application dynamique du thème

Le thème est appliqué à l’aide de l’attribut data-theme : 


<html data-theme="dark">...</html>

Cela permet d’activer des styles CSS conditionnels, mais aussi de déclencher des comportements côté JS ou de modifier des images (.has-dark → *-dark.png).

3. Accessibilité et multilingue intégrés

Le bouton expose un aria-label dynamique, adapté à la langue (lang), ou personnalisable via data-label-light et data-label-dark.

Plusieurs langues sont prises en charge nativement : français, anglais, espagnol, allemand, japonais, néerlandais, italien, russe et portugais.

4. Icônes personnalisables et variables CSS

Le composant expose des slots (light-icon, dark-icon) pour personnaliser visuellement les icônes. Il est aussi stylisable via des propriétés CSS, comme : 


:root {
    --bux-switch-width: 60px;
    --bux-switch-bg-color: #000;
}

5. Gestion automatique des images en mode sombre

Le composant prend en charge la substitution dynamique des images selon le thème actif, grâce à la classe .has-dark.

Il vous suffit d’ajouter cette classe sur une balise img pour que, lorsqu’un thème sombre est activé, le composant remplace automatiquement le fichier image par une version suffixée -dark.

Exemple : 

<img src="logo.png" class="has-dark" alt="Logo clair">

Lorsque le thème passe en mode sombre, le composant remplace automatiquement logo.png par logo-dark.png.

6. Compatibilité multi-framework

Le composant fonctionne en HTML pur, mais aussi dans des projets modernes : il s’intègre dans React (JSX), Vue (SFC), Angular (via schemas). Il est exporté en UMD et ESM pour s’adapter à tous les outils de build.

IV. Une base stable et évolutive

BrowserUX Theme Switcher est un outil modulaire. Il se veut stable, sans dépendance, lisible et documenté. Chaque fonctionnalité est expliquée en détail dans la documentation. Le projet est hébergé sur GitHub et ouvert aux contributions.

C’est un outil conçu pour durer, s’adapter, et s’intégrer sans friction.

V. Des fichiers lisibles et documentés

L’un des principes fondateurs de l'écosystème BrowserUX est la clarté de son code. Que ce soit pour les développeurs débutants ou expérimentés, le composant est conçu pour être transparent, compréhensible et modifiable facilement.

  • La structure du composant est modulaire, avec séparation claire entre logique, typage, utilitaires, et styles.
  • Les fonctions sont nommées de façon explicite, les événements sont documentés (theme-change), et les comportements sont prévisibles.
  • Des commentaires sont présents dans les fichiers TypeScript pour expliquer les choix clés (stockage, préférences système, gestion des slots…).

Même dans l'usage avancé (Shadow DOM, typage JSX, configuration des slots), le développeur reste en confiance : tout est documenté en ligne et conçu pour éviter les pièges classiques liés aux Web Components.

Extrait de browserux-theme-switcher.ts :


/**
 * Applies the given theme by:
 * - Setting `data-theme` on the target
 * - Updating ARIA labels
 * - Updating images for dark/light variants
 * - Dispatching a 'theme-change' event
 *
 * @param {string} theme - Either 'light' or 'dark'
 */

private applyTheme(theme: ThemeMode): void {
    // Gets the element where the theme should be applied
    const target = this.getThemeTarget();

    // Sets the 'data-theme' attribute to either 'light' or 'dark'
    target.setAttribute('data-theme', theme);

    // Updates the ARIA label on the toggle button based on the new theme
    this.updateButtonLabel();

    // Updates image sources to match the selected theme
    updateImagesByTheme(this.getThemeTarget());

    // Dispatches a custom 'theme-change' event so that other components or scripts can react
    this.dispatchEvent(new CustomEvent('theme-change', {
        // passes the new theme in the event payload
        detail: { theme },
        // allows the event to bubble up the DOM
        bubbles: true,
        // allows the event to cross shadow DOM boundaries
        composed: true
    }));
}

VI. En conclusion

BrowserUX Theme Switcher répond à un besoin fréquent avec une approche moderne, propre et accessible. Il simplifie la gestion des thèmes dans vos interfaces tout en respectant les bonnes pratiques du web actuel.

Si vous cherchez une solution fiable, personnalisable et universelle pour intégrer un sélecteur de thème clair/sombre, essayez BrowserUX Theme Switcher.

Logo BrowserUX Theme Switcher

BrowserUX Theme Switcher est un Web Component léger, accessible et personnalisable, conçu pour ajouter facilement un bouton de changement de thème à n’importe quel site ou application : BrowserUX Theme Switcher

Un guide complet sur la gestion des thèmes clair/sombre

À propos

Ce blog a été conçu comme une extension naturelle des projets de l'écosystème BrowserUX.

Il a pour objectif de fournir des ressources complémentaires, des astuces ciblées et des explications détaillées autour des choix techniques, des bonnes pratiques et des principes d’accessibilité qui structurent ces outils.

Chaque article ou astuce vient éclairer un aspect précis du front-end moderne (CSS, accessibilité, UX, performance…), avec une volonté claire : expliquer le pourquoi derrière chaque règle pour encourager une intégration plus réfléchie et durable dans vos projets.

@ Effeilo