PHPackages                             owl-concept/theme-bundle - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. owl-concept/theme-bundle

ActiveSymfony-bundle[Templating & Views](/categories/templating)

owl-concept/theme-bundle
========================

Bundle Symfony pour le theming visuel — 5 thèmes prédéfinis, bascule instantanée via CSS variables, personnalisation admin, préférence par utilisateur.

00PHP

Since Mar 5Pushed 3mo agoCompare

[ Source](https://github.com/Jaecko/owl-theme-bundle)[ Packagist](https://packagist.org/packages/owl-concept/theme-bundle)[ RSS](/packages/owl-concept-theme-bundle/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependenciesVersions (1)Used By (0)

OwlThemeBundle
==============

[](#owlthemebundle)

[![PHP](https://camo.githubusercontent.com/88b464e5614cf654f181925115d47b523dc429fcfe41d59565e42e757f306f29/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d253345253344382e312d3838393242462e737667)](https://www.php.net/)[![Symfony](https://camo.githubusercontent.com/b4b1393dc9e6ac9410cecb1dbdaed9eff36a00e3886287ddcbde27d1b00d438a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53796d666f6e792d362e34253230253743253230372e782d3030303030302e737667)](https://symfony.com/)

**\[FR\]** Bundle Symfony pour le theming visuel — 5 thèmes prédéfinis, bascule instantanée via CSS variables, personnalisation admin, préférence par utilisateur. **\[EN\]** Symfony bundle for visual theming — 5 built-in themes, instant switching via CSS variables, admin customization, per-user preferences.

---

Sommaire / Table of Contents
----------------------------

[](#sommaire--table-of-contents)

- [Français](#-fran%C3%A7ais)
    - [Fonctionnalités](#fonctionnalit%C3%A9s)
    - [Thèmes prédéfinis](#th%C3%A8mes-pr%C3%A9d%C3%A9finis)
    - [Installation](#installation)
    - [Configuration](#configuration)
    - [Utilisation](#utilisation)
    - [API JavaScript](#api-javascript)
    - [Personnalisation admin](#personnalisation-admin)
    - [Fonctions Twig](#fonctions-twig)
    - [Intégration owl-settings](#int%C3%A9gration-owl-settings)
- [English](#-english)
    - [Features](#features)
    - [Built-in Themes](#built-in-themes)
    - [Installation](#installation-1)
    - [Configuration](#configuration-1)
    - [Usage](#usage)
    - [JavaScript API](#javascript-api)
    - [Admin Customization](#admin-customization)
    - [Twig Functions](#twig-functions)
    - [owl-settings Integration](#owl-settings-integration)

---

🇫🇷 Français
-----------

[](#-français)

### Fonctionnalités

[](#fonctionnalités)

- **5 thèmes prédéfinis** — Light, Dark, Ocean, Forest, Sunset — chacun avec une palette complète
- **Bascule instantanée** — changement de thème sans rechargement de page via CSS custom properties
- **Anti-flash** — script inline synchrone qui restaure le thème depuis `localStorage` avant le premier paint
- **Préférence par utilisateur** — chaque utilisateur peut choisir son propre thème
- **Détection système** — détecte automatiquement `prefers-color-scheme: dark`
- **Personnalisation admin** — color pickers, CSS custom injectable, logo personnalisable
- **Preview en temps réel** — aperçu des modifications avant sauvegarde
- **Thèmes custom** — ajout de thèmes via YAML ou programmatiquement (builder)
- **Stockage DBAL** — pas besoin de Doctrine ORM, fonctionne avec DBAL seul
- **Cache Symfony** — thème actif caché, invalidé automatiquement
- **Controller AJAX inclus** — 4 routes prêtes à l'emploi
- **JavaScript vanilla** — zéro dépendance, API `OwlTheme.set()`, `OwlTheme.get()`
- **CSS BEM** — styles modulaires, responsive mobile
- **Intégration owl-settings** — si `owl-settings-bundle` est installé, la préférence thème y est stockée
- **Commande d'installation** — `php bin/console owl:theme:install` crée les tables automatiquement

### Thèmes prédéfinis

[](#thèmes-prédéfinis)

ThèmeDescriptionCouleur primaire**Light**Clair et neutre, idéal pour le bureau`#3B82F6`**Dark**Sombre, réduit la fatigue oculaire`#60A5FA`**Ocean**Tons bleus professionnels`#0EA5E9`**Forest**Tons verts naturels, apaisant`#16A34A`**Sunset**Tons orange et ambrés chaleureux`#EA580C`Chaque thème définit 24 variables CSS : couleurs principales, statut, arrière-plans, texte, bordures, ombres, layout (sidebar/header).

### Installation

[](#installation)

```
composer require owl-concept/theme-bundle
```

Si le flex recipe n'est pas disponible, ajoutez le bundle manuellement :

```
// config/bundles.php
return [
    // ...
    OwlConcept\ThemeBundle\OwlThemeBundle::class => ['all' => true],
];
```

Créez les tables en base de données :

```
php bin/console owl:theme:install         # Affiche le SQL
php bin/console owl:theme:install --force  # Exécute le SQL
```

Importez les routes du bundle :

```
# config/routes/owl_theme.yaml
owl_theme:
    resource: '@OwlThemeBundle/Resources/config/routes.yaml'
```

### Configuration

[](#configuration)

```
# config/packages/owl_theme.yaml
owl_theme:
    default_theme: light              # Thème par défaut
    allow_user_themes: true           # Préférence par utilisateur
    detect_system_preference: true    # Détecte prefers-color-scheme
    transition_duration: '0.3s'       # Durée de transition CSS
    cache_pool: cache.app             # Pool de cache Symfony
    cache_ttl: 3600                   # TTL du cache en secondes
    css_class_prefix: owl-theme       # Préfixe CSS BEM
    themes_table: owl_themes          # Nom de la table des thèmes
    active_table: owl_theme_active    # Nom de la table du thème actif

    # Thèmes custom (optionnel)
    themes:
        my_brand:
            --owl-primary: "#E11D48"
            --owl-bg: "#FFF1F2"
            --owl-text: "#881337"
```

### Utilisation

[](#utilisation)

#### 1. Inclure dans le `` de votre template

[](#1-inclure-dans-le-head-de-votre-template)

```
{# base.html.twig #}

    {{ owl_theme_head() }}

```

Cela génère :

- Un bloc `` avec les variables CSS du thème actif
- Un `` synchrone qui restaure le thème depuis `localStorage` (anti-flash)
- Les données JSON du thème pour le JavaScript

#### 2. Ajouter le widget de bascule

[](#2-ajouter-le-widget-de-bascule)

```
{# Mode boutons (par défaut) #}
{% include '@OwlTheme/switcher.html.twig' %}

{# Mode dropdown #}
{% include '@OwlTheme/switcher.html.twig' with { switcher_mode: 'dropdown' } %}
```

#### 3. Page admin de personnalisation

[](#3-page-admin-de-personnalisation)

```
{% include '@OwlTheme/admin.html.twig' %}
```

#### 4. Utiliser les variables CSS dans votre app

[](#4-utiliser-les-variables-css-dans-votre-app)

```
.my-button {
    background-color: var(--owl-primary);
    color: var(--owl-text-inverse);
    border-radius: var(--owl-radius);
}

.my-sidebar {
    background: var(--owl-sidebar-bg);
    color: var(--owl-sidebar-text);
}
```

#### 5. Ajouter des thèmes programmatiquement

[](#5-ajouter-des-thèmes-programmatiquement)

```
// Dans un service ou un listener
$themeBuilder->addTheme('corporate', 'Corporate', [
    '--owl-primary'    => '#1D4ED8',
    '--owl-bg'         => '#F8FAFC',
    '--owl-sidebar-bg' => '#1E3A5F',
], 'Thème aux couleurs de l\'entreprise');
```

### API JavaScript

[](#api-javascript)

```
// Changer de thème (instantané + persistance AJAX)
OwlTheme.set('dark');

// Obtenir le thème actuel
OwlTheme.get();  // → 'dark'

// Lister les thèmes disponibles
OwlTheme.list();  // → ['light', 'dark', 'ocean', 'forest', 'sunset']

// Écouter les changements de thème
OwlTheme.onChange(function(newTheme, oldTheme) {
    console.log('Thème changé de ' + oldTheme + ' vers ' + newTheme);
});

// Détecter la préférence système
OwlTheme.detectSystemPreference();  // → 'dark' ou 'light'
```

### Personnalisation admin

[](#personnalisation-admin)

La page admin (`@OwlTheme/admin.html.twig`) permet de :

- **Modifier les couleurs** de chaque thème via des color pickers
- **Injecter du CSS** personnalisé (textarea)
- **Définir un logo** personnalisé (URL)
- **Prévisualiser** les modifications en temps réel avant sauvegarde
- **Réinitialiser** un thème à ses valeurs par défaut

### Fonctions Twig

[](#fonctions-twig)

FonctionRetourDescription`owl_theme_head()``string` (HTML)Bloc `` + `` à inclure dans ```owl_theme()``string`Clé du thème actif (ex: `'dark'`)`owl_theme_list()``array`Liste des thèmes `[{key, label, primary}]``owl_theme_config('--owl-primary')``string|null`Valeur d'une variable CSS du thème actif`owl_theme_data()``array`Données complètes du thème (pour JS)`owl_theme_prefix()``string`Préfixe CSS configuré### Intégration owl-settings

[](#intégration-owl-settings)

Si `owl-concept/settings-bundle` est installé, le bundle s'y intègre automatiquement :

- La préférence de thème est stockée comme une user preference dans owl-settings
- Aucune configuration supplémentaire nécessaire
- Si owl-settings n'est pas installé, le bundle fonctionne de manière autonome avec ses propres tables

### Schéma de base de données

[](#schéma-de-base-de-données)

```
owl_theme_active
├── scope        VARCHAR(50)    ── PK composite ('global' ou 'user')
├── scope_id     VARCHAR(255)   ── PK composite ('' ou userId)
├── theme_key    VARCHAR(100)
└── updated_at   DATETIME

owl_themes
├── theme_key    VARCHAR(100)   ── PK composite
├── scope        VARCHAR(50)    ── PK composite
├── scope_id     VARCHAR(255)   ── PK composite
├── overrides    TEXT (nullable) ── JSON des variables CSS modifiées
├── custom_css   TEXT (nullable)
├── logo_url     VARCHAR(500) (nullable)
├── created_at   DATETIME
└── updated_at   DATETIME

```

### Variables CSS disponibles

[](#variables-css-disponibles)

```
:root {
    --owl-primary           /* Couleur principale */
    --owl-primary-hover     /* Couleur principale au survol */
    --owl-primary-rgb       /* Valeur RGB (pour rgba()) */
    --owl-secondary         /* Couleur secondaire */
    --owl-success           /* Succès (vert) */
    --owl-warning           /* Avertissement (jaune/orange) */
    --owl-danger            /* Erreur (rouge) */
    --owl-info              /* Information (cyan) */
    --owl-bg                /* Arrière-plan principal */
    --owl-bg-alt            /* Arrière-plan alternatif */
    --owl-surface           /* Surface (cartes, modales) */
    --owl-text              /* Texte principal */
    --owl-text-muted        /* Texte secondaire */
    --owl-text-inverse      /* Texte inversé */
    --owl-border            /* Bordure */
    --owl-border-light      /* Bordure légère */
    --owl-shadow            /* Ombre */
    --owl-radius            /* Rayon de bordure */
    --owl-font-family       /* Police */
    --owl-font-size         /* Taille de police */
    --owl-sidebar-bg        /* Sidebar arrière-plan */
    --owl-sidebar-text      /* Sidebar texte */
    --owl-header-bg         /* Header arrière-plan */
    --owl-header-text       /* Header texte */
    --owl-transition-duration /* Durée de transition */
}
```

---

🇬🇧 English
----------

[](#-english)

### Features

[](#features)

- **5 built-in themes** — Light, Dark, Ocean, Forest, Sunset — each with a complete color palette
- **Instant switching** — theme changes without page reload via CSS custom properties
- **Anti-flash** — inline synchronous script restores theme from `localStorage` before first paint
- **Per-user preference** — each user can choose their own theme
- **System detection** — automatically detects `prefers-color-scheme: dark`
- **Admin customization** — color pickers, injectable custom CSS, customizable logo
- **Real-time preview** — preview changes before saving
- **Custom themes** — add themes via YAML or programmatically (builder)
- **DBAL storage** — no Doctrine ORM needed, works with DBAL alone
- **Symfony Cache** — active theme is cached, automatically invalidated
- **Built-in AJAX controller** — 4 ready-to-use routes
- **Vanilla JavaScript** — zero dependencies, `OwlTheme.set()`, `OwlTheme.get()` API
- **BEM CSS** — modular styles, mobile responsive
- **owl-settings integration** — if `owl-settings-bundle` is installed, theme preference is stored there
- **Install command** — `php bin/console owl:theme:install` creates tables automatically

### Built-in Themes

[](#built-in-themes)

ThemeDescriptionPrimary Color**Light**Clean and neutral, ideal for office use`#3B82F6`**Dark**Dark mode, reduces eye strain`#60A5FA`**Ocean**Professional blue tones`#0EA5E9`**Forest**Natural green tones, calming`#16A34A`**Sunset**Warm orange and amber tones`#EA580C`Each theme defines 24 CSS variables: brand colors, status colors, backgrounds, text, borders, shadows, layout (sidebar/header).

### Installation

[](#installation-1)

```
composer require owl-concept/theme-bundle
```

If the flex recipe is not available, add the bundle manually:

```
// config/bundles.php
return [
    // ...
    OwlConcept\ThemeBundle\OwlThemeBundle::class => ['all' => true],
];
```

Create the database tables:

```
php bin/console owl:theme:install         # Show SQL
php bin/console owl:theme:install --force  # Execute SQL
```

Import the bundle routes:

```
# config/routes/owl_theme.yaml
owl_theme:
    resource: '@OwlThemeBundle/Resources/config/routes.yaml'
```

### Configuration

[](#configuration-1)

```
# config/packages/owl_theme.yaml
owl_theme:
    default_theme: light              # Default theme
    allow_user_themes: true           # Per-user preference
    detect_system_preference: true    # Detect prefers-color-scheme
    transition_duration: '0.3s'       # CSS transition duration
    cache_pool: cache.app             # Symfony cache pool
    cache_ttl: 3600                   # Cache TTL in seconds
    css_class_prefix: owl-theme       # BEM CSS prefix
    themes_table: owl_themes          # Themes table name
    active_table: owl_theme_active    # Active theme table name

    # Custom themes (optional)
    themes:
        my_brand:
            --owl-primary: "#E11D48"
            --owl-bg: "#FFF1F2"
            --owl-text: "#881337"
```

### Usage

[](#usage)

#### 1. Include in your template's ``

[](#1-include-in-your-templates-head)

```
{# base.html.twig #}

    {{ owl_theme_head() }}

```

This generates:

- A `` block with CSS variables for the active theme
- A synchronous `` that restores the theme from `localStorage` (anti-flash)
- JSON theme data for JavaScript

#### 2. Add the theme switcher widget

[](#2-add-the-theme-switcher-widget)

```
{# Button mode (default) #}
{% include '@OwlTheme/switcher.html.twig' %}

{# Dropdown mode #}
{% include '@OwlTheme/switcher.html.twig' with { switcher_mode: 'dropdown' } %}
```

#### 3. Admin customization page

[](#3-admin-customization-page)

```
{% include '@OwlTheme/admin.html.twig' %}
```

#### 4. Use CSS variables in your app

[](#4-use-css-variables-in-your-app)

```
.my-button {
    background-color: var(--owl-primary);
    color: var(--owl-text-inverse);
    border-radius: var(--owl-radius);
}

.my-sidebar {
    background: var(--owl-sidebar-bg);
    color: var(--owl-sidebar-text);
}
```

#### 5. Add themes programmatically

[](#5-add-themes-programmatically)

```
// In a service or listener
$themeBuilder->addTheme('corporate', 'Corporate', [
    '--owl-primary'    => '#1D4ED8',
    '--owl-bg'         => '#F8FAFC',
    '--owl-sidebar-bg' => '#1E3A5F',
], 'Company branded theme');
```

### JavaScript API

[](#javascript-api)

```
// Switch theme (instant + AJAX persistence)
OwlTheme.set('dark');

// Get current theme
OwlTheme.get();  // → 'dark'

// List available themes
OwlTheme.list();  // → ['light', 'dark', 'ocean', 'forest', 'sunset']

// Listen for theme changes
OwlTheme.onChange(function(newTheme, oldTheme) {
    console.log('Theme changed from ' + oldTheme + ' to ' + newTheme);
});

// Detect system preference
OwlTheme.detectSystemPreference();  // → 'dark' or 'light'
```

### Admin Customization

[](#admin-customization)

The admin page (`@OwlTheme/admin.html.twig`) allows:

- **Modify colors** of each theme via color pickers
- **Inject custom CSS** (textarea)
- **Set a custom logo** (URL)
- **Preview** changes in real-time before saving
- **Reset** a theme to its default values

### Twig Functions

[](#twig-functions)

FunctionReturnsDescription`owl_theme_head()``string` (HTML)`` + `` block for ```owl_theme()``string`Active theme key (e.g. `'dark'`)`owl_theme_list()``array`Theme list `[{key, label, primary}]``owl_theme_config('--owl-primary')``string|null`CSS variable value for active theme`owl_theme_data()``array`Complete theme data (for JS)`owl_theme_prefix()``string`Configured CSS prefix### owl-settings Integration

[](#owl-settings-integration)

If `owl-concept/settings-bundle` is installed, the bundle integrates automatically:

- Theme preference is stored as a user preference in owl-settings
- No additional configuration needed
- If owl-settings is not installed, the bundle works standalone with its own tables

### Database Schema

[](#database-schema)

```
owl_theme_active
├── scope        VARCHAR(50)    ── Composite PK ('global' or 'user')
├── scope_id     VARCHAR(255)   ── Composite PK ('' or userId)
├── theme_key    VARCHAR(100)
└── updated_at   DATETIME

owl_themes
├── theme_key    VARCHAR(100)   ── Composite PK
├── scope        VARCHAR(50)    ── Composite PK
├── scope_id     VARCHAR(255)   ── Composite PK
├── overrides    TEXT (nullable) ── JSON of customized CSS variables
├── custom_css   TEXT (nullable)
├── logo_url     VARCHAR(500) (nullable)
├── created_at   DATETIME
└── updated_at   DATETIME

```

### Available CSS Variables

[](#available-css-variables)

```
:root {
    --owl-primary           /* Primary color */
    --owl-primary-hover     /* Primary color on hover */
    --owl-primary-rgb       /* RGB value (for rgba()) */
    --owl-secondary         /* Secondary color */
    --owl-success           /* Success (green) */
    --owl-warning           /* Warning (yellow/orange) */
    --owl-danger            /* Error (red) */
    --owl-info              /* Information (cyan) */
    --owl-bg                /* Main background */
    --owl-bg-alt            /* Alternative background */
    --owl-surface           /* Surface (cards, modals) */
    --owl-text              /* Main text */
    --owl-text-muted        /* Secondary text */
    --owl-text-inverse      /* Inverse text */
    --owl-border            /* Border */
    --owl-border-light      /* Light border */
    --owl-shadow            /* Shadow */
    --owl-radius            /* Border radius */
    --owl-font-family       /* Font family */
    --owl-font-size         /* Font size */
    --owl-sidebar-bg        /* Sidebar background */
    --owl-sidebar-text      /* Sidebar text */
    --owl-header-bg         /* Header background */
    --owl-header-text       /* Header text */
    --owl-transition-duration /* Transition duration */
}
```

---

License
-------

[](#license)

Proprietary — OWL Concept

###  Health Score

17

—

LowBetter than 6% of packages

Maintenance53

Moderate activity, may be stable

Popularity0

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/d9c48f4a438b587779711c9b1619fc238d635817cadc99091820d553700abcca?d=identicon)[Jaecko](/maintainers/Jaecko)

### Embed Badge

![Health badge](/badges/owl-concept-theme-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/owl-concept-theme-bundle/health.svg)](https://phpackages.com/packages/owl-concept-theme-bundle)
```

###  Alternatives

[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3861.2M](/packages/limenius-react-bundle)[area17/laravel-auto-head-tags

Laravel Auto Head Tags helps you build the list of head elements for your app

4616.0k](/packages/area17-laravel-auto-head-tags)[jelix/wikirenderer

WikiRenderer is a library to generate HTML or anything else from wiki content.

1712.2k1](/packages/jelix-wikirenderer)[webkinder/sproutset

A Composer package for handling responsive images in Roots Bedrock + Sage + Blade projects.

291.8k](/packages/webkinder-sproutset)[awkwardideas/switchblade

Extended blade directives for laravel

102.1k](/packages/awkwardideas-switchblade)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)