/* ============================================================ * APK Portal — Theme System (CSS Custom Properties) * ============================================================ * Five themes, zero JS required. Works via * * Usage: * ← default, current look * ← white / clean * ← dark green variant * ← dark blue variant * ← dark purple variant * ============================================================ */ /* ═══════════════════════════════════════════════════════ * THEME: Dark (default — matches current style.css) * ═══════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg-body: #201b1b; --bg-surface: #2a2222; --bg-card: #1a1515; --bg-input: #2a2222; --bg-hover: #3a3030; --bg-header: #201b1b; --bg-sidebar: #161b22; --bg-footer: #161212; --border-default: #3a3030; --border-input: #3a3030; --border-card: #302626; --text-primary: #e0e0e0; --text-secondary: #999; --text-muted: #666; --text-heading: #76c759; --text-link: #76c759; --text-link-hover: #f9c245; --accent: #76c759; --accent-hover: #5ca83f; --accent-soft: #76c75922; --btn-primary-bg: #76c759; --btn-primary-text:#201b1b; --btn-primary-hover:#5ca83f; --btn-outline-bg: transparent; --btn-outline-border:#3a3030; --btn-outline-text:#e0e0e0; --btn-danger-bg: #da3633; --btn-danger-hover:#f85149; --success: #3fb950; --warning: #d29922; --danger: #f85149; --info: #58a6ff; --tag-bg: #2a2222; --tag-text: #999; --tag-border: #3a3030; --tag-active-bg: #76c759; --tag-active-text: #201b1b; --badge-bg: #3a3030; --badge-text: #999; --stat-num: #76c759; --stat-label: #999; --stat-icon-bg: #2a2222; --scrollbar-thumb: #3a3030; --scrollbar-track: #201b1b; --nav-icon-bg: #2a2222; --nav-icon-color: #888; --nav-icon-hover-bg:#76c759; --nav-icon-hover-color:#201b1b; --logo-color: #76c759; --logo-hover: #f9c245; /* Admin sidebar */ --admin-sidebar-bg: #161b22; --admin-content-bg: #0d1117; --admin-sidebar-heading: #58a6ff; --admin-sidebar-footer: #161b22; --admin-stat-games: #58a6ff; --admin-stat-games-bg: #1f6feb22; --admin-stat-downloads: #3fb950; --admin-stat-downloads-bg:#3fb95022; --admin-stat-views: #d29922; --admin-stat-views-bg: #d2992222; --admin-stat-tags: #a371f7; --admin-stat-tags-bg: #a371f722; } /* ═══════════════════════════════════════════════════════ * THEME: Light * ═══════════════════════════════════════════════════════ */ [data-theme="light"] { --bg-body: #f6f8fa; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-input: #ffffff; --bg-hover: #f0f0f0; --bg-header: #ffffff; --bg-sidebar: #f6f8fa; --bg-footer: #f0f0f0; --border-default: #d0d7de; --border-input: #d0d7de; --border-card: #d0d7de; --text-primary: #1f2328; --text-secondary: #656d76; --text-muted: #8b949e; --text-heading: #0969da; --text-link: #0969da; --text-link-hover: #0550ae; --accent: #0969da; --accent-hover: #0550ae; --accent-soft: #0969da15; --btn-primary-bg: #0969da; --btn-primary-text:#ffffff; --btn-primary-hover:#0550ae; --btn-outline-bg: #ffffff; --btn-outline-border:#d0d7de; --btn-outline-text:#1f2328; --btn-danger-bg: #cf222e; --btn-danger-hover:#a40e26; --success: #1a7f37; --warning: #9a6700; --danger: #cf222e; --info: #0969da; --tag-bg: #f6f8fa; --tag-text: #656d76; --tag-border: #d0d7de; --tag-active-bg: #0969da; --tag-active-text: #ffffff; --badge-bg: #f0f0f0; --badge-text: #656d76; --stat-num: #0969da; --stat-label: #656d76; --stat-icon-bg: #f6f8fa; --scrollbar-thumb: #d0d7de; --scrollbar-track: #f6f8fa; --nav-icon-bg: #f0f0f0; --nav-icon-color: #656d76; --nav-icon-hover-bg:#0969da; --nav-icon-hover-color:#fff; --logo-color: #0969da; --logo-hover: #0550ae; /* Admin sidebar */ --admin-sidebar-bg: #ffffff; --admin-content-bg: #f6f8fa; --admin-sidebar-heading: #0969da; --admin-sidebar-footer: #f6f8fa; --admin-stat-games: #0969da; --admin-stat-games-bg: #0969da15; --admin-stat-downloads: #1a7f37; --admin-stat-downloads-bg:#1a7f3715; --admin-stat-views: #9a6700; --admin-stat-views-bg: #9a670015; --admin-stat-tags: #8250df; --admin-stat-tags-bg: #8250df15; } /* ═══════════════════════════════════════════════════════ * THEME: Green (dark variant) * ═══════════════════════════════════════════════════════ */ [data-theme="green"] { --bg-body: #0d1117; --bg-surface: #161b22; --bg-card: #161b22; --bg-input: #0d1117; --bg-hover: #1c2128; --bg-header: #0d1117; --bg-sidebar: #161b22; --bg-footer: #0d1117; --border-default: #21262d; --border-input: #30363d; --border-card: #21262d; --text-primary: #c9d1d9; --text-secondary: #8b949e; --text-muted: #484f58; --text-heading: #3fb950; --text-link: #3fb950; --text-link-hover: #7ee787; --accent: #3fb950; --accent-hover: #2ea043; --accent-soft: #23863622; --btn-primary-bg: #238636; --btn-primary-text:#ffffff; --btn-primary-hover:#2ea043; --btn-outline-bg: transparent; --btn-outline-border:#30363d; --btn-outline-text:#c9d1d9; --btn-danger-bg: #da3633; --btn-danger-hover:#f85149; --success: #3fb950; --warning: #d29922; --danger: #f85149; --info: #58a6ff; --tag-bg: #21262d; --tag-text: #8b949e; --tag-border: #30363d; --tag-active-bg: #238636; --tag-active-text: #ffffff; --badge-bg: #21262d; --badge-text: #8b949e; --stat-num: #3fb950; --stat-label: #8b949e; --stat-icon-bg: #161b22; --scrollbar-thumb: #30363d; --scrollbar-track: #0d1117; --nav-icon-bg: #21262d; --nav-icon-color: #8b949e; --nav-icon-hover-bg:#238636; --nav-icon-hover-color:#fff; --logo-color: #3fb950; --logo-hover: #7ee787; /* Admin sidebar */ --admin-sidebar-bg: #161b22; --admin-content-bg: #0d1117; --admin-sidebar-heading: #3fb950; --admin-sidebar-footer: #161b22; --admin-stat-games: #58a6ff; --admin-stat-games-bg: #1f6feb22; --admin-stat-downloads: #3fb950; --admin-stat-downloads-bg:#23863622; --admin-stat-views: #d29922; --admin-stat-views-bg: #d2992222; --admin-stat-tags: #a371f7; --admin-stat-tags-bg: #a371f722; } /* ═══════════════════════════════════════════════════════ * THEME: Blue (dark variant) * ═══════════════════════════════════════════════════════ */ [data-theme="blue"] { --bg-body: #0c1222; --bg-surface: #151d30; --bg-card: #151d30; --bg-input: #0c1222; --bg-hover: #1c2640; --bg-header: #0c1222; --bg-sidebar: #151d30; --bg-footer: #0a0f1a; --border-default: #1e2a42; --border-input: #2d3a58; --border-card: #1e2a42; --text-primary: #c8d6e5; --text-secondary: #8395a7; --text-muted: #576574; --text-heading: #54a0ff; --text-link: #54a0ff; --text-link-hover: #2e86de; --accent: #54a0ff; --accent-hover: #2e86de; --accent-soft: #1f6feb22; --btn-primary-bg: #1f6feb; --btn-primary-text:#ffffff; --btn-primary-hover:#388bfd; --btn-outline-bg: transparent; --btn-outline-border:#2d3a58; --btn-outline-text:#c8d6e5; --btn-danger-bg: #da3633; --btn-danger-hover:#f85149; --success: #3fb950; --warning: #d29922; --danger: #f85149; --info: #54a0ff; --tag-bg: #1e2a42; --tag-text: #8395a7; --tag-border: #2d3a58; --tag-active-bg: #1f6feb; --tag-active-text: #ffffff; --badge-bg: #1e2a42; --badge-text: #8395a7; --stat-num: #54a0ff; --stat-label: #8395a7; --stat-icon-bg: #151d30; --scrollbar-thumb: #2d3a58; --scrollbar-track: #0c1222; --nav-icon-bg: #1e2a42; --nav-icon-color: #8395a7; --nav-icon-hover-bg:#1f6feb; --nav-icon-hover-color:#fff; --logo-color: #54a0ff; --logo-hover: #2e86de; /* Admin sidebar */ --admin-sidebar-bg: #151d30; --admin-content-bg: #0c1222; --admin-sidebar-heading: #54a0ff; --admin-sidebar-footer: #151d30; --admin-stat-games: #54a0ff; --admin-stat-games-bg: #1f6feb22; --admin-stat-downloads: #3fb950; --admin-stat-downloads-bg:#3fb95022; --admin-stat-views: #d29922; --admin-stat-views-bg: #d2992222; --admin-stat-tags: #a371f7; --admin-stat-tags-bg: #a371f722; } /* ═══════════════════════════════════════════════════════ * THEME: Purple (dark variant) * ═══════════════════════════════════════════════════════ */ [data-theme="purple"] { --bg-body: #1a1025; --bg-surface: #251835; --bg-card: #251835; --bg-input: #1a1025; --bg-hover: #302245; --bg-header: #1a1025; --bg-sidebar: #251835; --bg-footer: #140c1e; --border-default: #362850; --border-input: #4a3870; --border-card: #362850; --text-primary: #d4c5e2; --text-secondary: #9b8aaf; --text-muted: #6e5c85; --text-heading: #b392f0; --text-link: #b392f0; --text-link-hover: #d2b8ff; --accent: #b392f0; --accent-hover: #935de0; --accent-soft: #8b5cf622; --btn-primary-bg: #8b5cf6; --btn-primary-text:#ffffff; --btn-primary-hover:#a78bfa; --btn-outline-bg: transparent; --btn-outline-border:#4a3870; --btn-outline-text:#d4c5e2; --btn-danger-bg: #da3633; --btn-danger-hover:#f85149; --success: #3fb950; --warning: #d29922; --danger: #f85149; --info: #b392f0; --tag-bg: #362850; --tag-text: #9b8aaf; --tag-border: #4a3870; --tag-active-bg: #8b5cf6; --tag-active-text: #ffffff; --badge-bg: #362850; --badge-text: #9b8aaf; --stat-num: #b392f0; --stat-label: #9b8aaf; --stat-icon-bg: #251835; --scrollbar-thumb: #4a3870; --scrollbar-track: #1a1025; --nav-icon-bg: #362850; --nav-icon-color: #9b8aaf; --nav-icon-hover-bg:#8b5cf6; --nav-icon-hover-color:#fff; --logo-color: #b392f0; --logo-hover: #d2b8ff; /* Admin sidebar */ --admin-sidebar-bg: #251835; --admin-content-bg: #1a1025; --admin-sidebar-heading: #b392f0; --admin-sidebar-footer: #251835; --admin-stat-games: #58a6ff; --admin-stat-games-bg: #1f6feb22; --admin-stat-downloads: #3fb950; --admin-stat-downloads-bg:#3fb95022; --admin-stat-views: #d29922; --admin-stat-views-bg: #d2992222; --admin-stat-tags: #a371f7; --admin-stat-tags-bg: #a371f722; }