/* Dark mode styles for SCEPman HomePage Activated via data-theme="dark" on . Color palette aligned with Chakra UI dark mode (ProjectServer CI). */ [data-theme="dark"] body { color: #E2E8F0; /* gray.200 */ background-color: #1A202C; /* gray.800 */ } [data-theme="dark"] .toolbar { background-color: #171923; /* gray.900 */ color: #E2E8F0; } [data-theme="dark"] .admin__nav { background-color: #2D3748; /* gray.700 */ } [data-theme="dark"] .pretty-pane { background: #2D3748; border-left-color: #4A5568; border-right-color: #4A5568; } [data-theme="dark"] .pretty-pane .pretty-desc, [data-theme="dark"] .pretty-pane .pretty-value { background-color: #2D3748; /* this hides the dotted line between title and value in the area of the text, so it ends immediately before the text */ color: #E2E8F0; } [data-theme="dark"] .pretty-long-page .pretty-desc, [data-theme="dark"] .pretty-long-page .pretty-value { color: #A0AEC0; /* gray.400 */ background-color: #1A202C; /* this hides the dotted line between title and value in the area of the text, so it ends immediately before the text */ } [data-theme="dark"] .filler { border-bottom-color: #4A5568; } [data-theme="dark"] .nav { border-top-color: #4A5568; border-bottom-color: #4A5568; } [data-theme="dark"] .nav-link { color: #63B3ED; /* blue.300 */ } [data-theme="dark"] a { color: #63B3ED; } [data-theme="dark"] h4, [data-theme="dark"] h5 { color: #E2E8F0; } [data-theme="dark"] .alert-light { background-color: #2D3748; border-color: #4A5568; color: #CBD5E0; /* gray.300 */ } [data-theme="dark"] .alert-soft-primary { background-color: rgba(55, 125, 255, 0.15); border-color: rgba(55, 125, 255, 0.3); color: #90CDF4; /* blue.200 */ } [data-theme="dark"] .pretty-toc ol li a { color: #63B3ED; } [data-theme="dark"] .card { background-color: #2D3748; border-color: #4A5568; color: #E2E8F0; } [data-theme="dark"] .card-header { background-color: #2D3748; border-bottom-color: #4A5568; } [data-theme="dark"] .card-body { color: #CBD5E0; } [data-theme="dark"] .card-header-title { color: #63B3ED !important; } [data-theme="dark"] .custom-control-label { color: #CBD5E0; } [data-theme="dark"] .infoContainer { color: #CBD5E0; } [data-theme="dark"] .infoContainer label { color: #CBD5E0; } [data-theme="dark"] .badge { color: #E2E8F0; } [data-theme="dark"] .badge-primary { background-color: #2B6CB0; color: #fff; } [data-theme="dark"] .badge-warning { background-color: #D69E2E; color: #1A202C; } [data-theme="dark"] .badge-success, [data-theme="dark"] .badge-ok { background-color: #38A169; color: #fff; } [data-theme="dark"] .badge-danger, [data-theme="dark"] .badge-error { background-color: #E53E3E; color: #fff; } [data-theme="dark"] .badge-info { background-color: #3182CE; color: #fff; } [data-theme="dark"] .logo h1 { color: #E2E8F0; } [data-theme="dark"] .btn-primary { background-color: #3182CE; border-color: #3182CE; color: #fff; } [data-theme="dark"] .btn-primary:hover { background-color: #2B6CB0; border-color: #2B6CB0; } /* Scrollbar styling for dark mode */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #2D3748; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4A5568; border-radius: 4px; } [data-theme="dark"] .pretty-small a { color: #63B3ED; } /* Copy icon in dark mode */ [data-theme="dark"] .pretty-value svg { fill: #63B3ED !important; } /* Override light background from the style.css base styles */ [data-theme="dark"] .pretty-value[style*="background-color"] { background-color: #2D3748 !important; } /* iframe mode overrides */ [data-theme="dark"].iframe-mode .pretty-pane { border-color: #4A5568; } [data-theme="dark"].iframe-mode .admin__nav { border-bottom-color: #4A5568; background-color: #2D3748; } /* Theme toggle button */ .theme-toggle { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; color: white; border-radius: 6px; transition: background-color 0.2s; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } .theme-toggle svg { width: 20px; height: 20px; stroke: currentColor; } /* Hide the appropriate icon based on theme */ .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Responsive overrides for dark mode */ @media (max-width: 1399.98px) { [data-theme="dark"] .admin__nav { border-bottom-color: #4A5568; background-color: #2D3748; } [data-theme="dark"] .pretty-pane { border-color: #4A5568; } }