SIDEL_ScriptsManager/app/static/css/themes.css

/* Theme management styles */

/* Light theme (default) */
.theme-light {
    --bg-color: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-color: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --navbar-bg: #0d6efd;
    --navbar-text: #ffffff;
}

/* Dark theme */
.theme-dark {
    --bg-color: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-color: #e9ecef;
    --text-muted: #adb5bd;
    --border-color: #495057;
    --card-bg: #2d2d2d;
    --navbar-bg: #0a58ca;
    --navbar-text: #ffffff;
}

/* Apply theme variables */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.theme-dark {
    background-color: #1a1a1a;
    color: #e9ecef;
}

.theme-dark .card {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #e9ecef;
}

.theme-dark .card-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: #495057;
}

.theme-dark .navbar-dark {
    background-color: #0a58ca !important;
}

.theme-dark .bg-light {
    background-color: #2d2d2d !important;
    color: #e9ecef;
}

.theme-dark .text-muted {
    color: #adb5bd !important;
}

.theme-dark .border {
    border-color: #495057 !important;
}

.theme-dark .form-control {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #e9ecef;
}

.theme-dark .form-control:focus {
    background-color: #2d2d2d;
    border-color: #0d6efd;
    color: #e9ecef;
}

.theme-dark .input-group-text {
    background-color: #495057;
    border-color: #495057;
    color: #e9ecef;
}

.theme-dark .dropdown-menu {
    background-color: #2d2d2d;
    border-color: #495057;
}

.theme-dark .dropdown-item {
    color: #e9ecef;
}

.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus {
    background-color: #495057;
    color: #ffffff;
}

.theme-dark .table {
    color: #e9ecef;
}

.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(255, 255, 255, 0.05);
}

.theme-dark .log-container {
    background-color: #000000;
    border-color: #495057;
}

.theme-dark .code-block {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #e9ecef;
}

.theme-dark .script-parameter {
    background-color: #2d2d2d;
    border-color: #495057;
    color: #e9ecef;
}

.theme-dark .project-selector {
    background-color: rgba(13, 110, 253, 0.2);
    border-color: #0d6efd;
    color: #e9ecef;
}

/* Theme toggle button */
.theme-light .theme-icon-dark {
    display: inline;
}

.theme-light .theme-icon-light {
    display: none;
}

.theme-dark .theme-icon-dark {
    display: none;
}

.theme-dark .theme-icon-light {
    display: inline;
}

#theme-toggle {
    border: none;
    background: none;
    color: inherit;
    padding: 0.5rem;
}

#theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

/* Dark theme specific overrides */
.theme-dark .navbar-nav .nav-link {
    color: #ffffff !important;
}

.theme-dark .navbar-nav .nav-link.active {
    color: #ffd43b !important;
}

.theme-dark .navbar-nav .nav-link:hover {
    color: #e9ecef !important;
}

.theme-dark .navbar-brand {
    color: #ffffff !important;
}

.theme-dark .navbar-brand:hover {
    color: #e9ecef !important;
}

.theme-dark .dropdown-toggle {
    color: #ffffff !important;
}

.theme-dark .dropdown-toggle:hover {
    color: #e9ecef !important;
}

.theme-dark .alert-info {
    background-color: #1a365d;
    border-color: #2c5aa0;
    color: #90cdf4;
}

.theme-dark .alert-success {
    background-color: #1a2e05;
    border-color: #38a169;
    color: #9ae6b4;
}

.theme-dark .alert-warning {
    background-color: #2d2019;
    border-color: #d69e2e;
    color: #faf089;
}

.theme-dark .alert-danger {
    background-color: #2d1b1b;
    border-color: #e53e3e;
    color: #fed7d7;
}

.theme-dark .btn-outline-primary {
    color: #6ea8fe;
    border-color: #6ea8fe;
}

.theme-dark .btn-outline-primary:hover {
    background-color: #6ea8fe;
    border-color: #6ea8fe;
    color: #000;
}

.theme-dark .btn-outline-secondary {
    color: #adb5bd;
    border-color: #adb5bd;
}

.theme-dark .btn-outline-secondary:hover {
    background-color: #adb5bd;
    border-color: #adb5bd;
    color: #000;
}

/* Navigation specific dark mode styles */
.theme-dark .navbar-nav .nav-link {
    color: #e9ecef !important;
}

.theme-dark .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

.theme-dark .navbar-brand {
    color: #ffffff !important;
}

.theme-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* User menu and language selector in dark mode */
.theme-dark .dropdown-toggle {
    color: #e9ecef !important;
    border: none !important;
}

.theme-dark .dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Language and user display text */
.theme-dark #current-language-display,
.theme-dark .navbar-nav .nav-link span {
    color: #e9ecef !important;
}

/* Progress bars in dark theme */
.theme-dark .progress {
    background-color: #495057;
}

/* Modal adjustments for dark theme */
.theme-dark .modal-content {
    background-color: #2d2d2d;
    border-color: #495057;
}

.theme-dark .modal-header {
    border-bottom-color: #495057;
}

.theme-dark .modal-footer {
    border-top-color: #495057;
}

/* Tooltip adjustments for dark theme */
.theme-dark .tooltip-inner {
    background-color: #495057;
    color: #ffffff;
}

.theme-dark .tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #495057;
}

.theme-dark .tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #495057;
}

.theme-dark .tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: #495057;
}

.theme-dark .tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #495057;
}