shogun-theme
v1.0.3
Published
Unified theme system for all Shogun apps - works with DaisyUI and vanilla CSS
Downloads
918
Maintainers
scobruReadme
Shogun Theme
Sistema di theming unificato per tutte le app dell'ecosistema Shogun.
Caratteristiche
- ✅ Compatibile con DaisyUI e CSS vanilla
- ✅ Schema colori coordinato su tutte le app
- ✅ Temi dark e light predefiniti
- ✅ Variabili CSS per massima flessibilità
- ✅ Componenti riutilizzabili
- ✅ Font Poppins incluso
Schema Colori
Colori Primari
- Primary:
#4F6BF6(Blu Shogun) - Accent:
#4F6BF6
Colori di Stato
- Success:
#44ff88(dark) /#43a047(light) - Error:
#ff4444(dark) /#e53935(light) - Warning:
#fbbd23(dark) /#f59e0b(light) - Info:
#3abff8(dark) /#3b82f6(light)
Background Dark
- Base 1:
#1a1240 - Base 2:
#0a0821 - Base 3:
#151515 - Gradient:
linear-gradient(180deg, #1a1240 0%, #0a0821 100%)
Background Light
- Base 1:
#f0f4ff - Base 2:
#e0e7ff - Base 3:
#ffffff - Gradient:
linear-gradient(180deg, #f0f4ff 0%, #e0e7ff 100%)
Installazione
Per app con DaisyUI (shogun-auth-app, shogun-gypt, shogun-linda)
- Installa il package (quando sarà pubblicato su npm):
yarn add shogun-themeOppure usa il link locale:
cd shogun-auth-app
yarn add link:../shogun-theme- Importa gli stili nel tuo CSS principale:
@import "shogun-theme/styles/variables.css";
@import "shogun-theme/styles/base.css";
@import "shogun-theme/styles/daisyui-overrides.css";- Usa la config Tailwind condivisa:
// tailwind.config.js
import shogunConfig from 'shogun-theme/tailwind.config.js';
export default {
...shogunConfig,
content: [
...shogunConfig.content,
// aggiungi i tuoi path specifici
],
};Per app con CSS vanilla (shogun-drive, shogun-wormhole)
- Importa solo le variabili e gli stili base:
@import "shogun-theme/styles/variables.css";
@import "shogun-theme/styles/base.css";- Usa le variabili CSS nei tuoi stili:
.my-component {
background: var(--card-bg);
color: var(--text-primary);
border-radius: var(--shogun-radius-md);
}Utilizzo
Variabili CSS
Tutte le variabili sono disponibili come variabili CSS:
/* Colori */
var(--shogun-primary)
var(--text-primary)
var(--card-bg)
var(--input-bg)
/* Spacing */
var(--shogun-spacing-sm)
var(--shogun-spacing-md)
var(--shogun-spacing-lg)
/* Border Radius */
var(--shogun-radius-sm)
var(--shogun-radius-md)
var(--shogun-radius-xl)
/* Transitions */
var(--shogun-transition-base)Classi CSS
Classi riutilizzabili per componenti comuni:
<!-- Card -->
<div class="shogun-card">
<h2>Titolo</h2>
<p class="shogun-text-secondary">Contenuto</p>
</div>
<!-- Button -->
<button class="shogun-btn shogun-btn-primary">
Click me
</button>
<!-- Input -->
<input type="text" class="shogun-input" placeholder="Enter text" />
<!-- Badge -->
<span class="shogun-badge shogun-badge-success">Success</span>
<!-- Alert -->
<div class="shogun-alert shogun-alert-info">
Informazione importante
</div>JavaScript Utilities
import {
setShogunTheme,
toggleShogunTheme,
getCurrentShogunTheme,
SHOGUN_THEMES,
SHOGUN_COLORS
} from 'shogun-theme';
// Imposta tema
setShogunTheme(SHOGUN_THEMES.DARK);
// Toggle tema
toggleShogunTheme();
// Ottieni tema corrente
const currentTheme = getCurrentShogunTheme();
// Usa i colori
console.log(SHOGUN_COLORS.primary); // #4F6BF6Con DaisyUI
Usa i temi predefiniti:
<html data-theme="shogun-dark">
<!-- oppure -->
<html data-theme="shogun-light">Oppure usa le classi DaisyUI normalmente:
<button class="btn btn-primary">Button</button>
<div class="card">Card content</div>
<input class="input input-bordered" />Personalizzazione
Estendere i temi
Puoi estendere i temi per app specifiche mantenendo la coerenza:
/* Aggiungi variabili custom */
:root {
--my-custom-color: #ff00ff;
}
/* Estendi il tema dark */
[data-theme="shogun-dark"] {
--my-custom-bg: rgba(255, 0, 255, 0.1);
}Temi Custom per App Specifiche
Per app come Linda che necessita di colori specifici (verde WhatsApp):
// tailwind.config.js
import shogunConfig from 'shogun-theme/tailwind.config.js';
export default {
...shogunConfig,
daisyui: {
...shogunConfig.daisyui,
themes: [
...shogunConfig.daisyui.themes,
{
"linda-dark": {
...shogunConfig.daisyui.themes[0]["shogun-dark"],
primary: "#25D366", // WhatsApp green
secondary: "#00A884",
}
}
]
}
};File Structure
shogun-theme/
├── styles/
│ ├── variables.css # Variabili CSS globali
│ ├── base.css # Stili base e classi utility
│ └── daisyui-overrides.css # Override per DaisyUI
├── tailwind.config.js # Config Tailwind condivisa
├── index.js # Utilities JavaScript
├── package.json
└── README.mdProgetti Shogun
Con DaisyUI
- shogun-auth-app: App di autenticazione
- shogun-gypt: App di messaggistica
- shogun-linda: App di chat (con tema custom verde)
Con CSS Vanilla
- shogun-drive: File storage decentralizzato
- shogun-wormhole: Trasferimento file P2P
- shogun-relay: Server relay (backend, no UI)
License
MIT