/* ================================================================================ THEME VARIANTS - Variantes de Thèmes Prédéfinies ================================================================================ Système de thèmes colorés pour N.O.G Chatbot Utilise le système de variables CSS existant THÈMES DISPONIBLES : 1. Default (Ivory & Gold) - Par défaut 2. Ocean (Bleu) 3. Forest (Vert) 4. Sunset (Orange/Rouge) 5. Purple Dream (Violet) 6. Rose Garden (Rose) 7. Monochrome (Noir & Blanc) 8. Midnight (Bleu foncé) UTILISATION : ou etc. ================================================================================ */ /* ======================================== THÈME OCEAN 🌊 Tons bleus apaisants, inspiration marine ======================================== */ [data-theme="ocean"] { /* Couleurs primaires */ --color-ivory: #F0F9FF; --color-cream: #E0F2FE; --color-charcoal: #0C4A6E; --color-gold: #38BDF8; --color-gold-dark: #0284C7; /* Texte */ --text-primary: #0C4A6E; --text-secondary: rgba(12, 74, 110, 0.7); --text-muted: rgba(12, 74, 110, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #F0F9FF; --bg-sidebar: #E0F2FE; --bg-chat: #F0F9FF; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(224, 242, 254, 0.95); --glass-bg-hover: rgba(224, 242, 254, 0.98); --glass-border: rgba(56, 189, 248, 0.3); --glass-shadow: 0 8px 32px rgba(14, 165, 233, 0.15), 0 2px 8px rgba(14, 165, 233, 0.08), inset 0 1px 0 rgba(56, 189, 248, 0.2); /* Bordures */ --border-color: rgba(14, 165, 233, 0.2); --border-color-strong: rgba(14, 165, 233, 0.4); /* Accents */ --accent-primary: #38BDF8; --accent-secondary: #0284C7; --accent-success: #10B981; --accent-error: #EF4444; --accent-warning: #F59E0B; --accent-info: #0EA5E9; /* Grays */ --gray-50: #F0F9FF; --gray-100: #E0F2FE; --gray-200: #BAE6FD; --gray-300: #7DD3FC; } /* Mode sombre Ocean */ [data-theme="ocean-dark"] { --color-ivory: #082F49; --color-cream: #0C4A6E; --color-charcoal: #E0F2FE; --color-gold: #38BDF8; --color-gold-dark: #0EA5E9; --text-primary: #E0F2FE; --text-secondary: rgba(224, 242, 254, 0.7); --text-muted: rgba(224, 242, 254, 0.5); --text-inverse: #082F49; --bg-main: #082F49; --bg-sidebar: #0C4A6E; --bg-chat: #082F49; --bg-card: #0C4A6E; --bg-input: #0C4A6E; --glass-bg: rgba(12, 74, 110, 0.95); --glass-bg-hover: rgba(12, 74, 110, 0.98); --glass-border: rgba(56, 189, 248, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(56, 189, 248, 0.1); --border-color: rgba(56, 189, 248, 0.2); --border-color-strong: rgba(56, 189, 248, 0.4); --accent-primary: #38BDF8; --accent-secondary: #0EA5E9; } /* ======================================== THÈME FOREST 🌲 Tons verts naturels, inspiration forestière ======================================== */ [data-theme="forest"] { /* Couleurs primaires */ --color-ivory: #F0FDF4; --color-cream: #DCFCE7; --color-charcoal: #14532D; --color-gold: #4ADE80; --color-gold-dark: #16A34A; /* Texte */ --text-primary: #14532D; --text-secondary: rgba(20, 83, 45, 0.7); --text-muted: rgba(20, 83, 45, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #F0FDF4; --bg-sidebar: #DCFCE7; --bg-chat: #F0FDF4; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(220, 252, 231, 0.95); --glass-bg-hover: rgba(220, 252, 231, 0.98); --glass-border: rgba(74, 222, 128, 0.3); --glass-shadow: 0 8px 32px rgba(34, 197, 94, 0.15), 0 2px 8px rgba(34, 197, 94, 0.08), inset 0 1px 0 rgba(74, 222, 128, 0.2); /* Bordures */ --border-color: rgba(34, 197, 94, 0.2); --border-color-strong: rgba(34, 197, 94, 0.4); /* Accents */ --accent-primary: #4ADE80; --accent-secondary: #16A34A; --accent-success: #22C55E; --accent-error: #EF4444; --accent-warning: #F59E0B; --accent-info: #3B82F6; /* Grays */ --gray-50: #F0FDF4; --gray-100: #DCFCE7; --gray-200: #BBF7D0; --gray-300: #86EFAC; } /* Mode sombre Forest */ [data-theme="forest-dark"] { --color-ivory: #052E16; --color-cream: #14532D; --color-charcoal: #DCFCE7; --color-gold: #4ADE80; --color-gold-dark: #22C55E; --text-primary: #DCFCE7; --text-secondary: rgba(220, 252, 231, 0.7); --text-muted: rgba(220, 252, 231, 0.5); --text-inverse: #052E16; --bg-main: #052E16; --bg-sidebar: #14532D; --bg-chat: #052E16; --bg-card: #14532D; --bg-input: #14532D; --glass-bg: rgba(20, 83, 45, 0.95); --glass-bg-hover: rgba(20, 83, 45, 0.98); --glass-border: rgba(74, 222, 128, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(74, 222, 128, 0.1); --border-color: rgba(74, 222, 128, 0.2); --border-color-strong: rgba(74, 222, 128, 0.4); --accent-primary: #4ADE80; --accent-secondary: #22C55E; } /* ======================================== THÈME SUNSET 🌅 Tons orangés chaleureux, inspiration coucher de soleil ======================================== */ [data-theme="sunset"] { /* Couleurs primaires */ --color-ivory: #FFF7ED; --color-cream: #FFEDD5; --color-charcoal: #7C2D12; --color-gold: #FB923C; --color-gold-dark: #EA580C; /* Texte */ --text-primary: #7C2D12; --text-secondary: rgba(124, 45, 18, 0.7); --text-muted: rgba(124, 45, 18, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #FFF7ED; --bg-sidebar: #FFEDD5; --bg-chat: #FFF7ED; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(255, 237, 213, 0.95); --glass-bg-hover: rgba(255, 237, 213, 0.98); --glass-border: rgba(251, 146, 60, 0.3); --glass-shadow: 0 8px 32px rgba(249, 115, 22, 0.15), 0 2px 8px rgba(249, 115, 22, 0.08), inset 0 1px 0 rgba(251, 146, 60, 0.2); /* Bordures */ --border-color: rgba(249, 115, 22, 0.2); --border-color-strong: rgba(249, 115, 22, 0.4); /* Accents */ --accent-primary: #FB923C; --accent-secondary: #EA580C; --accent-success: #22C55E; --accent-error: #DC2626; --accent-warning: #F59E0B; --accent-info: #3B82F6; /* Grays */ --gray-50: #FFF7ED; --gray-100: #FFEDD5; --gray-200: #FED7AA; --gray-300: #FDBA74; } /* Mode sombre Sunset */ [data-theme="sunset-dark"] { --color-ivory: #431407; --color-cream: #7C2D12; --color-charcoal: #FFEDD5; --color-gold: #FB923C; --color-gold-dark: #F97316; --text-primary: #FFEDD5; --text-secondary: rgba(255, 237, 213, 0.7); --text-muted: rgba(255, 237, 213, 0.5); --text-inverse: #431407; --bg-main: #431407; --bg-sidebar: #7C2D12; --bg-chat: #431407; --bg-card: #7C2D12; --bg-input: #7C2D12; --glass-bg: rgba(124, 45, 18, 0.95); --glass-bg-hover: rgba(124, 45, 18, 0.98); --glass-border: rgba(251, 146, 60, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(251, 146, 60, 0.1); --border-color: rgba(251, 146, 60, 0.2); --border-color-strong: rgba(251, 146, 60, 0.4); --accent-primary: #FB923C; --accent-secondary: #F97316; } /* ======================================== THÈME PURPLE DREAM 💜 Tons violets élégants, inspiration mystique ======================================== */ [data-theme="purple"] { /* Couleurs primaires */ --color-ivory: #FAF5FF; --color-cream: #F3E8FF; --color-charcoal: #581C87; --color-gold: #C084FC; --color-gold-dark: #9333EA; /* Texte */ --text-primary: #581C87; --text-secondary: rgba(88, 28, 135, 0.7); --text-muted: rgba(88, 28, 135, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #FAF5FF; --bg-sidebar: #F3E8FF; --bg-chat: #FAF5FF; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(243, 232, 255, 0.95); --glass-bg-hover: rgba(243, 232, 255, 0.98); --glass-border: rgba(192, 132, 252, 0.3); --glass-shadow: 0 8px 32px rgba(168, 85, 247, 0.15), 0 2px 8px rgba(168, 85, 247, 0.08), inset 0 1px 0 rgba(192, 132, 252, 0.2); /* Bordures */ --border-color: rgba(168, 85, 247, 0.2); --border-color-strong: rgba(168, 85, 247, 0.4); /* Accents */ --accent-primary: #C084FC; --accent-secondary: #9333EA; --accent-success: #22C55E; --accent-error: #EF4444; --accent-warning: #F59E0B; --accent-info: #3B82F6; /* Grays */ --gray-50: #FAF5FF; --gray-100: #F3E8FF; --gray-200: #E9D5FF; --gray-300: #D8B4FE; } /* Mode sombre Purple */ [data-theme="purple-dark"] { --color-ivory: #3B0764; --color-cream: #581C87; --color-charcoal: #F3E8FF; --color-gold: #C084FC; --color-gold-dark: #A855F7; --text-primary: #F3E8FF; --text-secondary: rgba(243, 232, 255, 0.7); --text-muted: rgba(243, 232, 255, 0.5); --text-inverse: #3B0764; --bg-main: #3B0764; --bg-sidebar: #581C87; --bg-chat: #3B0764; --bg-card: #581C87; --bg-input: #581C87; --glass-bg: rgba(88, 28, 135, 0.95); --glass-bg-hover: rgba(88, 28, 135, 0.98); --glass-border: rgba(192, 132, 252, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(192, 132, 252, 0.1); --border-color: rgba(192, 132, 252, 0.2); --border-color-strong: rgba(192, 132, 252, 0.4); --accent-primary: #C084FC; --accent-secondary: #A855F7; } /* ======================================== THÈME ROSE GARDEN 🌹 Tons roses doux, inspiration romantique ======================================== */ [data-theme="rose"] { /* Couleurs primaires */ --color-ivory: #FFF1F2; --color-cream: #FFE4E6; --color-charcoal: #881337; --color-gold: #FB7185; --color-gold-dark: #E11D48; /* Texte */ --text-primary: #881337; --text-secondary: rgba(136, 19, 55, 0.7); --text-muted: rgba(136, 19, 55, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #FFF1F2; --bg-sidebar: #FFE4E6; --bg-chat: #FFF1F2; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(255, 228, 230, 0.95); --glass-bg-hover: rgba(255, 228, 230, 0.98); --glass-border: rgba(251, 113, 133, 0.3); --glass-shadow: 0 8px 32px rgba(244, 63, 94, 0.15), 0 2px 8px rgba(244, 63, 94, 0.08), inset 0 1px 0 rgba(251, 113, 133, 0.2); /* Bordures */ --border-color: rgba(244, 63, 94, 0.2); --border-color-strong: rgba(244, 63, 94, 0.4); /* Accents */ --accent-primary: #FB7185; --accent-secondary: #E11D48; --accent-success: #22C55E; --accent-error: #DC2626; --accent-warning: #F59E0B; --accent-info: #3B82F6; /* Grays */ --gray-50: #FFF1F2; --gray-100: #FFE4E6; --gray-200: #FECDD3; --gray-300: #FDA4AF; } /* Mode sombre Rose */ [data-theme="rose-dark"] { --color-ivory: #4C0519; --color-cream: #881337; --color-charcoal: #FFE4E6; --color-gold: #FB7185; --color-gold-dark: #F43F5E; --text-primary: #FFE4E6; --text-secondary: rgba(255, 228, 230, 0.7); --text-muted: rgba(255, 228, 230, 0.5); --text-inverse: #4C0519; --bg-main: #4C0519; --bg-sidebar: #881337; --bg-chat: #4C0519; --bg-card: #881337; --bg-input: #881337; --glass-bg: rgba(136, 19, 55, 0.95); --glass-bg-hover: rgba(136, 19, 55, 0.98); --glass-border: rgba(251, 113, 133, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(251, 113, 133, 0.1); --border-color: rgba(251, 113, 133, 0.2); --border-color-strong: rgba(251, 113, 133, 0.4); --accent-primary: #FB7185; --accent-secondary: #F43F5E; } /* ======================================== THÈME MONOCHROME ⚫⚪ Noir et blanc classique, inspiration minimaliste ======================================== */ [data-theme="monochrome"] { /* Couleurs primaires */ --color-ivory: #FFFFFF; --color-cream: #F5F5F5; --color-charcoal: #000000; --color-gold: #404040; --color-gold-dark: #1A1A1A; /* Texte */ --text-primary: #000000; --text-secondary: rgba(0, 0, 0, 0.7); --text-muted: rgba(0, 0, 0, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #FFFFFF; --bg-sidebar: #F5F5F5; --bg-chat: #FFFFFF; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(245, 245, 245, 0.95); --glass-bg-hover: rgba(245, 245, 245, 0.98); --glass-border: rgba(64, 64, 64, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Bordures */ --border-color: rgba(0, 0, 0, 0.15); --border-color-strong: rgba(0, 0, 0, 0.3); /* Accents */ --accent-primary: #404040; --accent-secondary: #1A1A1A; --accent-success: #22C55E; --accent-error: #EF4444; --accent-warning: #F59E0B; --accent-info: #3B82F6; /* Grays */ --gray-50: #FFFFFF; --gray-100: #F5F5F5; --gray-200: #E5E5E5; --gray-300: #D4D4D4; } /* Mode sombre Monochrome */ [data-theme="monochrome-dark"] { --color-ivory: #000000; --color-cream: #1A1A1A; --color-charcoal: #FFFFFF; --color-gold: #D4D4D4; --color-gold-dark: #F5F5F5; --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.7); --text-muted: rgba(255, 255, 255, 0.5); --text-inverse: #000000; --bg-main: #000000; --bg-sidebar: #1A1A1A; --bg-chat: #000000; --bg-card: #1A1A1A; --bg-input: #1A1A1A; --glass-bg: rgba(26, 26, 26, 0.95); --glass-bg-hover: rgba(26, 26, 26, 0.98); --glass-border: rgba(212, 212, 212, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); --border-color: rgba(255, 255, 255, 0.15); --border-color-strong: rgba(255, 255, 255, 0.3); --accent-primary: #D4D4D4; --accent-secondary: #F5F5F5; } /* ======================================== THÈME MIDNIGHT 🌙 Bleu foncé élégant, inspiration nocturne ======================================== */ [data-theme="midnight"] { /* Couleurs primaires */ --color-ivory: #F8FAFC; --color-cream: #E2E8F0; --color-charcoal: #0F172A; --color-gold: #60A5FA; --color-gold-dark: #3B82F6; /* Texte */ --text-primary: #0F172A; --text-secondary: rgba(15, 23, 42, 0.7); --text-muted: rgba(15, 23, 42, 0.5); --text-inverse: #FFFFFF; /* Arrière-plans */ --bg-main: #F8FAFC; --bg-sidebar: #E2E8F0; --bg-chat: #F8FAFC; --bg-card: #FFFFFF; --bg-input: #FFFFFF; /* Effets Glass */ --glass-bg: rgba(226, 232, 240, 0.95); --glass-bg-hover: rgba(226, 232, 240, 0.98); --glass-border: rgba(96, 165, 250, 0.3); --glass-shadow: 0 8px 32px rgba(59, 130, 246, 0.15), 0 2px 8px rgba(59, 130, 246, 0.08), inset 0 1px 0 rgba(96, 165, 250, 0.2); /* Bordures */ --border-color: rgba(59, 130, 246, 0.2); --border-color-strong: rgba(59, 130, 246, 0.4); /* Accents */ --accent-primary: #60A5FA; --accent-secondary: #3B82F6; --accent-success: #22C55E; --accent-error: #EF4444; --accent-warning: #F59E0B; --accent-info: #0EA5E9; /* Grays */ --gray-50: #F8FAFC; --gray-100: #E2E8F0; --gray-200: #CBD5E1; --gray-300: #94A3B8; } /* Mode sombre Midnight */ [data-theme="midnight-dark"] { --color-ivory: #020617; --color-cream: #0F172A; --color-charcoal: #E2E8F0; --color-gold: #60A5FA; --color-gold-dark: #3B82F6; --text-primary: #E2E8F0; --text-secondary: rgba(226, 232, 240, 0.7); --text-muted: rgba(226, 232, 240, 0.5); --text-inverse: #020617; --bg-main: #020617; --bg-sidebar: #0F172A; --bg-chat: #020617; --bg-card: #0F172A; --bg-input: #0F172A; --glass-bg: rgba(15, 23, 42, 0.95); --glass-bg-hover: rgba(15, 23, 42, 0.98); --glass-border: rgba(96, 165, 250, 0.3); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(96, 165, 250, 0.1); --border-color: rgba(96, 165, 250, 0.2); --border-color-strong: rgba(96, 165, 250, 0.4); --accent-primary: #60A5FA; --accent-secondary: #3B82F6; } /* ======================================== ANIMATIONS DE TRANSITION ENTRE THÈMES ======================================== */ /* Transition douce des couleurs */ :root, [data-theme] { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Éviter la transition sur les éléments interactifs */ button, a, input, textarea, .workspace-card, .dropdown-menu { transition-property: transform, opacity, box-shadow, background-color, border-color; transition-duration: 0.2s; transition-timing-function: ease; } /* ======================================== FIN DU FICHIER THEMES Pour utiliser un thème : document.body.setAttribute('data-theme', 'ocean'); document.body.setAttribute('data-theme', 'forest'); document.body.setAttribute('data-theme', 'sunset'); document.body.setAttribute('data-theme', 'purple'); document.body.setAttribute('data-theme', 'rose'); document.body.setAttribute('data-theme', 'monochrome'); document.body.setAttribute('data-theme', 'midnight'); Pour mode sombre : document.body.setAttribute('data-theme', 'ocean-dark'); document.body.setAttribute('data-theme', 'forest-dark'); etc. ======================================== */