Documentation

Documentation - Thèmes.

Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.

Documentation - Themes. +

Démarrage

Concepts de base

Utilitaires

Composants

Thèmes

Marssel propose un système de thèmes puissant et flexible avec support du mode clair/sombre, détection automatique des préférences système, et personnalisation complète via des variables CSS ou attributs data.

Configuration de base

Définissez vos thèmes lors de l'initialisation :

const marssel = new Marssel({
  theme: 'auto', // 'light', 'dark', ou 'auto'
  themes: {
    light: {
      '--theme-primary': '#2563eb',
      '--theme-bg': '#ffffff',
      '--theme-text': '#333333'
    },
    dark: {
      '--theme-primary': '#0B63F3',
      '--theme-bg': '#1c1c1c',
      '--theme-text': '#f0f0f0'
    }
  }
});

```
## Variables par défaut
Marssel inclut des variables de thème prédéfinies :
```
--theme-bg          Couleur de fond
--theme-text        Couleur du texte
--theme-border      Couleur des bordures
--theme-primary     Couleur primaire
--theme-secondary   Couleur secondaire
--theme-accent      Couleur d'accent
--theme-success     Couleur de succès
--theme-warning     Couleur d'avertissement
--theme-danger      Couleur de danger
--theme-info        Couleur d'information

Utilisation dans les classes

Référencez les variables de thème directement dans vos classes :

Aperçu

Couleur de fond thématique

Texte avec couleur primaire

Bordure thématique

<!-- Couleur de fond thématique -->
<div class="bg-[theme-bg] c-[white]">...</div>

<!-- Texte avec couleur primaire -->
<h1 class="c-[theme-primary]">...</h1>

<!-- Bordure thématique -->
<div class="border-[1px_solid_theme-border]">...</div>

Personnalisation via attributs data

Surchargez les thèmes avec des attributs data sur le body :

<!-- Valeur commune aux deux thèmes -->
<body data-theme-custom="#ff0000">

<!-- Valeur spécifique au mode clair -->
<body data-theme-light-custom="#0000ff">

<!-- Valeur spécifique au mode sombre -->
<body data-theme-dark-custom="#00ff00"
    data-theme-dark-bg="red"
>

Bouton de changement de thème

Créez un bouton pour basculer entre les thèmes :

<button data-theme-switcher>
    Changer de thème
    <span data-theme-icon="light">☀️</span>
    <span data-theme-icon="dark">🌙</span>
</button>

API JavaScript

Contrôlez les thèmes programmatiquement :

// Appliquer un thème
marssel.themeManager.applyTheme('dark');

// Basculer entre clair/sombre
marssel.themeManager.toggleTheme();

// Obtenir le thème actuel
const current = marssel.themeManager.currentTheme;

// Vérifier le mode sombre
if (marssel.themeManager.isDarkMode) {
  // ...
}

// Écouter les changements de thème
marssel.themeManager.onThemeChange((theme) => {
    console.log('Nouveau thème:', theme);
});

Mode auto

Le mode auto détecte automatiquement la préférence système :

const marssel = new Marssel({
  theme: 'auto' // S'adapte au système
});

Persistence

Le thème sélectionné est automatiquement sauvegardé dans le localStorage et restauré au rechargement de la page.

Exemples pratiques