@eclipse-scout/core/src/style/colors-dark.less

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
/* -------------------------------- */
/* Color palette                    */
/* -------------------------------- */

/* These are new gray colors used only in dark theme */
@palette-gray-0: @palette-white;
@palette-gray-1: #F5F5F5;
@palette-gray-2: #E9EBEB;
@palette-gray-3: #BFC2C3;
@palette-gray-4: #A7ACAD;
@palette-gray-5: #7E8588;
@palette-gray-5-1: #4B595E;
@palette-gray-6: #3B494F;
@palette-gray-6-1: #2E3C41;
@palette-gray-7: #2C363A;
@palette-gray-8: #252F34;
@palette-gray-9: #1F2428;
@palette-gray-10: #0E1316;

@fade-white-0: fade(@palette-white, 25%);
@fade-white-1: fade(@palette-white, 18%);
@fade-white-2: fade(@palette-white, 12%);

/* These are slightly darker variants of the original colors since the original ones would be too shiny when used as background in dark mode */
@palette-red-0: #ffd5d5;
@palette-red-1: #fdb8b8;
@palette-red-2: #FF8888;

@palette-green-0: #c2eee5;
@palette-green-1: #9ee8da;
@palette-green-2: #62e7ce;

@palette-orange-0: #fcdec2;
@palette-orange-1: #ffd197;
@palette-orange-2: #FFBE6B;

@palette-blue-0: #b9d2ea;
@palette-blue-1: #97c3ec;
@palette-blue-2: #71b0e8;

@accent-color-0: lighten(@accent-color-3, 20%);
@accent-color-1: lighten(@accent-color-3, 15%);
@accent-color-2: lighten(@accent-color-3, 10%);
@accent-color-3: @palette-blue-2;
@accent-color-4: @palette-blue-4;
@accent-color-5: @palette-blue-5;

/* -------------------------------- */
/* Global colors                    */
/* -------------------------------- */

@active-background-color: @fade-white-1;
@active-solid-background-color: lighten(@hover-solid-background-color, 5%);
@application-loading-background-color: @body-background-color;
@application-loading01-color: @accent-color-3;
@application-loading02-color: @palette-green-2;
@background-color: @palette-gray-8;
@body-background-color: @palette-gray-10;
@border-color: @fade-white-2;
@compact-outline-menu-item-disabled-color: lighten(@outline-selection-color, 40%);
@control-disabled-background-color: inherit;
@control-disabled-color: @disabled-color;
@control-border-color: @fade-white-0;
@disabled-color: @palette-gray-5;
@error-color: @palette-red-2;
@warning-color: @palette-orange-2;
@ok-color: @palette-green-2;
@error-background-color: @background-color;
@error-default-button-background-hover-color: lighten(@error-color, 6%);
@error-default-button-background-active-color: lighten(@error-color, 10%);
@error-focus-box-shadow-color: mix(@error-color, @palette-black, 50%);
@warning-default-button-background-hover-color: lighten(@warning-color, 8%);
@warning-default-button-background-active-color: lighten(@warning-color, 12%);
@warning-focus-box-shadow-color: mix(@warning-color, @palette-black, 50%);
@ok-default-button-background-hover-color: lighten(@ok-color, 8%);
@ok-default-button-background-active-color: lighten(@ok-color, 14%);
@ok-focus-box-shadow-color: mix(@ok-color, @palette-black, 50%);
@focus-border-color: @focus-color;
@focus-box-shadow-color: darken(@focus-color, 30%);
@focus-box-shadow-border-color: lighten(@focus-box-shadow-color, 20%);
@hover-color: @active-color;
@hover-background-color: @fade-white-2;
@hover-solid-background-color: @palette-gray-6;
@highlight-inverted-background-color: @palette-orange-5;
@icon-light-color: @palette-gray-5;
@icon-light-hover-color: @palette-gray-3;
@icon-inverted-color: @palette-gray-10;
@item-active-background-color: @item-selection-background-color;
@item-selection-background-color: fade(@accent-color-3, 9%);
@item-selection-nonfocus-background-color: @item-selection-background-color;
@item-selection-nonfocus-border-color: @border-color;
@label-color: @palette-gray-4;
@label-disabled-color: @disabled-color;
@link-active-color: lighten(@link-color, 15%);
@panel-background-color: @palette-gray-9;
@popup-background-color: @palette-gray-6-1;
@popup-backdrop-background-color: fade(@popup-background-color, 75%);
@popup-backdrop-filter: blur(30px);
@popup-2-background-color: @palette-gray-6;
@popup-2-backdrop-background-color: fade(@popup-2-background-color, 80%);
@popup-2-backdrop-filter: blur(15px);
@selected-hover-background-color: lighten(@selected-background-color, 8%);
@selected-active-background-color: lighten(@selected-background-color, 12%);
@selected-disabled-background-color: @palette-gray-5;
@text-color: @palette-gray-2;
@text-color-1: @palette-gray-3;
@text-color-2: @palette-gray-4;
@text-color-3: @palette-gray-5;
@text-inverted-color: @palette-gray-10;
@text-disabled-color: @disabled-color;
@text-field-alternative-disabled-border-color: @control-disabled-border-color;
@text-field-icon-color: @icon-light-color;
@text-field-placeholder-color: @palette-gray-5;
@text-selection-disabled-background-color: @selected-disabled-background-color;
@text-selection-disabled-color: @selected-color;

/* -------------------------------- */
/* Component specific colors        */
/* -------------------------------- */

@calendar-mode-selected-background-color: @border-color;
@calendar-mode-selected-color: @text-color;
@calendar-out-color: @palette-gray-4;
@calendar-week-axis-color: @palette-gray-4;
@calendar-weekend-color: @accent-color-3;
@carousel-status-item-color: @palette-gray-4;
@carousel-status-item-hover-color: @palette-gray-2;
@carousel-current-item-color: @palette-gray-1;
@check-box-border-color: @palette-gray-5;
@mode-color: @text-color;
@mode-alternative-background-color: fade(@palette-black, 60%);
@mode-alternative-selected-background-color: @palette-gray-7;
@mode-alternative-selected-background-disabled-color: @palette-gray-8;
@mode-alternative-hover-background-color: @palette-gray-9;
@mode-alternative-active-background-color: @palette-gray-6;
@closer-action-color: @text-color;
@closer-color: @palette-gray-3;
@closer-hover-color: @text-color;
@collapse-handle-border-color: @control-border-color;
@collapse-handle-color: @check-box-border-color;
@column-background-effect-gradient1-start-background-color: mix(@palette-red-4, @background-color, 30%);
@column-background-effect-gradient1-end-background-color: mix(@palette-green-4, @background-color, 30%);
@column-background-effect-gradient2-start-background-color: mix(@palette-green-4, @background-color, 30%);
@column-background-effect-gradient2-end-background-color: mix(@palette-red-4, @background-color, 30%);
@column-background-effect-bar-chart-background-color: fade(@palette-blue-3, 40%);
@context-menu-item-icon-color: @palette-gray-4;
@cell-editor-background-color: transparent;
@date-picker-day-disabled-color: @disabled-color;
@date-picker-out-color: @calendar-out-color;
@date-picker-arrow-color: @palette-gray-4;
@date-picker-separator-color: @palette-gray-4;
@date-picker-day-preselected-background-color: fade(@palette-white, 8%);
@dashboard-tile-border-color: @border-color;
@dashboard-tile-default-inverted-selected-border-color: @item-selection-border-color;
@dashboard-tile-alternative-selected-border-color: @dashboard-tile-default-selected-border-color;
@dashboard-tile-alternative-inverted-selected-border-color: @item-selection-border-color;
@desktop-bench-drop-shadow-color: fade(@palette-black, 35%);
@desktop-header-background-color: @palette-gray-10;
@desktop-header-border-color: @palette-gray-8;
@desktop-header-color: @title-color;
@desktop-logo-background-color: transparent;
@desktop-tab-border-color: @border-color;
@desktop-tab-closer-hover-background-color: @hover-background-color;
@desktop-tab-closer-active-background-color: @active-background-color;
@desktop-tab-status-color: @save-needer-color;
@desktop-tab-selected-save-needer-color: @save-needer-color;
@desktop-navigation-body-in-background-background-color: @palette-gray-9;
@desktop-navigation-color: @text-color;
@desktop-navigation-handle-background-color: @desktop-navigation-body-background-color;
@default-combo-menu-separator-color: @text-inverted-color;
@dimmed-background-color: @palette-gray-9;
@group-header-color: @text-color-2;
@notification-alternative-ok-background-color: fade(@palette-green-5, 40%);
@notification-alternative-info-background-color: fade(@accent-color-3, 20%);
@notification-alternative-warning-background-color: fade(@palette-orange-5, 40%);
@notification-alternative-error-background-color: fade(@palette-red-5, 50%);
@notification-alternative-ok-color: @ok-color;
@notification-alternative-warning-color: @warning-color;
@notification-alternative-error-color: lighten(@error-color, 5%);
@outline-group-background-color: @palette-gray-6-1;
@outline-in-background-group-background-color: @palette-gray-7;
@outline-node-selected-icon-color: @palette-gray-6-1;
@outline-breadcrumb-border-color: @palette-gray-6; // Needs to be a solid color for compact mode to make selection background not shine through
@planner-activity-color: @text-inverted-color;
@planner-large-scale-item-line-color: fade(@palette-white, 20%);
@planner-resource-title-color: @text-color;
@planner-small-scale-item-line-color: fade(@palette-white, 7%);
@scroll-shadow-alpha: 0;
@scrollbar-thumb-main-color: @palette-white;
@scrollbar-thumb-color: fade(@scrollbar-thumb-main-color, 20%);
@scrollbar-thumb-hover-color: fade(@scrollbar-thumb-main-color, 30%);
@scrollbar-thumb-inverted-main-color: @palette-gray-6;
@scrollbar-thumb-inverted-color: fade(@scrollbar-thumb-inverted-main-color, 30%);
@scrollbar-thumb-inverted-hover-color: fade(@scrollbar-thumb-inverted-main-color, 45%);
@scroll-shadow-alpha: 70%;
@selected-color: @palette-gray-10;
@slider-track-background-color: @palette-gray-4;
@slider-track-disabled-background-color: @palette-gray-5-1;
@slider-track-color: @palette-blue-2;
@slider-track-disabled-color: @palette-gray-5;
@slider-thumb-active-color: @palette-gray-2;
@slider-thumb-active-border-color: @palette-gray-5;
@slider-thumb-disabled-color: @palette-gray-4;
@slider-thumb-disabled-border-color: @palette-gray-5-1;
@status-menu-color: @text-color-1;
@status-info-color: @text-color-2;
@status-info-hover-color: @text-color-1;
@status-ok-hover-color: lighten(@status-ok-color, 10%);
@status-warning-hover-color: lighten(@status-warning-color, 10%);
@status-error-hover-color: lighten(@status-error-color, 10%);
@switch-background-color: fade(@palette-black, 50%);
@switch-border-color: @check-box-border-color;
@switch-disabled-border-color: @switch-border-color;
@switch-handle-disabled-background-color: @palette-gray-2;
@switch-handle-disabled-border-color: @switch-border-color;
@switch-style-default-handle-activated-background-color: @palette-gray-9;
@switch-style-slider-background-color: @palette-gray-4;
@switch-style-slider-disabled-background-color: @palette-gray-5-1;
@tab-item-marked-border-color: @palette-gray-5;
@table-header-item-state-color: @text-color;
@table-header-item-color: @palette-gray-4;
@table-header-menu-filter-number-column-color: @text-color-2;
@table-header-resize-color: @palette-gray-5;
@table-header-resize-hover-color: @palette-gray-1;
@table-info-hover-color: @hover-color;
@table-info-warning-color: @status-warning-color;
@table-info-warning-hover-color: @status-warning-hover-color;
@table-row-border-color: @border-color;
@tile-alternative-inverted-background-color: @tile-default-inverted-background-color;
@tile-alternative-inverted-selection-background-color: @tile-default-inverted-selection-background-color;
@tile-alternative-inverted-link-active-color: @link-active-color;
@tile-alternative-inverted-link-hover-color: @link-hover-color;
@tile-background-color: @background-color;
@tile-button-default-hover-background-color: @hover-background-color;
@tile-button-default-active-background-color: @active-background-color;
@tile-button-default-icon-color: @palette-gray-4;
@tile-button-default-inverted-color: @link-color;
@tile-button-default-inverted-icon-color: @tile-button-default-icon-color;
@tile-button-default-inverted-hover-background-color: @tile-button-default-hover-background-color;
@tile-button-default-inverted-active-background-color: @tile-button-default-active-background-color;
@tile-button-alternative-inverted-hover-background-color: @tile-button-default-inverted-hover-background-color;
@tile-button-alternative-inverted-active-background-color: @tile-button-default-inverted-active-background-color;
@tile-default-background-color: @tile-background-color;
@tile-default-border-color: @border-color;
@tile-default-color: @text-color-1;
@tile-default-inverted-color: @tile-default-color;
@tile-default-inverted-background-color: @tile-default-background-color;
@tile-default-inverted-selection-background-color: @tile-default-inverted-background-color;
@tile-default-inverted-link-active-color: @link-active-color;
@tile-default-inverted-link-hover-color: @link-hover-color;
@tile-default-inverted-status-hover-background-color: @hover-background-color;
@tile-default-inverted-status-active-background-color: @active-background-color;
@tile-default-inverted-error-status-color: @status-error-color;
@tile-default-inverted-error-status-hover-color: @status-error-hover-color;
@tile-default-label-color: @text-color-1;
@tile-default-link-active-color: @link-active-color;
@tile-table-default-inverted-selection-background-color: @item-selection-background-color;
@tile-table-default-inverted-selection-border-color: @item-selection-border-color;
@tile-table-default-inverted-selection-border-color: @item-selection-border-color;
@tile-table-alternative-inverted-selection-background-color: @tile-table-default-inverted-selection-background-color;
@tile-table-default-color: @tile-default-color;
@tile-placeholder-background-color: @fade-white-2;
@tile-scrollbar-thumb-inverted-main-color: @palette-white;
@tooltip-info-background-color: @palette-gray-6;
@tooltip-info-color: @text-color-1;
@tooltip-menu-color: @text-color;
@year-panel-range-background-color: fade(@selected-background-color, 20%);
@year-panel-weekend-background-color: @palette-white;
@view-menu-tile-background-color: @palette-gray-8;
@view-tab-hover-background-color: @hover-background-color;
@wizard-step-finished-color: @palette-green-5;