/* ============================================================ ResTranslate Dark Mode Activated via [data-theme="dark"] on . Overrides --rt-* tokens + EasyAdmin variables. Last review: 11 Feb 2026 — WCAG AA contrast audit ============================================================ */ [data-theme="dark"] { /* --- Surfaces (graduated for depth hierarchy) --- */ --rt-surface: #1a1a2e; --rt-surface-alt: #16213e; --rt-primary-50: #1e1e3a; /* --- Text (bumped for WCAG AA 4.5:1 minimum) --- */ --rt-text: #e8e8f4; --rt-text-secondary: #B0B0CC; /* --- Borders (stronger for visibility) --- */ --rt-border: #3a3a56; --rt-border-light: #2e2e4a; /* --- Primary adjustments for dark bg (keep hue, bump lightness) --- */ --rt-primary-light: #c4bcff; /* --- Semantic (slightly desaturated for dark) --- */ --rt-success-light: #0f3d1f; --rt-warning-light: #3d2e0a; --rt-danger-light: #3d1515; --rt-info-light: #0f2340; /* --- Shadows (stronger on dark) --- */ --rt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --rt-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); --rt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --rt-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); /* --- EasyAdmin overrides --- */ --body-bg: #1a1a2e; --text-color: #e8e8f4; --text-color-dark: #f0f0fa; --text-color-light: #B0B0CC; --content-panel-bg: #22223a; --form-bg: #22223a; --table-header-bg: #1e1e36; --table-footer-bg: #1a1a2e; --fieldset-bg: #1e1e36; --white: #24243e; --gray-50: #1e1e36; --gray-100: #282848; --gray-200: #34345a; --gray-300: #44446a; --gray-400: #5a5a7a; --gray-500: #7a7a96; --gray-600: #B0B0CC; --gray-700: #d0d0e4; --gray-800: #e0e0ef; --gray-900: #f0f0fa; --black: #ffffff; --border-color: #3a3a56; --box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5); --link-color: #a498e8; --link-hover-color: #c4bcff; --highlight-bg: #3d350a; --text-muted: #8888A4; /* Bootstrap overrides — separated enough for visual depth */ --bs-body-bg: #1a1a2e; --bs-body-color: #e8e8f4; --bs-white: #24243e; --bs-light: #1a1a2e; --bs-dark: #f0f0fa; } /* -------------------------------------------------------- Body & global -------------------------------------------------------- */ [data-theme="dark"] body { background-color: #1a1a2e; color: #e8e8f4; } /* -------------------------------------------------------- Sidebar — keep violet but slightly darker -------------------------------------------------------- */ [data-theme="dark"] .main-sidebar { background: #221840 !important; } /* Sidebar section titles (MENU, GESTION, etc.) — bright mauve for readability */ [data-theme="dark"] #main-menu .menu .menu-header { color: #A78BFA !important; font-weight: 600; letter-spacing: 0.06em; } /* Sidebar menu links — ensure white-ish for contrast on deep violet */ [data-theme="dark"] #main-menu .menu a { color: rgba(255, 255, 255, 0.88) !important; } [data-theme="dark"] #main-menu .menu a:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.12) !important; } [data-theme="dark"] #main-menu .menu .menu-item.active > a { color: #ffffff !important; background: rgba(167, 139, 250, 0.25) !important; } [data-theme="dark"] #main-menu .menu .menu-icon { color: rgba(219, 214, 255, 0.8) !important; } [data-theme="dark"] body.ea-sidebar-width-compact #main-menu .menu li:hover { background: #170830 !important; } /* -------------------------------------------------------- Header -------------------------------------------------------- */ [data-theme="dark"] .main-header { background: #22223a; border-bottom: 1px solid #3a3a56; } [data-theme="dark"] .main-header #header-logo a { color: #e8e8f4 !important; } [data-theme="dark"] .wrapper .content-top { background: #22223a; border-bottom-color: #3a3a56; } [data-theme="dark"] .wrapper .content-top a, [data-theme="dark"] .wrapper .content-top .btn, [data-theme="dark"] .wrapper .content-top span { color: #e8e8f4; } [data-theme="dark"] .user.user-menu-wrapper .user-name { color: #e8e8f4; } [data-theme="dark"] .user.user-menu-wrapper .user-avatar { color: #c4bcff; } /* -------------------------------------------------------- Content header (page title + actions bar) -------------------------------------------------------- */ [data-theme="dark"] .content-header { background: #1a1a2e; margin-bottom: var(--rt-space-4); } [data-theme="dark"] .content-header-title .title { color: #f0f0fa !important; } [data-theme="dark"] .content-header-title .title small { color: #B0B0CC; } [data-theme="dark"] .content-header .page-actions a, [data-theme="dark"] .content-header .page-actions .btn { color: #e8e8f4; } /* -------------------------------------------------------- Content panels / cards -------------------------------------------------------- */ [data-theme="dark"] .content-panel { background: #22223a; border-color: #3a3a56; } [data-theme="dark"] .content-panel-header { border-bottom-color: #3a3a56; } [data-theme="dark"] .content-panel-body { background: #22223a; } /* -------------------------------------------------------- Tables -------------------------------------------------------- */ [data-theme="dark"] .datagrid { color: #e8e8f4; } [data-theme="dark"] .datagrid thead th { background-color: #1e1e36; color: #d0d0e4; border-bottom-color: #3a3a56; } [data-theme="dark"] .datagrid tbody tr { border-bottom-color: #2e2e4a; } [data-theme="dark"] .datagrid tbody tr:hover { background-color: #282848; } [data-theme="dark"] .table, [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { color: #e8e8f4; --bs-table-striped-bg: #1e1e36; --bs-table-hover-bg: #282848; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * { background-color: #22223a; } /* -------------------------------------------------------- Forms — stronger borders + better label/placeholder contrast -------------------------------------------------------- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #1e1e36; color: #e8e8f4; border: 1px solid #4a4a66; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #282848; color: #f0f0fa; border-color: #7c6bc4 !important; box-shadow: 0 0 0 3px rgba(124, 107, 196, 0.3) !important; } [data-theme="dark"] .form-control::placeholder { color: rgba(255, 255, 255, 0.38); } [data-theme="dark"] label, [data-theme="dark"] .form-label { color: #E0E0EF; } /* File inputs (e.g. PDF import) */ [data-theme="dark"] .form-control[type="file"] { color: #e8e8f4; } [data-theme="dark"] .form-control::file-selector-button { background-color: #34345a; color: #e8e8f4; border-color: #4a4a66; } [data-theme="dark"] .form-control:hover::file-selector-button { background-color: #44446a; color: #f0f0fa; } /* Textareas */ [data-theme="dark"] textarea.form-control { border: 1px solid #4a4a66; } /* Checkboxes / switches */ [data-theme="dark"] .form-check-input { background-color: #3a3a56; border-color: #5a5a7a; } [data-theme="dark"] .form-check-input:checked { background-color: var(--rt-accent); border-color: var(--rt-accent); } /* Form help text */ [data-theme="dark"] .form-help, [data-theme="dark"] .form-text, [data-theme="dark"] small.text-muted, [data-theme="dark"] .text-muted { color: #8888A4 !important; } /* -------------------------------------------------------- Buttons (keep brand colors, adjust outlines) -------------------------------------------------------- */ [data-theme="dark"] .btn-outline-secondary { border-color: #5a5a7a !important; color: #d0d0e4 !important; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--rt-primary) !important; color: #ffffff !important; } /* .text-dark buttons in dark mode (menu action icons) */ [data-theme="dark"] .btn.text-dark, [data-theme="dark"] .text-dark { color: #C0C0E0 !important; } [data-theme="dark"] .btn.text-dark:hover { color: #ffffff !important; } /* -------------------------------------------------------- Action icons (edit, delete, move, visibility) Toolbar buttons in menu form -------------------------------------------------------- */ [data-theme="dark"] .notifiable { color: #B0B0CC !important; } [data-theme="dark"] .notifiable.notify { color: #E0E0EF !important; } [data-theme="dark"] .btn-group-outline .fas, [data-theme="dark"] .arrows-btn-group .far { text-shadow: -1px 0 #22223a, 0 1px #22223a, 1px 0 #22223a, 0 -1px #22223a; } [data-theme="dark"] .fas, [data-theme="dark"] .far, [data-theme="dark"] .fa { color: inherit; } /* Action buttons in datagrids / lists */ [data-theme="dark"] .datagrid .actions a, [data-theme="dark"] .datagrid .field-actions a { color: #C0C0E0; } [data-theme="dark"] .datagrid .actions a:hover, [data-theme="dark"] .datagrid .field-actions a:hover { color: #ffffff; } /* -------------------------------------------------------- Modals -------------------------------------------------------- */ [data-theme="dark"] .modal .modal-content { background-color: #22223a; border: 1px solid #3a3a56; } [data-theme="dark"] .modal .modal-header { background-color: #1f0a38; border-bottom-color: #3a3a56; } [data-theme="dark"] .modal .modal-body { background-color: #22223a; color: #e8e8f4; } [data-theme="dark"] .modal .modal-footer { background-color: #22223a; border-top-color: #3a3a56; } /* -------------------------------------------------------- Alerts -------------------------------------------------------- */ [data-theme="dark"] .alert-primary { background-color: #1e1e3a; border-color: #352f5a; color: #c4bcff; } [data-theme="dark"] .alert-success { background-color: #0f3d1f; border-color: #1a5c32; color: #86efac; } [data-theme="dark"] .alert-danger { background-color: #3d1515; border-color: #5c2020; color: #fca5a5; } [data-theme="dark"] .alert-warning { background-color: #3d2e0a; border-color: #5c4515; color: #fcd34d; } [data-theme="dark"] .alert-info { background-color: #0f2340; border-color: #1a3860; color: #93c5fd; } /* -------------------------------------------------------- Badges (keep vibrant on dark) -------------------------------------------------------- */ [data-theme="dark"] .badge { color: #ffffff !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #3a3a56 !important; color: #d0d0e4 !important; } [data-theme="dark"] .badge.bg-light { background-color: #34345a !important; color: #E0E0EF !important; } [data-theme="dark"] .badge.bg-warning.text-dark { color: #1a1a2e !important; } [data-theme="dark"] .badge-boolean-true { background-color: var(--rt-primary) !important; color: #ffffff !important; } [data-theme="dark"] .badge-boolean-false { background-color: #3a3a56 !important; border-color: #5a5a7a !important; color: #B0B0CC !important; } /* -------------------------------------------------------- Dropdowns -------------------------------------------------------- */ [data-theme="dark"] .dropdown-menu { background-color: #22223a; border-color: #3a3a56; } [data-theme="dark"] .dropdown-item { color: #e8e8f4; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #282848; color: #c4bcff; } [data-theme="dark"] .dropdown-divider { border-top-color: #3a3a56; } /* -------------------------------------------------------- Popover (user menu) -------------------------------------------------------- */ [data-theme="dark"] .popover { background-color: #22223a; border-color: #3a3a56; } [data-theme="dark"] .popover-body { color: #e8e8f4; } [data-theme="dark"] .popover .user-details { color: #d0d0e4; } [data-theme="dark"] .popover .user-action { color: #e8e8f4; } [data-theme="dark"] .popover .user-action:hover { background-color: #282848; color: #c4bcff; } /* -------------------------------------------------------- Pagination -------------------------------------------------------- */ [data-theme="dark"] .page-link { background-color: #22223a; border-color: #3a3a56; color: #c4bcff; } [data-theme="dark"] .page-link:hover { background-color: #282848; color: #e8e8f4; } /* -------------------------------------------------------- Search -------------------------------------------------------- */ [data-theme="dark"] .content-search .form-control { background-color: #1e1e36; color: #e8e8f4; border-color: #4a4a66; } /* -------------------------------------------------------- Scrollbar -------------------------------------------------------- */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a2e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #44446a; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a7a; } /* -------------------------------------------------------- Menu form page specifics -------------------------------------------------------- */ [data-theme="dark"] .form-floating { border-color: #4a4a66; } [data-theme="dark"] .form-floating label { background-color: #22223a; color: #B0B0CC; } [data-theme="dark"] .form-floating .form-control { background-color: #22223a; color: #f0f0fa; font-weight: 500; } [data-theme="dark"] #heading-nav .nav-link { color: #e8e8f4; background-color: #1e1e36; } [data-theme="dark"] #heading-nav .nav-link.active { color: #ffffff; } /* Section nav wrapper — override inline background-color: #ffffff */ [data-theme="dark"] .section.tab-pane > nav, [data-theme="dark"] .section.tab-pane > nav.navbar-light { background-color: #1a1a2e !important; } [data-theme="dark"] .section.tab-pane > nav .navbar-toggler-icon { filter: invert(1); } /* Section nav (section tabs) */ [data-theme="dark"] .section-nav .nav-item .nav-link { color: #d0d0e4; } [data-theme="dark"] .section-nav .nav-item .nav-link:before { background: #5a5a7a; } [data-theme="dark"] .section-nav .nav-item .nav-link:after { background: #5a5a7a; } [data-theme="dark"] .section-nav .nav-item .nav-link.active { color: #f0f0fa; } [data-theme="dark"] .section-nav .nav-item .nav-link.active:before { background: var(--rt-primary-light); } [data-theme="dark"] .section-nav .nav-item .nav-link.active:after { background: var(--rt-primary-light); } /* -------------------------------------------------------- Menu hierarchy depth differentiation Rubrique → Section → Categorie → Article Graduated background shades for visual depth -------------------------------------------------------- */ /* Rubrique (top level) — content-panel-body border-accent */ [data-theme="dark"] .content-panel-body.without-header { background-color: #1a1a2e; border-color: var(--rt-accent) !important; } /* Border-sandwich items with depth graduation */ [data-theme="dark"] .border-sandwich > div::before { border-color: #5a5a7a; } /* Category items within sections */ [data-theme="dark"] .category > .form-floating { background-color: #1f1f38; } [data-theme="dark"] .category > .form-floating label { background-color: #1f1f38; } /* Component items (articles) within categories */ [data-theme="dark"] .component > .form-floating { background-color: #242442; } [data-theme="dark"] .component > .form-floating label { background-color: #242442; } /* Category/component depth markers */ [data-theme="dark"] .category > .form-floating::before, [data-theme="dark"] .component > .form-floating::before { background: #7a7a96; } [data-theme="dark"] .component > .form-floating::after { background: #7a7a96; } /* Item-box overlays */ [data-theme="dark"] .item-box > div { background-color: #22223a; } [data-theme="dark"] .item-box > div > label { background-color: #22223a; } /* -------------------------------------------------------- Bootstrap utility overrides for dark mode -------------------------------------------------------- */ [data-theme="dark"] .bg-light { background-color: #1e1e36 !important; } [data-theme="dark"] .bg-white { background-color: #24243e !important; } [data-theme="dark"] .border { border-color: #3a3a56 !important; } [data-theme="dark"] .card { background-color: #22223a; border-color: #3a3a56; } [data-theme="dark"] .card-header { background-color: #1e1e36; border-bottom-color: #3a3a56; } [data-theme="dark"] .card-body { color: #e8e8f4; } /* -------------------------------------------------------- Input group (for combined inputs) -------------------------------------------------------- */ [data-theme="dark"] .input-group-text { background-color: #1e1e36; border-color: #4a4a66; color: #d0d0e4; } /* -------------------------------------------------------- Login page — dark mode overrides -------------------------------------------------------- */ [data-theme="dark"] .page-login { background: #0e0e1a !important; } [data-theme="dark"] .page-login::before { background: radial-gradient(circle, rgba(107, 79, 160, 0.18) 0%, transparent 70%); } [data-theme="dark"] .page-login::after { background: radial-gradient(circle, rgba(215, 42, 70, 0.1) 0%, transparent 70%); } [data-theme="dark"] .page-login .login-wrapper { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .page-login .login-branding { background: linear-gradient(160deg, #141428 0%, #0f1a30 50%, #140e22 100%); } /* Form card stays light in dark mode — high contrast for readability */ [data-theme="dark"] .page-login .content { background: #ffffff; } [data-theme="dark"] .page-login .theme-toggle { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.75); } [data-theme="dark"] .page-login .theme-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.25); color: #ffffff; } /* -------------------------------------------------------- Toggle button styling -------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--rt-surface-alt); border: 1px solid var(--rt-border); border-radius: var(--rt-radius-full); cursor: pointer; font-size: var(--rt-font-size-sm); font-family: var(--rt-font-family); padding: 5px 14px 5px 10px; transition: background var(--rt-transition), border-color var(--rt-transition); line-height: 1; color: var(--rt-text); white-space: nowrap; } .theme-toggle-icon { font-size: 16px; line-height: 1; } .theme-toggle-label { font-size: var(--rt-font-size-sm); font-weight: var(--rt-font-weight-medium); } .theme-toggle:hover { background: var(--rt-primary-50); border-color: var(--rt-primary-light); color: var(--rt-primary); } [data-theme="dark"] .theme-toggle { background: #2e2e4a; border-color: #44446a; color: #c4bcff; } [data-theme="dark"] .theme-toggle:hover { background: #3a3a56; border-color: #5a5a7a; color: #e8e8f4; }