/* ============================================================ NutriPerros.mx — Sistema de Tema Dark / Light Archivo: theme.css Instrucciones: importar PRIMERO en tu CSS principal o ============================================================ */ /* ── TEMA CLARO (default) ────────────────────────────────── */ :root, [data-theme="light"] { /* Fondos */ --np-bg: #ffffff; --np-bg2: #f4f9f4; --np-bg3: #e8f5e9; --np-surface: #ffffff; --np-card-bg: #ffffff; --np-card-border: #e0e0e0; /* Nav */ --np-nav-bg: rgba(255,255,255,0.92); --np-nav-border: #e8f5e9; /* Texto */ --np-text1: #1b2e1c; --np-text2: #4a6b4c; --np-text3: #888888; /* Verde (marca) */ --np-green: #388E3C; --np-green-l: #66BB6A; --np-green-d: #1B5E20; --np-green-bg: #e8f5e9; --np-green-badge: #c8e6c9; --np-green-mid: #a5d6a7; /* Naranja (acento) */ --np-orange: #E65100; --np-orange-l: #FFF3E0; --np-orange-mid: #FFCC80; /* Amarillo / Semáforo */ --np-yellow-l: #FFFDE7; --np-yellow: #F57F17; /* Rojo */ --np-red-l: #FFEBEE; --np-red: #E53935; /* Grises UI */ --np-gray-l: #F5F5F5; --np-gray-b: #E0E0E0; /* Tags / badges blog */ --np-tag-bg: #e8f5e9; --np-tag-text: #2e7d32; /* Sombra */ --np-shadow: 0 2px 12px rgba(56,142,60,0.08); --np-shadow-md: 0 4px 24px rgba(56,142,60,0.12); /* Toggle */ --np-toggle-bg: #e8f5e9; --np-toggle-border:#a5d6a7; /* Transición global */ --np-transition: 0.3s cubic-bezier(.4,0,.2,1); } /* ── TEMA OSCURO ─────────────────────────────────────────── */ [data-theme="dark"] { /* Fondos */ --np-bg: #0f1a10; --np-bg2: #152016; --np-bg3: #1a2a1b; --np-surface: #1a2a1b; --np-card-bg: #1e2e1f; --np-card-border: #2d4a2e; /* Nav */ --np-nav-bg: rgba(15,26,16,0.93); --np-nav-border: #1e3020; /* Texto */ --np-text1: #e8f5e9; --np-text2: #a5d6a7; --np-text3: #6a9b6c; /* Verde (marca) */ --np-green: #66BB6A; --np-green-l: #81c784; --np-green-d: #a5d6a7; --np-green-bg: #1a2e1b; --np-green-badge: #1e3a1f; --np-green-mid: #2d4a2e; /* Naranja (acento) */ --np-orange: #FFB74D; --np-orange-l: #2a1e0e; --np-orange-mid: #5a3a10; /* Amarillo / Semáforo */ --np-yellow-l: #2a2200; --np-yellow: #FFD54F; /* Rojo */ --np-red-l: #2a0e0e; --np-red: #EF5350; /* Grises UI */ --np-gray-l: #1e2e1f; --np-gray-b: #2d4a2e; /* Tags / badges blog */ --np-tag-bg: #1e3a1f; --np-tag-text: #81c784; /* Sombra */ --np-shadow: 0 2px 16px rgba(0,0,0,0.4); --np-shadow-md: 0 4px 32px rgba(0,0,0,0.5); /* Toggle */ --np-toggle-bg: #1a2e1b; --np-toggle-border:#2d4a2e; } /* ── TRANSICIÓN GLOBAL al cambiar tema ───────────────────── */ *, *::before, *::after { transition: background-color var(--np-transition), border-color var(--np-transition), color var(--np-transition), box-shadow var(--np-transition); } /* Excluir elementos donde la transición se ve mal */ img, svg, canvas, video { transition: none; } /* ── SCROLLBAR (sutil, temática) ─────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--np-bg2); } ::-webkit-scrollbar-thumb { background: var(--np-green-mid); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--np-green); }