B3G UI Theme

Un thème moderne et responsive avec plusieurs schémas de couleurs et options de mise en page.

🚀 Installation

npm install b3guitheme

🛠️ Utilisation

Importer les styles dans votre projet

Option A: Dans votre fichier SCSS principal

@import '~b3guitheme/src/styles/light.scss';
@import '~b3guitheme/src/styles/dark.scss';
@import '~b3guitheme/src/styles/dim.scss';

Option B: Dans angular.json

{
  "styles": [
    "node_modules/b3guitheme/src/styles/light.scss",
    "node_modules/b3guitheme/src/styles/dark.scss",
    "node_modules/b3guitheme/src/styles/dim.scss"
  ]
}

Option C: Copier les fichiers dans votre projet

# Copier les styles
cp -r node_modules/b3guitheme/src/styles/* src/assets/themes/b3g/styles/

# Copier les assets (images, logos, drapeaux)
cp -r node_modules/b3guitheme/src/assets/* src/assets/themes/b3g/images/

🎨 Thèmes disponibles

Le package inclut trois thèmes prêts à l'emploi :

• Light (light.scss) : Thème clair moderne
• Dark (dark.scss) : Thème sombre élégant
• Dim (dim.scss) : Thème intermédiaire

📁 Structure du package

b3guitheme/
├── src/
│   ├── styles/
│   │   ├── light.scss    # Thème clair
│   │   ├── dark.scss     # Thème sombre
│   │   └── dim.scss      # Thème intermédiaire
│   ├── assets/
│   │   ├── logo.svg      # Logo B3G
│   │   ├── logob3glight.png
│   │   └── flags/        # Drapeaux pour i18n
│   │       ├── es.svg
│   │       ├── fr.svg
│   │       ├── sa.svg
│   │       └── us.svg
│   └── index.js          # Point d'entrée
├── README.md
└── LICENSE

🎯 Exemple d'utilisation

Dans un projet Angular

// src/styles.scss
@import '~b3guitheme/src/styles/light.scss';

// Ou pour un thème sombre
@import '~b3guitheme/src/styles/dark.scss';

Dans un projet React/Vue/autre

/* Importer directement dans votre CSS */
@import '~b3guitheme/src/styles/light.scss';

Utilisation programmatique

const b3gTheme = require('b3guitheme');

console.log(b3gTheme.styles.light); // './styles/light.scss'
console.log(b3gTheme.assets);       // './assets/'

🎨 Variables CSS personnalisables

Les thèmes utilisent des variables CSS que vous pouvez surcharger :

:root {
  --b3g-primary-color: #your-color;
  --b3g-secondary-color: #your-secondary-color;
  --b3g-surface-bg: #your-background;
  --b3g-border-color: #your-border-color;
}

@import '~b3guitheme/src/styles/light.scss';

📱 Responsive Design

Le thème B3G est entièrement responsive et s'adapte automatiquement à tous les types d'écrans :

• Desktop : Layout complet avec sidebar
• Tablet : Sidebar collapsible
• Mobile : Navigation mobile optimisée

🤝 Support

Pour toute question ou problème :

• 📧 Email: [email protected]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: GitHub Wiki

📄 Licence

MIT © B3G Team

🔄 Changelog

v1.0.0

• Version initiale
• Thèmes Light, Dark, Dim
• Assets et images inclus
• Design responsive
• Variables CSS personnalisables