Documentation

Documentation - Themes.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Documentation - Themes. +

Startup

Basic concepts

Utilities

Components

Themes

Marssel offers a powerful and flexible theme system with light/dark mode support, automatic detection of system preferences, and full customization via CSS variables or data attributes.

Basic setup

Define your themes during initialization:

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'
    }
  }
});

```
## Default variables
Marsl includes predefined theme variables:
```
--theme-bg          Background color
--theme-text        Text color
--theme-border      Border color
--theme-primary     Primary color
--theme-secondary   Secondary color
--theme-accent      Accent color
--theme-success     Color of success
--theme-warning     Warning color
--theme-danger      Hazard color
--theme-info        Color information

Use in classes

Reference theme variables directly in your classes:

Preview

Thematic background color

Text with primary color

Thematic border

<!-- Thematic background color -->
<div class="bg-[theme-bg] c-[white]">...</div>

<!-- Text with primary color -->
<h1 class="c-[theme-primary]">...</h1>

<!-- Thematic border -->
<div class="border-[1px_solid_theme-border]">...</div>

Personalization via data attributes

Overload themes with data attributes on the body:

<!-- Value common to both themes -->
<body data-theme-custom="#ff0000">

<!-- Light mode specific value -->
<body data-theme-light-custom="#0000ff">

<!-- Dark mode specific value -->
<body data-theme-dark-custom="#00ff00"
    data-theme-dark-bg="red"
>

Theme change button

Create a button to switch between themes:

<button data-theme-switcher>
    Change theme
    <span data-theme-icon="light">☀️</span>
    <span data-theme-icon="dark">🌙</span>
</button>

JavaScript API

Control themes programmatically:

// Apply a theme
marssel.themeManager.applyTheme('dark');

// Switch between light/dark
marssel.themeManager.toggleTheme();

// Get current theme
const current = marssel.themeManager.currentTheme;

// Check Dark Mode
if (marssel.themeManager.isDarkMode) {
  // ...
}

// Listen to theme changes
marssel.themeManager.onThemeChange((theme) => {
    console.log('Nouveau thème:', theme);
});

Auto mode

Auto mode automatically detects the system preference:

const marssel = new Marssel({
  theme: 'auto' // Adapts to the system
});

Persistence

The selected theme is automatically saved in localStorage and restored when the page is reloaded.

Practical examples