/* ========================================================================== ModDroid Ultra - Dark Mode Enhancements Activated via [data-theme="dark"] on element Or via prefers-color-scheme: dark when theme mode is "auto" ========================================================================== */ /* When user explicitly chooses dark */ html[data-theme="dark"] { color-scheme: dark; } html[data-theme="dark"] body { background: var(--md-surface); color: var(--md-on-surface); } /* Glassmorphism header - stronger blur in dark */ html[data-theme="dark"] .site-header { background: color-mix(in srgb, var(--md-surface-container-low) 70%, transparent); border-bottom-color: var(--md-surface-container-highest); } /* Card hover glow in dark */ html[data-theme="dark"] .app-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px var(--md-primary); } /* Modal overlays - darker */ html[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.7); } /* Custom scrollbar - dark themed */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--md-surface-container); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--md-outline); border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--md-primary); } /* Tables */ html[data-theme="dark"] table.widefat, html[data-theme="dark"] .wp-list-table { background: var(--md-surface-container); color: var(--md-on-surface); border-color: var(--md-outline-variant); } html[data-theme="dark"] .wp-list-table thead th, html[data-theme="dark"] .wp-list-table tfoot th { background: var(--md-surface-container-high); } html[data-theme="dark"] .wp-list-table.striped > tbody > :nth-child(odd) { background: var(--md-surface-container-low); } /* Form inputs */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--md-surface-container-high); border-color: var(--md-outline-variant); color: var(--md-on-surface); } /* Auto dark mode based on system preference */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body.theme-auto { --md-primary: #D0BCFF; --md-on-primary: #381E72; --md-primary-container: #4F378B; --md-on-primary-container: #EADDFF; --md-secondary: #CCC2DC; --md-on-secondary: #332D41; --md-secondary-container: #4A4458; --md-on-secondary-container: #E8DEF8; --md-tertiary: #EFB8C8; --md-tertiary-container: #633B48; --md-error: #F2B8B5; --md-error-container: #8C1D18; --md-surface: #141218; --md-surface-dim: #141218; --md-surface-bright: #3B383E; --md-surface-container-lowest: #0F0D13; --md-surface-container-low: #1D1B20; --md-surface-container: #211F26; --md-surface-container-high: #2B2930; --md-surface-container-highest: #36343B; --md-on-surface: #E6E0E9; --md-on-surface-variant: #CAC4D0; --md-outline: #938F99; --md-outline-variant: #49454F; --md-success: #81C784; --md-success-container: #1B5E20; --md-warning: #FFB74D; --md-warning-container: #E65100; --md-info: #4FC3F7; --md-info-container: #01579B; color-scheme: dark; } }