hyper-tuner/hyper-tuner-cloud

View on GitHub
src/css/themes/dark.less

Summary

Maintainability
Test Coverage
// darker
@text: #CECECE;
@main: #191C1E;
@main-dark: #2a2a2a;
@main-light: #252525;
@main-darkest: #171717;

// lighter
// @main: #272c30;
// @main-dark: #212527;
// @main-light: #394046;

@text-dark: #222;
@text-disabled: #999;

// First
// @primary-color: #26547C;
@info: #FFD166;
@success: #06D6A0;
@error: #EF476F;
@warn: #E55934;

// Second
// @primary-color: #004E64;
// @info: #F2C14E;
// @success: #499F68;
// @error: #DA2C38;
// @warn: #ED5A31;

// new ant
@primary-1: @primary-color;

@processing-color: @info;
@info-color: @info;
@success-color: @success;
@error-color: @error;
@highlight-color: @error;
@warning-color: @warn;
@text-color: @text;
@text-color-dark: @text-dark;
@disabled-color: @text-disabled;
@text-color-secondary: @text-disabled;
@heading-color: @text-light;
@heading-color-dark: @text-dark;
@link-color: lighten(@primary-color, 10%);

@body-background: @main;
@component-background: @main-light;
@item-active-bg: @primary-color;
@item-hover-bg: @primary-color;
@menu-highlight-color: @text;
@table-row-hover-bg: darken(@primary-color, 10%);

@descriptions-bg: @main-light;
@menu-bg: @main;

@border-color-base: @main-dark;
@border-color-split: lighten(@main-light, 2%);
@background-color-light: @main-light;
@background-color-base: @main-light;

@checkbox-check-color: @main-light;
@layout-body-background: @main;

// Alert
@alert-success-border-color: @success;
@alert-success-bg-color: darken(@success, 20%);
@alert-success-icon-color: @success;

@alert-info-border-color: @info;
@alert-info-bg-color: darken(@info, 30%);
@alert-info-icon-color: @info;

@alert-warning-border-color: @warn;
@alert-warning-bg-color: darken(@warn, 20%);
@alert-warning-icon-color: @warn;

@alert-error-border-color: @error;
@alert-error-bg-color: darken(@error, 20%);
@alert-error-icon-color: @error;

// Divider
@divider-color: @border-color-split;

// Header
@layout-header-background: @main;

// Side
@layout-sider-background: @main;
@layout-trigger-background: @component-background;
@layout-trigger-color: @text-color;

// Tooltip
@tooltip-bg: @main-light;
@zindex-tooltip: 1;

// Modal
@modal-header-bg: @main;
@modal-content-bg: @main;

// Radio buttons
@radio-solid-checked-color: @white;

html {
  color-scheme: dark;
}

// Scrollbar
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: @main;
}

::-webkit-scrollbar-thumb {
  background: lighten(@main-light, 15%);
  border-radius: @border-radius-base;

  &:hover {
    background: @text-disabled;
  }
}