/* Opcionális világos téma – a sötét (alap) paletta CSS-változóinak felülírása, amikor a elemen data-theme="light" van (lásd theme.js). */ html[data-theme="light"] { color-scheme: light; --bg: #ffffff; --surface: #f6f8fa; --surface2: #eaeef2; --border: #d0d7de; --accent: #0969da; --green: #1a7f37; --yellow: #9a6700; --red: #cf222e; --text: #1f2328; --muted: #6e7781; --teacher-bg: #eef1f4; --student-bg: #0969da14; --student-border: #0969da33; } /* iOS-stílusú, letisztult, egységes világos téma. Csak szín/CSS-változó szintű felülírás – a rendszer-betűtípus (-apple-system) már alapból be van állítva a body-n, ezért itt nem kell komponens-szintű stílust bántani. */ html[data-theme="ios"] { color-scheme: light; --bg: #f2f2f7; --surface: #ffffff; --surface2: #f2f2f7; --border: #e5e5ea; --accent: #007aff; --green: #34c759; --yellow: #ff9500; --red: #ff3b30; --text: #1c1c1e; --muted: #8e8e93; --teacher-bg: #f2f2f7; --student-bg: #007aff14; --student-border: #007aff33; } /* Retro foszfor-monitor témák ("geek mode"). A szemantikus piros/zöld visszajelzés (helyes/hibás válasz) szándékosan megmarad megkülönböztethetőnek, nem tisztán monokróm – a hangulatért, de az olvashatóság rovására nem megyünk. */ html[data-theme="green"] { color-scheme: dark; --bg: #0a0f0a; --surface: #0f1a0f; --surface2: #142414; --border: #1f4d1f; --accent: #33ff33; --green: #33ff33; --yellow: #aaff33; --red: #ff5555; --text: #4dff4d; --muted: #2e8f2e; --teacher-bg: #0d1c0d; --student-bg: #33ff3314; --student-border: #33ff3333; } html[data-theme="amber"] { color-scheme: dark; --bg: #0f0a00; --surface: #1a1200; --surface2: #241a00; --border: #4d3300; --accent: #ffb000; --green: #ccff33; --yellow: #ffb000; --red: #ff5533; --text: #ffb000; --muted: #8f6000; --teacher-bg: #1c1400; --student-bg: #ffb00014; --student-border: #ffb00033; } /* A "kiválasztva" állapot (pl. MCQ Drill kérdésszám-választó) zöld/borostyán témában eredetileg var(--accent) szöveg var(--surface) hátteret kapott – mivel a kettő ugyanaz a szín (csak eltérő fényerő), ez foszforeszkáló, alig olvasható "izzást" adott. Terminál-szerű inverz videó (kitöltött háttér + sötét szöveg) ugyanolyan hangulatú, de valódi kontrasztot ad. */ html[data-theme="green"] .count-btn.selected, html[data-theme="amber"] .count-btn.selected { background: var(--accent); color: var(--bg); font-weight: 700; } .theme-toggle-icon { display: inline-block; } .theme-toggle-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; padding: 5px 10px; font-size: 14px; line-height: 1; flex-shrink: 0; } .theme-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle-fixed { position: fixed; top: 12px; right: 12px; z-index: 50; background: var(--surface); }