/* APower Flex — Theme System Toggle via [data-theme="light"] / [data-theme="dark"] on */ [data-theme="light"] { --apf-primary: #6264A7; --apf-primary-hover: #585A96; --apf-primary-active: #464775; --apf-primary-tint: #E8EBFA; --apf-topbar-bg: #1A2A42; --apf-bg-page: #F3F2F1; --apf-bg-sidebar: #FAFAFA; --apf-bg-card: #FFFFFF; --apf-bg-hover: #F3F2F1; --apf-bg-active: #E8EBFA; --apf-bg-input: #FFFFFF; --apf-text-primary: #242424; --apf-text-secondary: #616161; --apf-text-tertiary: #8A8886; --apf-text-on-dark: #FFFFFF; --apf-border: #E0E0E0; --apf-border-strong: #C7C7C7; --apf-success-bg: #E1F5EE; --apf-success-text: #085041; --apf-warning-bg: #FAEEDA; --apf-warning-text: #854F0B; --apf-danger-bg: #FCEBEB; --apf-danger-text: #791F1F; --apf-info-bg: #E6F1FB; --apf-info-text: #0C447C; --apf-icon-purple-bg: #E8EBFA; --apf-icon-purple-fg: #534AB7; --apf-icon-teal-bg: #E1F5EE; --apf-icon-teal-fg: #0F6E56; --apf-icon-amber-bg: #FAEEDA; --apf-icon-amber-fg: #854F0B; --apf-chart-line: #6264A7; --apf-chart-fill: rgba(98, 100, 167, 0.12); } [data-theme="dark"] { --apf-primary: #7B7DC2; --apf-primary-hover: #8B8DCF; --apf-primary-active: #6264A7; --apf-primary-tint: #2D2E4F; --apf-topbar-bg: #0F1A2C; --apf-bg-page: #1F1F1F; --apf-bg-sidebar: #252525; --apf-bg-card: #2D2D2D; --apf-bg-hover: #3A3A3A; --apf-bg-active: #2D2E4F; --apf-bg-input: #1F1F1F; --apf-text-primary: #F3F2F1; --apf-text-secondary: #C8C6C4; --apf-text-tertiary: #979797; --apf-text-on-dark: #FFFFFF; --apf-border: #3F3F3F; --apf-border-strong: #4A4A4A; --apf-success-bg: #1E4035; --apf-success-text: #6DD5AB; --apf-warning-bg: #4A3A1F; --apf-warning-text: #FFC678; --apf-danger-bg: #4A2020; --apf-danger-text: #FF8A8A; --apf-info-bg: #1F3A55; --apf-info-text: #85B7EB; --apf-icon-purple-bg: #2D2E4F; --apf-icon-purple-fg: #AFA9EC; --apf-icon-teal-bg: #1E4035; --apf-icon-teal-fg: #5DCAA5; --apf-icon-amber-bg: #4A3A1F; --apf-icon-amber-fg: #EF9F27; --apf-chart-line: #AFA9EC; --apf-chart-fill: rgba(175, 169, 236, 0.18); } html, body, .apf-topbar, .apf-sidebar, .apf-main, .apf-card, .apf-kpi-card, .apf-nav-item, .apf-action, .apf-chip { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }