/* Dark Mode Theme Overrides */ /* Applied via [data-theme="dark"] on the element */ [data-theme="dark"] { /* Core app surfaces */ --kendo-color-app-surface: #1e1e1e; --kendo-color-on-app-surface: #e0e0e0; --kendo-color-subtle: #a0a0a0; --kendo-color-surface: #2a2a2a; --kendo-color-surface-alt: #252525; --kendo-color-border: #444444; --kendo-color-border-alt: #666666; /* Base palette */ --kendo-color-base-subtle: #333333; --kendo-color-base-subtle-hover: #3a3a3a; --kendo-color-base-subtle-active: #424242; --kendo-color-base: #2d2d2d; --kendo-color-base-hover: #353535; --kendo-color-base-active: #3d3d3d; --kendo-color-base-emphasis: #999999; --kendo-color-base-on-subtle: #e0e0e0; --kendo-color-on-base: #e0e0e0; --kendo-color-base-on-surface: #e0e0e0; /* Primary (green for Streamliner branding) */ --kendo-color-primary-subtle: #2a3a24; --kendo-color-primary-subtle-hover: #334a2c; --kendo-color-primary-subtle-active: #3d5a35; --kendo-color-primary: #6a9f50; --kendo-color-primary-hover: #7db362; --kendo-color-primary-active: #578840; --kendo-color-primary-emphasis: #4a7236; --kendo-color-primary-on-subtle: #a8d494; --kendo-color-on-primary: #ffffff; --kendo-color-primary-on-surface: #7db362; /* Secondary */ --kendo-color-secondary-subtle: #2a2a2a; --kendo-color-secondary-subtle-hover: #333333; --kendo-color-secondary-subtle-active: #3a3a3a; --kendo-color-secondary: #888888; --kendo-color-secondary-hover: #999999; --kendo-color-secondary-active: #777777; --kendo-color-secondary-emphasis: #aaaaaa; --kendo-color-secondary-on-subtle: #cccccc; --kendo-color-on-secondary: #ffffff; --kendo-color-secondary-on-surface: #aaaaaa; /* Tertiary (teal) */ --kendo-color-tertiary-subtle: #1a3333; --kendo-color-tertiary-subtle-hover: #224040; --kendo-color-tertiary-subtle-active: #2a4d4d; --kendo-color-tertiary: #1aadac; --kendo-color-tertiary-hover: #29c0bf; --kendo-color-tertiary-active: #0e8483; --kendo-color-tertiary-emphasis: #1aadac; --kendo-color-tertiary-on-subtle: #6dd4d3; --kendo-color-on-tertiary: #ffffff; --kendo-color-tertiary-on-surface: #29c0bf; /* Info */ --kendo-color-info-subtle: #1a2a40; --kendo-color-info-subtle-hover: #223552; --kendo-color-info-subtle-active: #2a4064; --kendo-color-info: #5798fa; --kendo-color-info-hover: #6da5fb; --kendo-color-info-active: #4684e6; --kendo-color-info-emphasis: #6da5fb; --kendo-color-info-on-subtle: #8fc0ff; --kendo-color-on-info: #ffffff; --kendo-color-info-on-surface: #6da5fb; /* Success */ --kendo-color-success-subtle: #1a3320; --kendo-color-success-subtle-hover: #224028; --kendo-color-success-subtle-active: #2a4d30; --kendo-color-success: #6ccb5f; --kendo-color-success-hover: #7dd872; --kendo-color-success-active: #56a84c; --kendo-color-success-emphasis: #56a84c; --kendo-color-success-on-subtle: #8fdf85; --kendo-color-on-success: #ffffff; --kendo-color-success-on-surface: #7dd872; /* Warning */ --kendo-color-warning-subtle: #3a3020; --kendo-color-warning-subtle-hover: #4a3d28; --kendo-color-warning-subtle-active: #5a4a30; --kendo-color-warning: #ffc80a; --kendo-color-warning-hover: #ffd033; --kendo-color-warning-active: #e0b000; --kendo-color-warning-emphasis: #bba06a; --kendo-color-warning-on-subtle: #e0d0a0; --kendo-color-on-warning: #1e1e1e; --kendo-color-warning-on-surface: #ffd033; /* Error */ --kendo-color-error-subtle: #3a2020; --kendo-color-error-subtle-hover: #4a2828; --kendo-color-error-subtle-active: #5a3030; --kendo-color-error: #e06060; --kendo-color-error-hover: #e87878; --kendo-color-error-active: #c84848; --kendo-color-error-emphasis: #e06060; --kendo-color-error-on-subtle: #f0a0a0; --kendo-color-on-error: #ffffff; --kendo-color-error-on-surface: #e87878; /* Light/Dark inverted */ --kendo-color-light-subtle: #2a2a2a; --kendo-color-light-subtle-hover: #333333; --kendo-color-light-subtle-active: #3a3a3a; --kendo-color-light: #444444; --kendo-color-light-hover: #505050; --kendo-color-light-active: #5a5a5a; --kendo-color-light-emphasis: #3a3a3a; --kendo-color-light-on-subtle: #e0e0e0; --kendo-color-on-light: #e0e0e0; --kendo-color-light-on-surface: #555555; --kendo-color-dark-subtle: #888888; --kendo-color-dark-subtle-hover: #999999; --kendo-color-dark-subtle-active: #aaaaaa; --kendo-color-dark: #e0e0e0; --kendo-color-dark-hover: #f0f0f0; --kendo-color-dark-active: #ffffff; --kendo-color-dark-emphasis: #bbbbbb; --kendo-color-dark-on-subtle: #f0f0f0; --kendo-color-on-dark: #1e1e1e; --kendo-color-dark-on-surface: #e0e0e0; /* Inverse */ --kendo-color-inverse-subtle: #888888; --kendo-color-inverse-subtle-hover: #999999; --kendo-color-inverse-subtle-active: #aaaaaa; --kendo-color-inverse: #e0e0e0; --kendo-color-inverse-hover: #f0f0f0; --kendo-color-inverse-active: #ffffff; --kendo-color-inverse-emphasis: #bbbbbb; --kendo-color-inverse-on-subtle: #f0f0f0; --kendo-color-on-inverse: #1e1e1e; --kendo-color-inverse-on-surface: #e0e0e0; /* Code blocks */ --kendo-code-bg: #2a2a2a; --kendo-code-text: #d4d4d4; --kendo-code-border: rgba(255, 255, 255, 0.1); /* Marketplace background */ --kendo-marketplace-bg: #181818; /* Chart series - slightly brighter for dark bg */ --kendo-color-series-a: #33bbdd; --kendo-color-series-b: #ff6b6b; --kendo-color-series-c: #ffd166; --kendo-color-series-d: #4da6ff; --kendo-color-series-e: #a78bfa; --kendo-color-series-f: #34d399; /* Chip colors - muted for dark mode */ --smlr-chip-products-background-colour: #2a3a24; --smlr-chip-capability-background-colour: #1f3040; --smlr-chip-practice-background-colour: #2d2a3f; --smlr-chip-tag-background-colour: #2a3a24; --smlr-chip-feature-background-colour: #1a2a40; /* Elevation shadows - stronger for dark backgrounds */ --kendo-elevation-1: 0 0.3px 0.9px rgba(0, 0, 0, 0.3), 0 1.6px 3.6px rgba(0, 0, 0, 0.35); --kendo-elevation-2: 0 0.6px 1.8px rgba(0, 0, 0, 0.3), 0 3.2px 7.2px rgba(0, 0, 0, 0.35); --kendo-elevation-3: 0 0.9px 2.7px rgba(0, 0, 0, 0.3), 0 4.8px 10.8px rgba(0, 0, 0, 0.35); --kendo-elevation-4: 0 1.2px 3.6px rgba(0, 0, 0, 0.3), 0 6.4px 14.4px rgba(0, 0, 0, 0.35); --kendo-elevation-5: 0 1.8px 5.4px rgba(0, 0, 0, 0.3), 0 9.6px 21.6px rgba(0, 0, 0, 0.35); /* Disabled state */ --kendo-disabled-text: rgba(224, 224, 224, 0.38); --kendo-disabled-bg: #333333; --kendo-disabled-border: transparent; /* ThemeBuilder overrides (tb-kendo-*) */ --tb-kendo-appbar-bg: #1e1e1e; --tb-kendo-marketplace-bg: #181818; --tb-kendo-color-app-surface: #1e1e1e; --tb-kendo-color-on-app-surface: #e0e0e0; --tb-kendo-color-subtle: #a0a0a0; --tb-kendo-color-surface: #2a2a2a; --tb-kendo-color-surface-alt: #252525; --tb-kendo-color-border: #444444; --tb-kendo-color-border-alt: #666666; --tb-kendo-color-base-subtle: #333333; --tb-kendo-color-base-subtle-hover: #3a3a3a; --tb-kendo-color-base-subtle-active: #424242; --tb-kendo-color-base: #2d2d2d; --tb-kendo-color-base-hover: #353535; --tb-kendo-color-base-active: #3d3d3d; --tb-kendo-color-base-emphasis: #999999; --tb-kendo-color-base-on-subtle: #e0e0e0; --tb-kendo-color-on-base: #e0e0e0; --tb-kendo-color-base-on-surface: #e0e0e0; --tb-kendo-color-primary-subtle: #2a3a24; --tb-kendo-color-primary-subtle-hover: #334a2c; --tb-kendo-color-primary-subtle-active: #3d5a35; --tb-kendo-color-primary: #6a9f50; --tb-kendo-color-primary-hover: #7db362; --tb-kendo-color-primary-active: #578840; --tb-kendo-color-primary-emphasis: #4a7236; --tb-kendo-color-primary-on-subtle: #a8d494; --tb-kendo-color-on-primary: #ffffff; --tb-kendo-color-primary-on-surface: #7db362; --tb-kendo-color-secondary-subtle: #2a2a2a; --tb-kendo-color-secondary-subtle-hover: #333333; --tb-kendo-color-secondary-subtle-active: #3a3a3a; --tb-kendo-color-secondary: #888888; --tb-kendo-color-secondary-hover: #999999; --tb-kendo-color-secondary-active: #777777; --tb-kendo-color-secondary-emphasis: #aaaaaa; --tb-kendo-color-secondary-on-subtle: #cccccc; --tb-kendo-color-on-secondary: #ffffff; --tb-kendo-color-secondary-on-surface: #aaaaaa; --tb-kendo-color-tertiary-subtle: #1a3333; --tb-kendo-color-tertiary-subtle-hover: #224040; --tb-kendo-color-tertiary-subtle-active: #2a4d4d; --tb-kendo-color-tertiary: #1aadac; --tb-kendo-color-tertiary-hover: #29c0bf; --tb-kendo-color-tertiary-active: #0e8483; --tb-kendo-color-tertiary-emphasis: #1aadac; --tb-kendo-color-tertiary-on-subtle: #6dd4d3; --tb-kendo-color-on-tertiary: #ffffff; --tb-kendo-color-tertiary-on-surface: #29c0bf; } /* Sidebar dark mode styling - use dedicated dark background image */ [data-theme="dark"] .Menu_menu { background-image: url(/MenuDark.jpg); background-size: cover; } /* Logo swap for dark mode */ .Menu_menu .Menu_automationCenterLogo.Menu_logo-dark { display: none; } [data-theme="dark"] .Menu_menu .Menu_automationCenterLogo.Menu_logo-light { display: none; } [data-theme="dark"] .Menu_menu .Menu_automationCenterLogo.Menu_logo-dark { display: flex; } [data-theme="dark"] .Menu_menu .Menu_menuItem { color: rgba(224, 224, 224, 0.85); } [data-theme="dark"] .Menu_menu .Menu_menuItem:hover { background-color: #deefc2; color: #000; cursor: pointer; } [data-theme="dark"] .Menu_menu .Menu_menuItem.Menu_active { background-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .Menu_menu .Menu_menuItem.Menu_active > span { color: #ffffff; font-weight: 500; } [data-theme="dark"] .Menu_menu .Menu_menuItem.Menu_active:hover { background-color: rgba(255, 255, 255, 0.12); color: #ffffff; } [data-theme="dark"] .Menu_menu .Menu_separator-line { background-color: var(--kendo-color-border-alt); } [data-theme="dark"] .Menu_menu .Menu_menuFooter .Menu_menuVersion { color: #888888; } [data-theme="dark"] .Menu_menu .Menu_legalLinks .Menu_separator { color: #666666; } [data-theme="dark"] .Menu_menu .Menu_legalLinks .Menu_link { color: #29c0bf; } [data-theme="dark"] .Menu_menu .Menu_searchBox .Menu_searchInput { background-color: #2a2a2a; border-color: #444444; } [data-theme="dark"] .Menu_menu .Menu_searchBox .Menu_searchInput:focus-within { border-color: #6a9f50; } /* Content area */ [data-theme="dark"] .content { background-color: #181818; } /* Scrollbar styling for dark mode */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1e1e1e; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #444444; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #555555; } /* Blazor error UI */ [data-theme="dark"] #blazor-error-ui { background: #3a3020; color: #e0d0a0; color-scheme: dark; } /* Theme toggle - styled as a menu item */ .theme-toggle-item { cursor: pointer; } /* Smooth transition when switching themes */ /* Heading colors for dark mode */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--kendo-color-on-app-surface); } /* General body/paragraph text for dark mode */ [data-theme="dark"] body { color: var(--kendo-color-on-app-surface); } /* Telerik Breadcrumb dark mode overrides */ [data-theme="dark"] .k-breadcrumb { color: var(--kendo-color-on-app-surface); } [data-theme="dark"] .k-breadcrumb .k-breadcrumb-link, [data-theme="dark"] .k-breadcrumb .k-breadcrumb-root-link { color: var(--kendo-color-on-app-surface); } [data-theme="dark"] .k-breadcrumb .k-breadcrumb-link:hover, [data-theme="dark"] .k-breadcrumb .k-breadcrumb-root-link:hover { color: var(--kendo-color-primary-hover); } [data-theme="dark"] .k-breadcrumb .k-breadcrumb-icontext-link, [data-theme="dark"] .k-breadcrumb .k-breadcrumb-item .k-icon, [data-theme="dark"] .k-breadcrumb .k-breadcrumb-delimiter-icon { color: var(--kendo-color-subtle); } [data-theme="dark"] .k-breadcrumb .k-breadcrumb-last-item .k-breadcrumb-link, [data-theme="dark"] .k-breadcrumb .k-breadcrumb-last-item { color: var(--kendo-color-subtle); } /* Editor pane dark mode overrides */ [data-theme="dark"] .editor-pane, [data-theme="dark"] .preview-pane, [data-theme="dark"] .editor-pane-full { background: var(--kendo-color-surface-alt); } [data-theme="dark"] .editor-textarea-native { background: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); } /* Avatar image background for dark mode */ [data-theme="dark"] .k-avatar { background-color: transparent; } [data-theme="dark"] .k-avatar img { border-radius: inherit; } /* Telerik Card dark mode overrides */ [data-theme="dark"] .k-card:not(.k-card-error):not(.k-card-warning):not(.k-card-success):not(.k-card-info) { background-color: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); border-color: var(--kendo-color-border); } [data-theme="dark"] .k-card-header { background-color: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); border-color: var(--kendo-color-border); } [data-theme="dark"] .k-card:not(.k-card-error):not(.k-card-warning):not(.k-card-success):not(.k-card-info) > .k-card-body { background-color: var(--kendo-color-surface-alt); color: var(--kendo-color-on-app-surface); } [data-theme="dark"] .k-card:not(.k-card-error):not(.k-card-warning):not(.k-card-success):not(.k-card-info) > .k-card-actions { background-color: var(--kendo-color-surface-alt); border-color: var(--kendo-color-border); } [data-theme="dark"] .k-card-separator { border-color: var(--kendo-color-border); } [data-theme="dark"] .k-card-title { color: var(--kendo-color-on-app-surface); } [data-theme="dark"] .k-card-subtitle { color: var(--kendo-color-subtle); } /* Themed card dark mode styles */ [data-theme="dark"] .k-card.k-card-error { background-color: var(--kendo-color-error-subtle); border-color: var(--kendo-color-error); color: var(--kendo-color-error-on-subtle); } [data-theme="dark"] .k-card.k-card-warning { background-color: var(--kendo-color-warning-subtle); border-color: var(--kendo-color-warning); color: var(--kendo-color-warning-on-subtle); } [data-theme="dark"] .k-card.k-card-success { background-color: var(--kendo-color-success-subtle); border-color: var(--kendo-color-success); color: var(--kendo-color-success-on-subtle); } [data-theme="dark"] .k-card.k-card-info { background-color: var(--kendo-color-info-subtle); border-color: var(--kendo-color-info); color: var(--kendo-color-info-on-subtle); } [data-theme="dark"] .k-card.k-card-error .k-card-body, [data-theme="dark"] .k-card.k-card-warning .k-card-body, [data-theme="dark"] .k-card.k-card-success .k-card-body, [data-theme="dark"] .k-card.k-card-info .k-card-body { background-color: transparent; color: inherit; } [data-theme="dark"] .k-card.k-card-error .k-card-actions, [data-theme="dark"] .k-card.k-card-warning .k-card-actions, [data-theme="dark"] .k-card.k-card-success .k-card-actions, [data-theme="dark"] .k-card.k-card-info .k-card-actions { background-color: transparent; border-color: inherit; } [data-theme="dark"] .k-card.k-card-error .k-card-title, [data-theme="dark"] .k-card.k-card-warning .k-card-title, [data-theme="dark"] .k-card.k-card-success .k-card-title, [data-theme="dark"] .k-card.k-card-info .k-card-title { color: inherit; } [data-theme="dark"] a { color: var(--kendo-color-tertiary); } [data-theme="dark"] a:hover { color: var(--kendo-color-tertiary-hover); } [data-theme="dark"] a:visited { color: var(--kendo-color-tertiary); }