/* ========================================================================== theme.css — Selector de tema (auto/claro/sepia/oscuro) + tamaño de fuente. Pareja JS: theme.js Las variables base viven en style.css; aquí sólo se sobreescriben. ========================================================================== */ /* ----- Bloque del panel en el sidebar ----- */ .theme-switcher{ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule, #e1ddd0); font-family: var(--sans, -apple-system, sans-serif); color: var(--sidebar-fg, var(--fg, #1a1a1f)); } .theme-switcher h4{ margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #6c6c78); font-weight: 600; } .theme-options{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-bottom: 10px; } .theme-option{ display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--rule, #e1ddd0); border-radius: 5px; background: var(--paper, #fff); color: var(--fg, #1a1a1f); cursor: pointer; font-size: 12px; font-family: inherit; line-height: 1.1; } .theme-option:hover{ background: var(--accent-soft, #eef3ff); } .theme-option[aria-pressed="true"]{ border-color: var(--accent, #1d4ed8); background: var(--accent, #1d4ed8); color: #fff; } .theme-option .theme-swatch{ width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); flex: 0 0 10px; } .theme-option[data-theme="auto"] .theme-swatch{ background: linear-gradient(135deg,#fff 50%,#15151b 50%); } .theme-option[data-theme="light"] .theme-swatch{ background: #ffffff; } .theme-option[data-theme="sepia"] .theme-swatch{ background: #f5ecd9; } .theme-option[data-theme="dark"] .theme-swatch{ background: #15151b; } .theme-fontsize{ display: flex; align-items: center; justify-content: space-between; gap: 4px; } .theme-fontsize .label{ font-size: 11px; color: var(--muted, #6c6c78); letter-spacing: .08em; text-transform: uppercase; } .theme-fontsize .fs-buttons{ display: inline-flex; gap: 0; border: 1px solid var(--rule, #e1ddd0); border-radius: 5px; overflow: hidden; } .theme-fontsize button{ border: 0; background: var(--paper, #fff); color: var(--fg, #1a1a1f); padding: 4px 8px; cursor: pointer; font-family: var(--serif, Georgia, serif); font-size: 13px; line-height: 1; } .theme-fontsize button + button{ border-left: 1px solid var(--rule, #e1ddd0); } .theme-fontsize button:hover{ background: var(--accent-soft, #eef3ff); } .theme-fontsize button[aria-pressed="true"]{ background: var(--accent, #1d4ed8); color: #fff; } .theme-fontsize .fs-sm{ font-size: 11px; } .theme-fontsize .fs-md{ font-size: 13px; } .theme-fontsize .fs-lg{ font-size: 16px; } /* ========================================================================== Aplicación de cada tema mediante clases en . Estas reglas pisan las variables definidas en style.css. ========================================================================== */ /* --- Claro (forzado, ignora prefers-color-scheme) --- */ html.theme-light{ color-scheme: light; } html.theme-light{ --bg: #fbfaf6; --paper: #ffffff; --fg: #1a1a1f; --fg-soft: #3a3a44; --muted: #6c6c78; --rule: #e1ddd0; --accent: #1d4ed8; --accent-soft: #eef3ff; --thm-bg: #fff8e6; --thm-border: #f3c969; --thm-fg: #6b4f0b; --proof-rule: #c8c8c2; --def-bg: #f4f1e8; --boxed-bg: #f6f4ec; --boxed-border: #d4d0c1; --code-bg: #f3f0e6; --sidebar-bg: #f3f1e8; --sidebar-fg: #23232a; --sidebar-current-bg: #1d4ed8; --sidebar-current-fg: #ffffff; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.05); } /* --- Sepia --- */ html.theme-sepia{ color-scheme: light; } html.theme-sepia{ --bg: #f5ecd9; --paper: #fbf3df; --fg: #3a2a14; --fg-soft: #4d381c; --muted: #806447; --rule: #e0d2b1; --accent: #8a4a1a; --accent-soft: #f1e3c4; --thm-bg: #f7e6b8; --thm-border: #d8b865; --thm-fg: #6b4f0b; --proof-rule: #c8b990; --def-bg: #efe2c4; --boxed-bg: #f0e3c5; --boxed-border: #d8c79b; --code-bg: #ece0bf; --sidebar-bg: #ede1c1; --sidebar-fg: #3a2a14; --sidebar-current-bg: #8a4a1a; --sidebar-current-fg: #fbf3df; --shadow: 0 1px 3px rgba(58,42,20,.10), 0 6px 18px rgba(58,42,20,.08); } /* --- Oscuro --- */ html.theme-dark{ color-scheme: dark; } html.theme-dark{ --bg: #15151b; --paper: #1c1c24; --fg: #e8e8ec; --fg-soft: #cfcfd6; --muted: #94949f; --rule: #2e2e38; --accent: #7aa9ff; --accent-soft: #1b2440; --thm-bg: #2a2412; --thm-border: #6b4f0b; --thm-fg: #e8c876; --proof-rule: #4a4a52; --def-bg: #20202a; --boxed-bg: #232330; --boxed-border: #36363f; --code-bg: #1f1f27; --sidebar-bg: #1a1a22; --sidebar-fg: #e8e8ec; --sidebar-current-bg: #7aa9ff; --sidebar-current-fg: #15151b; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.4); } /* --- Auto: deja que style.css aplique prefers-color-scheme. No definimos variables aquí: hereda del media query del CSS base. --- */ html.theme-auto{ /* sin overrides */ } /* ========================================================================== Tamaño de fuente — multiplicador global aplicado al body. ========================================================================== */ html.fs-sm body{ font-size: 14px; } html.fs-md body{ font-size: 16px; } html.fs-lg body{ font-size: 19px; } /* Conservar buena legibilidad en sidebar y código aún con fuente grande. */ html.fs-lg .sidebar{ font-size: 14px; } html.fs-sm .sidebar{ font-size: 12px; }