/** * MBRSC DDA Theme — dds-dark-mode.css * * Dark Mode component overrides. * Activated by: or * Source: https://designsystem.dubai.ae/developers/light-mode-dark-mode.md * * All color tokens are already switched in dds-tokens.css [data-theme="dark"]. * This file handles component-specific dark mode visual adjustments * that go beyond simple color token swaps. * * @package MBRSC_DDA_Theme */ /* ============================================================================= HEADER — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-header { background: var(--mbrsc-header-bg); border-color: var(--mbrsc-header-border); box-shadow: 0 1px 4px rgba(0,0,0,.3); } [data-theme="dark"] .mbrsc-header__logo-img--dark { display: block; } [data-theme="dark"] .mbrsc-header__logo-img--light { display: none; } [data-theme="dark"] .mbrsc-nav__link { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-nav__link:hover, [data-theme="dark"] .mbrsc-nav__link--active { color: var(--mbrsc-color-primary); } [data-theme="dark"] .mbrsc-header__search-btn, [data-theme="dark"] .mbrsc-header__lang-btn { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-header__search-btn:hover, [data-theme="dark"] .mbrsc-header__lang-btn:hover { background: var(--mbrsc-color-surface-variant); } /* ============================================================================= CARDS — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-card { background: var(--mbrsc-card-bg); border-color: var(--mbrsc-card-border); box-shadow: var(--mbrsc-card-shadow); } [data-theme="dark"] .mbrsc-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); } [data-theme="dark"] .mbrsc-card__category, [data-theme="dark"] .mbrsc-card__tag { background: var(--mbrsc-color-surface-variant); color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-card__title { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-card__excerpt, [data-theme="dark"] .mbrsc-card__meta { color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-card__read-more { color: var(--mbrsc-color-primary); } /* ============================================================================= BUTTONS — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-btn--primary { background: var(--mbrsc-color-primary); color: var(--mbrsc-color-on-primary); } [data-theme="dark"] .mbrsc-btn--primary:hover { background: var(--mbrsc-color-primary-hover); } [data-theme="dark"] .mbrsc-btn--secondary { background: transparent; border-color: var(--mbrsc-color-primary); color: var(--mbrsc-color-primary); } [data-theme="dark"] .mbrsc-btn--secondary:hover { background: var(--mbrsc-color-primary-container); } [data-theme="dark"] .mbrsc-btn--ghost { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-btn--ghost:hover { background: var(--mbrsc-color-surface-variant); } /* ============================================================================= FORMS / INPUTS — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-input, [data-theme="dark"] .mbrsc-select, [data-theme="dark"] .mbrsc-textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: var(--mbrsc-input-bg); border-color: var(--mbrsc-input-border); color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-input:focus, [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--mbrsc-color-primary); box-shadow: 0 0 0 3px rgba(175, 196, 255, 0.2); } [data-theme="dark"] label { color: var(--mbrsc-color-text-secondary); } /* ============================================================================= SECTIONS — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-section { background: var(--mbrsc-color-background); } [data-theme="dark"] .mbrsc-section--alt { background: var(--mbrsc-color-surface); } [data-theme="dark"] .mbrsc-section__title { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-section__subtitle { color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-section__header-line { background: var(--mbrsc-color-primary); } /* ============================================================================= BREADCRUMB — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-breadcrumb a { color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-breadcrumb a:hover { color: var(--mbrsc-color-primary); } [data-theme="dark"] .mbrsc-breadcrumb [aria-current="page"] { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-breadcrumb__sep { color: var(--mbrsc-color-text-disabled); } /* ============================================================================= SEARCH OVERLAY — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-search-overlay { background: rgba(0, 0, 0, 0.92); } [data-theme="dark"] .mbrsc-search-overlay__input { background: var(--mbrsc-color-surface-variant); border-color: var(--mbrsc-color-outline); color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-search-overlay__result { background: var(--mbrsc-color-surface); border-color: var(--mbrsc-color-outline-variant); } [data-theme="dark"] .mbrsc-search-overlay__result:hover { background: var(--mbrsc-color-surface-variant); } /* ============================================================================= FOOTER — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-footer { background: var(--dda-neutral-10); color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-footer__heading { color: var(--mbrsc-color-text-primary); } [data-theme="dark"] .mbrsc-footer__link { color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-footer__link:hover { color: var(--mbrsc-color-primary); } [data-theme="dark"] .mbrsc-footer__divider { border-color: var(--mbrsc-color-divider); } [data-theme="dark"] .mbrsc-footer__bottom { background: var(--dda-neutral-17); border-color: var(--mbrsc-color-divider); color: var(--mbrsc-color-text-secondary); } /* ============================================================================= BADGES / STATUS CHIPS — Dark Mode ============================================================================= */ [data-theme="dark"] .mbrsc-badge--open, [data-theme="dark"] .mbrsc-status--active { background: var(--mbrsc-color-success-container); color: var(--mbrsc-color-success); } [data-theme="dark"] .mbrsc-badge--closed, [data-theme="dark"] .mbrsc-status--completed { background: var(--mbrsc-color-surface-variant); color: var(--mbrsc-color-text-secondary); } [data-theme="dark"] .mbrsc-badge--upcoming, [data-theme="dark"] .mbrsc-status--planned { background: var(--mbrsc-color-info-container); color: var(--mbrsc-color-info); } [data-theme="dark"] .mbrsc-badge--warning { background: var(--mbrsc-color-warning-container); color: var(--mbrsc-color-warning); } /* ============================================================================= LIGHTBOX — Dark Mode (already dark by default, minor tweaks) ============================================================================= */ [data-theme="dark"] .mbrsc-lightbox { background: rgba(0, 0, 0, 0.97); } [data-theme="dark"] .mbrsc-lightbox__caption { color: var(--mbrsc-color-text-secondary); } /* ============================================================================= DARK MODE TOGGLE BUTTON ============================================================================= */ .mbrsc-theme-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: var(--mbrsc-radius-full); background: transparent; color: var(--mbrsc-color-text-primary); cursor: pointer; transition: background var(--mbrsc-transition-fast), color var(--mbrsc-transition-fast); } .mbrsc-theme-toggle:hover { background: var(--mbrsc-color-surface-variant); } .mbrsc-theme-toggle:focus-visible { outline: 2px solid var(--mbrsc-color-primary); outline-offset: 2px; } /* Icon swap */ .mbrsc-theme-toggle .icon-light { display: block; } .mbrsc-theme-toggle .icon-dark { display: none; } [data-theme="dark"] .mbrsc-theme-toggle .icon-light { display: none; } [data-theme="dark"] .mbrsc-theme-toggle .icon-dark { display: block; }