/** * KSPLink — 5 tema tampilan apps/PWA (data-theme pada ). */ /* 1 — Klasik Emas: hangat, nuansa koperasi tradisional */ html[data-theme="cream"], html:not([data-theme]) { --spa-dark: #1a1209; --spa-brown-dark: #4a2c0a; --spa-brown: #7a4419; --spa-brown-mid: #a0622a; --spa-brown-light: #c8935a; --spa-tan: #e8c9a0; --spa-cream: #f5ede0; --spa-white: #fefaf5; --spa-gold: #c9a227; --app-header-gradient: linear-gradient(135deg, #3d2208 0%, #6b3a12 42%, #9a5c28 100%); --app-card-bg: #fefaf5; --app-text-muted: #6b5340; --app-card-shadow: 0 2px 12px rgba(74, 44, 10, 0.08); } /* 2 — Midnight Gold: gelap mewah, aksen emas */ html[data-theme="midnight"] { --spa-dark: #f0ebe3; --spa-brown-dark: #e8dcc8; --spa-brown: #d4bc82; --spa-brown-mid: #b8943f; --spa-brown-light: #8a7344; --spa-tan: #252018; --spa-cream: #12100d; --spa-white: #1c1914; --spa-gold: #d4af37; --app-header-gradient: linear-gradient(135deg, #0f0e0c 0%, #1a1610 45%, #2a2218 100%); --app-card-bg: #1c1914; --app-text-muted: #a89878; --app-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* 3 — Safir: biru profesional, tenang */ html[data-theme="ocean"] { --spa-dark: #0a1628; --spa-brown-dark: #0c3d6e; --spa-brown: #1565c0; --spa-brown-mid: #1e88e5; --spa-brown-light: #64b5f6; --spa-tan: #bbdefb; --spa-cream: #e8f4fc; --spa-white: #ffffff; --spa-gold: #0288d1; --app-header-gradient: linear-gradient(135deg, #0a2744 0%, #0d47a1 48%, #1565c0 100%); --app-card-bg: #ffffff; --app-text-muted: #546e7a; --app-card-shadow: 0 2px 12px rgba(13, 71, 161, 0.1); } /* 4 — Zamrud: hijau elegan, segar */ html[data-theme="emerald"] { --spa-dark: #0a1f18; --spa-brown-dark: #0d4a3a; --spa-brown: #14785c; --spa-brown-mid: #1a9d7a; --spa-brown-light: #5bb898; --spa-tan: #b8e0d4; --spa-cream: #edf7f3; --spa-white: #ffffff; --spa-gold: #2eaa80; --app-header-gradient: linear-gradient(135deg, #0a2e24 0%, #0f5c46 48%, #14785c 100%); --app-card-bg: #ffffff; --app-text-muted: #4a6b60; --app-card-shadow: 0 2px 12px rgba(15, 92, 70, 0.1); } /* 5 — Rose Gold: blush modern, lembut */ html[data-theme="rose"] { --spa-dark: #2a1820; --spa-brown-dark: #6b3a4a; --spa-brown: #9e5a6e; --spa-brown-mid: #c4788a; --spa-brown-light: #dfa8b4; --spa-tan: #f0d4da; --spa-cream: #faf0f2; --spa-white: #fffbfc; --spa-gold: #c9956a; --app-header-gradient: linear-gradient(135deg, #4a2030 0%, #7a3d52 48%, #a8556a 100%); --app-card-bg: #fffbfc; --app-text-muted: #8a6070; --app-card-shadow: 0 2px 12px rgba(122, 61, 82, 0.1); } html[data-theme="midnight"] body, html[data-theme="midnight"] .app-container, html[data-theme="midnight"] .panduan-page, html[data-theme="midnight"] .riwayat-page { background: var(--spa-cream); color: var(--spa-dark); } html[data-theme="midnight"] .transaction-card, html[data-theme="midnight"] .wealth-item, html[data-theme="midnight"] .saldo-card, html[data-theme="midnight"] .balance-card, html[data-theme="midnight"] .panduan-section, html[data-theme="midnight"] .profile-card { background: var(--spa-white); color: var(--spa-dark); } html[data-theme="midnight"] .section-title span, html[data-theme="midnight"] .trans-title { color: var(--spa-dark); } .theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (min-width: 360px) { .theme-picker { grid-template-columns: repeat(5, 1fr); } } .theme-picker-btn { min-width: 0; padding: 10px 4px; border-radius: 14px; border: 2px solid transparent; font-size: 10px; font-weight: 600; line-height: 1.35; cursor: pointer; text-align: center; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .theme-picker-btn i { display: block; font-size: 16px; margin-bottom: 4px; } .theme-picker-btn.active { border-color: var(--spa-brown-mid); transform: scale(1.04); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .theme-picker-btn[data-theme-pick="cream"] { background: linear-gradient(145deg, #fef6ea, #c8935a); color: #4a2c0a; } .theme-picker-btn[data-theme-pick="midnight"] { background: linear-gradient(145deg, #1c1914, #3d3420); color: #d4af37; } .theme-picker-btn[data-theme-pick="ocean"] { background: linear-gradient(145deg, #e3f2fd, #1565c0); color: #0d47a1; } .theme-picker-btn[data-theme-pick="emerald"] { background: linear-gradient(145deg, #e0f5ee, #14785c); color: #0a2e24; } .theme-picker-btn[data-theme-pick="rose"] { background: linear-gradient(145deg, #fceef1, #c4788a); color: #6b3a4a; }