/* ============================================================ THEMES — CSS custom properties (6 temas) Cargado antes de cualquier otro CSS. El atributo data-theme en determina el tema activo. ============================================================ */ /* ── Default (Dark) – fallback cuando no hay data-theme ─── */ :root { /* Core */ --bg-color: #0a0a0a; --bg-secondary: #111111; --card-bg: #1a1a1a; --card-border: #2a2a2a; --text-main: #ffffff; --text-muted: #888888; --text-content: #e0e0e0; --accent: #2563eb; --accent-2: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.3); --accent-bg: rgba(37, 99, 235, 0.1); --accent-border: rgba(37, 99, 235, 0.3); --navbar-bg: rgba(10, 10, 10, 0.95); --navbar-border: #1a1a1a; --input-bg: #2a2a2a; --blockquote-bg: #1e293b; /* Aliases — coinciden con vars existentes en otros CSS */ --border: var(--card-border); --border-color: var(--card-border); --sidebar-bg: var(--bg-secondary); --main-bg: var(--bg-color); --text: var(--text-main); --text-color: var(--text-main); --muted-text: var(--text-muted); --accent-color: var(--accent); --accent-hover: var(--accent-2); --bg-surface: var(--bg-secondary); --bg-card: var(--card-bg); } /* ── Dark (explícito) ────────────────────────────────────── */ html[data-theme="dark"] { --bg-color: #0a0a0a; --bg-secondary: #111111; --card-bg: #1a1a1a; --card-border: #2a2a2a; --text-main: #ffffff; --text-muted: #888888; --text-content: #e0e0e0; --accent: #2563eb; --accent-2: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.3); --accent-bg: rgba(37, 99, 235, 0.1); --accent-border: rgba(37, 99, 235, 0.3); --navbar-bg: rgba(10, 10, 10, 0.95); --navbar-border: #1a1a1a; --input-bg: #2a2a2a; --blockquote-bg: #1e293b; --border: #2a2a2a; --border-color: #2a2a2a; --sidebar-bg: #111111; --main-bg: #0a0a0a; --text: #ffffff; --text-color: #ffffff; --muted-text: #888888; --accent-color: #2563eb; --accent-hover: #1d4ed8; --bg-surface: #111111; --bg-card: #1a1a1a; } /* ── Light ───────────────────────────────────────────────── */ html[data-theme="light"] { --bg-color: #f8fafc; --bg-secondary: #f1f5f9; --card-bg: #ffffff; --card-border: #e2e8f0; --text-main: #0f172a; --text-muted: #64748b; --text-content: #334155; --accent: #2563eb; --accent-2: #1d4ed8; --accent-glow: rgba(37, 99, 235, 0.2); --accent-bg: rgba(37, 99, 235, 0.08); --accent-border: rgba(37, 99, 235, 0.25); --navbar-bg: rgba(248, 250, 252, 0.95); --navbar-border: #e2e8f0; --input-bg: #e2e8f0; --blockquote-bg: #eff6ff; --border: #e2e8f0; --border-color: #e2e8f0; --sidebar-bg: #f1f5f9; --main-bg: #f8fafc; --text: #0f172a; --text-color: #0f172a; --muted-text: #64748b; --accent-color: #2563eb; --accent-hover: #1d4ed8; --bg-surface: #f1f5f9; --bg-card: #ffffff; } /* ── Solarized Dark ──────────────────────────────────────── */ html[data-theme="solarized-dark"] { --bg-color: #002b36; --bg-secondary: #073642; --card-bg: #073642; --card-border: #0d4a5a; --text-main: #93a1a1; --text-muted: #586e75; --text-content: #839496; --accent: #268bd2; --accent-2: #1a6fa8; --accent-glow: rgba(38, 139, 210, 0.3); --accent-bg: rgba(38, 139, 210, 0.1); --accent-border: rgba(38, 139, 210, 0.3); --navbar-bg: rgba(0, 43, 54, 0.95); --navbar-border: #073642; --input-bg: #0d4a5a; --blockquote-bg: #073642; --border: #0d4a5a; --border-color: #0d4a5a; --sidebar-bg: #073642; --main-bg: #002b36; --text: #93a1a1; --text-color: #93a1a1; --muted-text: #586e75; --accent-color: #268bd2; --accent-hover: #1a6fa8; --bg-surface: #073642; --bg-card: #073642; } /* ── Solarized Light ─────────────────────────────────────── */ html[data-theme="solarized-light"] { --bg-color: #fdf6e3; --bg-secondary: #eee8d5; --card-bg: #fffbf0; --card-border: #d9d2bc; --text-main: #073642; --text-muted: #93a1a1; --text-content: #586e75; --accent: #268bd2; --accent-2: #1a6fa8; --accent-glow: rgba(38, 139, 210, 0.2); --accent-bg: rgba(38, 139, 210, 0.08); --accent-border: rgba(38, 139, 210, 0.25); --navbar-bg: rgba(253, 246, 227, 0.95); --navbar-border: #d9d2bc; --input-bg: #eee8d5; --blockquote-bg: #eee8d5; --border: #d9d2bc; --border-color: #d9d2bc; --sidebar-bg: #eee8d5; --main-bg: #fdf6e3; --text: #073642; --text-color: #073642; --muted-text: #93a1a1; --accent-color: #268bd2; --accent-hover: #1a6fa8; --bg-surface: #eee8d5; --bg-card: #fffbf0; } /* ── Dracula ─────────────────────────────────────────────── */ html[data-theme="dracula"] { --bg-color: #282a36; --bg-secondary: #21222c; --card-bg: #44475a; --card-border: #6272a4; --text-main: #f8f8f2; --text-muted: #6272a4; --text-content: #cdd6f4; --accent: #bd93f9; --accent-2: #9580ff; --accent-glow: rgba(189, 147, 249, 0.3); --accent-bg: rgba(189, 147, 249, 0.1); --accent-border: rgba(189, 147, 249, 0.35); --navbar-bg: rgba(40, 42, 54, 0.95); --navbar-border: #44475a; --input-bg: #44475a; --blockquote-bg: #21222c; --border: #6272a4; --border-color: #6272a4; --sidebar-bg: #21222c; --main-bg: #282a36; --text: #f8f8f2; --text-color: #f8f8f2; --muted-text: #6272a4; --accent-color: #bd93f9; --accent-hover: #9580ff; --bg-surface: #21222c; --bg-card: #44475a; } /* ── Nord ────────────────────────────────────────────────── */ html[data-theme="nord"] { --bg-color: #2e3440; --bg-secondary: #3b4252; --card-bg: #434c5e; --card-border: #4c566a; --text-main: #eceff4; --text-muted: #9099a8; --text-content: #d8dee9; --accent: #81a1c1; --accent-2: #5e81ac; --accent-glow: rgba(129, 161, 193, 0.3); --accent-bg: rgba(129, 161, 193, 0.1); --accent-border: rgba(129, 161, 193, 0.3); --navbar-bg: rgba(46, 52, 64, 0.95); --navbar-border: #3b4252; --input-bg: #4c566a; --blockquote-bg: #3b4252; --border: #4c566a; --border-color: #4c566a; --sidebar-bg: #3b4252; --main-bg: #2e3440; --text: #eceff4; --text-color: #eceff4; --muted-text: #9099a8; --accent-color: #81a1c1; --accent-hover: #5e81ac; --bg-surface: #3b4252; --bg-card: #434c5e; } /* ============================================================ THEME PICKER — Botón y dropdown de selección de tema ============================================================ */ .theme-picker { position: relative; } .theme-toggle-btn { background-color: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--text-main); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; padding: 0; flex-shrink: 0; } .theme-toggle-btn:hover { background-color: var(--accent); color: #fff; box-shadow: 0 0 15px var(--accent-glow); } .theme-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 0.6rem; z-index: 9999; min-width: 190px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); animation: tdropIn 0.15s ease; } @keyframes tdropIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .theme-dropdown.open { display: block; } .theme-dropdown-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 0.25rem 0.6rem 0.5rem; font-family: 'JetBrains Mono', monospace; } .theme-swatch { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.45rem 0.6rem; border-radius: 9px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-muted); transition: all 0.15s; text-align: left; } .theme-swatch:hover { background: var(--bg-secondary); color: var(--text-main); } .theme-swatch.active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-bg); } .theme-swatch.active .swatch-dot { outline: 2px solid var(--accent); outline-offset: 1px; } .swatch-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; } /* Mitad izquierda = bg, mitad derecha = accent */ .swatch-dot::after { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: var(--sd-accent); } /* Sidebar dashboard – picker horizontal */ .sidebar-theme-picker { margin-bottom: 1rem; } .sidebar-theme-picker .theme-dropdown { bottom: calc(100% + 10px); top: auto; right: 0; } .sidebar-theme-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; gap: 0.5rem; }