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

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

// Colors
$icon-color: black !default;
$alt-icon-color: white !default;
$foreground-color: #222 !default;
$secondary-foreground-color: rgba(white, $secondary-foreground-color-opacity) !default;
$disabled-foreground-color: rgba(#222, $disabled-foreground-color-opacity) !default;
$menu-option-active-color: #c7c7c7 !default;

$card-background-color: #f6f6f6 !default;
$border-color: #9bc2e6 !default;
$primary-color: $icon-color !default;
$accent-color: $icon-color !default;

$background-color: white !default;
$odd-row-background-color: #deebf7 !default;

$editor-background-color: #f6f6f6 !default;

$header-background-color: #5e9cd3 !default;
$header-background-image: none !default;
$panel-background-color: #f6f6f6 !default;

$tool-panel-background-color: #f6f6f6 !default;

$chip-background-color: #ddebf7 !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: darkgreen !default;

$tab-background-color: #5e9cd3;

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

$ag-range-selected-color-1: rgba(120, 120, 120, 0.4) !default;
$ag-range-selected-color-2: rgba(80, 80, 80, 0.4) !default;
$ag-range-selected-color-3: rgba(40, 40, 40, 0.4) !default;
$ag-range-selected-color-4: rgba(0, 0, 0, 0.4) !default;

// delta changes
$value-change-delta-up-color: darkgreen !default;
$value-change-delta-down-color: darkred !default;
$value-change-value-highlight-background-color: #cec !default;

$row-floating-background-color: #f0f0f0 !default;
$row-stub-background-color: #f0f0f0 !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-blue {
    @include ag-theme-classic($params);

    $inverted-icons: asc, desc, expanded, contracted, menu, filter;

    .ag-header {
        @each $icon in $inverted-icons {
            .ag-icon-#{$icon} {
                @include colorful-icon($icons-path, '#{$icon}', white, white);
                display: inline-block;
            }
        }
    }

    $tab-icons: menu, filter, columns;

    @each $icon in $tab-icons {
        .ag-tab-header .ag-tab:not(.ag-tab-selected) .ag-icon-#{$icon} {
            @include colorful-icon($icons-path, '#{$icon}', white, white);
        }
    }

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

    .ag-row {
        border-bottom-width: 1px;
        border-bottom-style: dotted;
    }

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