/* ธีมสีทดลอง — ใช้เมื่อ เท่านั้น ค่าเริ่มต้นยังเป็นธีมเดิมใน styles.css */
/* ===== 1. Cyber Neon — ฟ้านีออนบนดำสนิท ===== */
[data-theme="neon"] {
--bg: #05060a; --card: #0c0f17; --card2: #141926; --line: #1c2436;
--text: #e6f7ff; --muted: #7089a6;
--accent: #00e5ff; --green: #3dffa2; --blue: #7a8cff; --danger: #ff3d81; --yellow: #ffe066;
--on-accent: #001317;
--bar-bg: rgba(5, 6, 10, .88); --tab-bg: rgba(12, 15, 23, .92);
--font: "Chakra Petch";
}
[data-theme="neon"] .card { border-color: rgba(0, 229, 255, .14); box-shadow: 0 0 0 1px rgba(0,229,255,.03), 0 8px 30px rgba(0, 229, 255, .05); }
[data-theme="neon"] .ring { overflow: visible; }
[data-theme="neon"] .ring-fg { filter: drop-shadow(0 0 3px rgba(0, 229, 255, .9)); }
[data-theme="neon"] .bignum { text-shadow: 0 0 18px rgba(0, 229, 255, .55); }
[data-theme="neon"] .btn-primary { box-shadow: 0 0 22px rgba(0, 229, 255, .35); }
[data-theme="neon"] .tab.active { text-shadow: 0 0 10px var(--accent); }
[data-theme="neon"] .iobar i { box-shadow: 0 0 10px currentColor; }
/* ===== 2. Black Gold — ดำด้าน ทองหรู ===== */
[data-theme="gold"] {
--bg: #0a0908; --card: #13110f; --card2: #1c1915; --line: #2b2620;
--text: #f4ede0; --muted: #8f8674;
--accent: #d9b25f; --green: #9fd49a; --blue: #c9a86a; --danger: #e5705a; --yellow: #e8c872;
--on-accent: #1a1204;
--bar-bg: rgba(10, 9, 8, .9); --tab-bg: rgba(19, 17, 15, .95);
--font: "Prompt";
}
[data-theme="gold"] .card { border-color: rgba(217, 178, 95, .16); }
[data-theme="gold"] .bignum {
background: linear-gradient(180deg, #fff1c9, #d9b25f 55%, #9c7a34);
-webkit-background-clip: text; background-clip: text; color: transparent !important;
}
[data-theme="gold"] .btn-primary { background: linear-gradient(135deg, #f3d98f, #c79a3e); border-color: #c79a3e; }
[data-theme="gold"] .sectiontitle { letter-spacing: .5px; }
/* ===== 3. Carbon Red — สปอร์ตแบบรถแข่ง ===== */
[data-theme="carbon"] {
--bg: #0b0b0c; --card: #151517; --card2: #1e1e21; --line: #2a2a2e;
--text: #f5f5f5; --muted: #8e8e96;
--accent: #ff2e3c; --green: #00d68f; --blue: #4ab3ff; --danger: #ff2e3c; --yellow: #ffc233;
--on-accent: #ffffff;
--bar-bg: rgba(11, 11, 12, .9); --tab-bg: rgba(21, 21, 23, .95);
--radius: 10px;
--font: "Kanit";
}
[data-theme="carbon"] body {
background:
repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
var(--bg);
}
[data-theme="carbon"] .card { border-top: 2px solid rgba(255, 46, 60, .55); }
[data-theme="carbon"] .bignum, [data-theme="carbon"] .ioval, [data-theme="carbon"] .vval { font-style: italic; }
[data-theme="carbon"] .sectiontitle { text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
[data-theme="carbon"] .btn, [data-theme="carbon"] .row { border-radius: 8px; }
/* ===== 4. Aurora — ม่วงฟ้าแสงเหนือ กระจกฝ้า ===== */
[data-theme="aurora"] {
--bg: #080b1a; --card: rgba(22, 27, 52, .62); --card2: rgba(40, 46, 84, .55); --line: rgba(140, 150, 255, .14);
--text: #eef0ff; --muted: #939bc7;
--accent: #8b6cff; --green: #34e8b4; --blue: #5cc8ff; --danger: #ff6b9a; --yellow: #ffd479;
--on-accent: #ffffff;
--bar-bg: rgba(8, 11, 26, .72); --tab-bg: rgba(14, 18, 40, .8);
--radius: 20px;
--font: "IBM Plex Sans Thai";
}
[data-theme="aurora"] body {
background:
radial-gradient(60vw 50vh at 0% 0%, rgba(139, 108, 255, .28), transparent 70%),
radial-gradient(60vw 50vh at 100% 30%, rgba(52, 232, 180, .16), transparent 70%),
radial-gradient(70vw 50vh at 50% 100%, rgba(92, 200, 255, .14), transparent 70%),
var(--bg);
background-attachment: fixed;
}
[data-theme="aurora"] .card, [data-theme="aurora"] .row, [data-theme="aurora"] .vtile { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-theme="aurora"] .btn-primary { background: linear-gradient(135deg, #8b6cff, #5cc8ff); border-color: transparent; }
[data-theme="aurora"] .ring { overflow: visible; }
[data-theme="aurora"] .ring-fg { filter: drop-shadow(0 0 8px rgba(139, 108, 255, .7)); }
/* ===== 5. Stealth Lime — ทหาร/เทอร์มินัล เขียวมะนาว ===== */
[data-theme="lime"] {
--bg: #0b0d0a; --card: #12150f; --card2: #1a1e16; --line: #262c20;
--text: #e9f2dc; --muted: #86917a;
--accent: #c6ff3d; --green: #5dfc9a; --blue: #7fd3ff; --danger: #ff6a3d; --yellow: #ffd23d;
--on-accent: #111a00;
--bar-bg: rgba(11, 13, 10, .9); --tab-bg: rgba(18, 21, 15, .95);
--radius: 6px;
--font: "Bai Jamjuree";
}
[data-theme="lime"] .sectiontitle { text-transform: uppercase; letter-spacing: 1.5px; font-size: 12.5px; }
[data-theme="lime"] .bignum, [data-theme="lime"] .ioval, [data-theme="lime"] .vval,
[data-theme="lime"] .kcal, [data-theme="lime"] .bv { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -1px; }
[data-theme="lime"] .card { border-style: solid; border-color: #2f3727; }
[data-theme="lime"] .btn, [data-theme="lime"] .row, [data-theme="lime"] .vtile { border-radius: 6px; }
/* ===== 6. Arctic Light — สว่าง สะอาด แบบแอปสุขภาพ ===== */
[data-theme="arctic"] {
--bg: #eef2f7; --card: #ffffff; --card2: #eef1f6; --line: #dde3ec;
--text: #121826; --muted: #6b7486;
--accent: #0a84ff; --green: #14b871; --blue: #0a84ff; --danger: #ff3b4e; --yellow: #f5a524;
--on-accent: #ffffff;
--bar-bg: rgba(238, 242, 247, .88); --tab-bg: rgba(255, 255, 255, .94);
--radius: 18px;
--font: "Noto Sans Thai";
}
[data-theme="arctic"] .card, [data-theme="arctic"] .row { border-color: transparent; box-shadow: 0 1px 2px rgba(18,24,38,.05), 0 6px 20px rgba(18,24,38,.06); }
[data-theme="arctic"] .sheet { background: rgba(18, 24, 38, .35); }
[data-theme="arctic"] .toast.err { color: var(--danger); }
/* ฟอนต์ของธีม */
[data-theme] body { font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", system-ui, sans-serif; }
/* ---------- ตัวเลือกธีมในหน้าตั้งค่า ---------- */
.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.themetile {
display: grid; gap: 2px; justify-items: start; text-align: left;
padding: 8px; border: 2px solid var(--line); border-radius: 14px;
background: var(--card2); color: var(--text); font: inherit; cursor: pointer;
}
.themetile.on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.themetile .tprev {
position: relative; width: 100%; height: 58px; border-radius: 9px; margin-bottom: 6px;
border: 1px solid rgba(128, 128, 128, .25); overflow: hidden;
}
.themetile .tcard {
position: absolute; left: 8px; right: 8px; top: 9px; bottom: 9px; border-radius: 6px;
display: grid; align-content: center; gap: 5px; padding: 0 8px;
}
.themetile .tcard i { display: block; height: 5px; border-radius: 9px; }
.themetile .tdot { position: absolute; right: 13px; top: 14px; width: 12px; height: 12px; border-radius: 50%; }
.themetile .tname { font-weight: 700; font-size: 13px; }
.themetile .tdesc { font-size: 11px; color: var(--muted); }