ag-grid/src/styles/ag-theme-dark.scss

@import './ag-theme-classic-common';
@import './ag-theme-classic-vars';

// Colors
$icon-color: #d6d5d5 !default;
$alt-icon-color: black !default;
$foreground-color: #ccc !default;
$secondary-foreground-color: rgba(#ccc, $secondary-foreground-color-opacity) !default;
$disabled-foreground-color: rgba(#e4e4e4, $disabled-foreground-color-opacity) !default;
$menu-option-active-color: #4a708b !default;

$card-background-color: #302e2e !default;
$border-color: darkgrey !default;
$primary-color: $icon-color !default;
$accent-color: $icon-color !default;

$background-color: #302e2e !default;
$odd-row-background-color: #403e3e !default;

$editor-background-color: #302e2e !default;

$header-background-color: #626262 !default;
$header-background-image: none !default;
$panel-background-color: #302e2e !default;

$tool-panel-background-color: #302e2e !default;

$chip-background-color: rgb(64, 62, 62) !default;

$range-selection-background-color: rgba(100, 160, 160, 0.4) !default;
$range-selection-highlight-color: rgba(255, 255, 255, 0.4) !default;

$hover-color: inherit !default;

$selected-color: $menu-option-active-color !default;

$cell-data-changed-color: white !default;

$focused-cell-border-color: darkgrey !default;

$tab-background-color: #626262;

$cell-highlight-border: 2px solid lightgreen !default;
$cell-horizontal-border: 1px dotted grey !default;

$rect-selection-background-color: rgb(100, 160, 160) !default;

$ag-range-selected-color-1: transparentize($rect-selection-background-color, 0.6) !default;
$ag-range-selected-color-2: transparentize($rect-selection-background-color, 0.4) !default;
$ag-range-selected-color-3: transparentize($rect-selection-background-color, 0.3) !default;
$ag-range-selected-color-4: transparentize($rect-selection-background-color, 0.2) !default;

$row-floating-background-color: #333 !default;
$row-stub-background-color: #333 !default;

// delta changes
$value-change-delta-up-color: greenyellow !default;
$value-change-delta-down-color: red !default;
$value-change-value-highlight-background-color: chocolate !default;

$params: (
    grid-size: $grid-size,
    icon-size: $icon-size,
    header-icon-size: $header-icon-size,
    row-height: $row-height,
    header-height: $header-height,
    virtual-item-height: $virtual-item-height,
    rich-select-item-height: $row-height,
    cell-horizontal-padding: $cell-horizontal-padding,
    toolpanel-indent-size: $toolpanel-indent-size,
    row-group-indent-size: $row-group-indent-size,
    icons-path: $icons-path,
    font-family: $font-family,
    font-size: $font-size,
    font-weight: $font-weight,
    secondary-font-family: $secondary-font-family,
    secondary-font-size: $secondary-font-size,
    secondary-font-weight: $secondary-font-weight,
    foreground-color: $foreground-color,
    foreground-opacity: $foreground-opacity,
    secondary-foreground-color-opacity: $secondary-foreground-color-opacity,
    secondary-foreground-color: $secondary-foreground-color,
    disabled-foreground-color-opacity: $disabled-foreground-color-opacity,
    disabled-foreground-color: $disabled-foreground-color,
    background-color: $background-color,
    tab-background-color: $tab-background-color,
    odd-row-background-color: $odd-row-background-color,
    header-cell-moving-background-color: $header-cell-moving-background-color,
    icon-color: $icon-color,
    alt-icon-color: $alt-icon-color,
    border-color: $border-color,
    button-background-color: transparent,
    cell-data-changed-color: $cell-data-changed-color,
    chip-background-color: $chip-background-color,
    editor-background-color: $editor-background-color,
    range-selection-background-color: $range-selection-background-color,
    range-selection-highlight-color: $range-selection-highlight-color,
    header-background-color: $header-background-color,
    header-background-image: $header-background-image,
    panel-background-color: $panel-background-color,
    tool-panel-background-color: $tool-panel-background-color,
    card-background-color: $card-background-color,
    accent-color: $accent-color,
    primary-color: $primary-color,
    hover-color: $hover-color,
    selected-color: $selected-color,
    icon-opacity: $foreground-opacity,
    button-text-transform: uppercase,
    card-radius: $card-radius,
    card-shadow: $card-shadow,
    input-height: $grid-size * 4,
    focused-cell-border-color: $focused-cell-border-color,
    menu-option-active-color: $menu-option-active-color,
    ag-range-selected-color-1: $ag-range-selected-color-1,
    ag-range-selected-color-2: $ag-range-selected-color-2,
    ag-range-selected-color-3: $ag-range-selected-color-3,
    ag-range-selected-color-4: $ag-range-selected-color-4,
    cell-highlight-border: $cell-highlight-border,
    cell-horizontal-border: $cell-horizontal-border,
    value-change-delta-up-color: $value-change-delta-up-color,
    value-change-delta-down-color: $value-change-delta-down-color,
    value-change-value-highlight-background-color: $value-change-value-highlight-background-color,
    row-floating-background-color: $row-floating-background-color,
    row-stub-background-color: $row-stub-background-color,
);

.ag-theme-dark {
    @include ag-theme-classic($params);

    input,
    select {
        background-color: $card-background-color;
        color: $foreground-color;
    }

    .ag-floating-filter-body input[readonly] {
        background: rgba(48, 46, 46, 0.3);
    }
}