grafana/public/sass/_variables.dark.scss

// Global values
// --------------------------------------------------

$theme-name: dark;

// Grays
// -------------------------
$black:                 #000;

// -------------------------
$black:            #000;
$dark-1:           #141414;
$dark-2:           #1f1f20;
$dark-3:           #262628;
$dark-4:           #333333;
$dark-5:           #444444;
$gray-1:           #555555;
$gray-2:           #8e8e8e;
$gray-3:           #b3b3b3;
$gray-4:           #D8D9DA;
$gray-5:           #ECECEC;
$gray-6:           #f4f5f8;
$gray-7:           #fbfbfb;

$gray-blue:        #212327;
$input-black:      #09090B;

$white:            #fff;

// Accent colors
// -------------------------
$blue:                  #33B5E5;
$blue-dark:             #005f81;
$green:                 #299c46;
$red:                   #d44a3a;
$yellow:                #ECBB13;
$pink:                  #FF4444;
$purple:                #9933CC;
$variable:              #32D1DF;
$orange:                #eb7b18;

$brand-primary:         $orange;
$brand-success:         $green;
$brand-warning:         $brand-primary;
$brand-danger:          $red;

// Status colors
// -------------------------
$online:                #10a345;
$warn:                  #F79520;
$critical:              #ed2e18;

// Scaffolding
// -------------------------
$body-bg:  			   	    rgb(23,24,25);
$page-bg:  			   	    rgb(22, 23, 25);

$body-color:   		 	    $gray-4;
$text-color:   	   		  $gray-4;
$text-color-strong: 	  $white;
$text-color-weak: 		  $gray-2;
$text-color-faint:      $dark-5;
$text-color-emphasis: 	$gray-5;

$text-shadow-strong: 1px 1px 4px $black;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);

// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);

// Links
// -------------------------
$link-color:              darken($white, 11%);
$link-color-disabled:     darken($link-color, 30%);
$link-hover-color:        $white;
$external-link-color:     $blue;

// Typography
// -------------------------
$headings-color:       darken($white,11%);
$abbr-border-color: 	 $gray-3 !default;
$text-muted: 			     $text-color-weak;

$blockquote-small-color:  $gray-3 !default;
$blockquote-border-color: $gray-4 !default;

$hr-border-color: rgba(0,0,0,.1) !default;

// Components
$component-active-color: #fff !default;
$component-active-bg:    $brand-primary !default;

// Panel
// -------------------------
$panel-bg: 				      #212124;
$panel-border-color:    $dark-1;
$panel-border:          solid 1px $panel-border-color;
$panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
$panel-header-hover-bg:       $dark-4;
$panel-header-menu-hover-bg:  $dark-5;
$panel-edit-shadow: 0 -30px 30px -30px $black;

// page header
$page-header-bg: linear-gradient(90deg, #292a2d, black);
$page-header-shadow: inset 0px -4px 14px $dark-2;
$page-header-border-color: $dark-4;

$divider-border-color:        #555;

// Graphite Target Editor
$tight-form-bg:     	$dark-3;

$tight-form-func-bg: 		    #333334;
$tight-form-func-highlight-bg:  #444445;

$modal-backdrop-bg: #353c42	;
$code-tag-bg:       $gray-1;
$code-tag-border:   lighten($code-tag-bg, 2%);

// cards
$card-background: linear-gradient(135deg, #2f2f32, #262628);
$card-background-hover: linear-gradient(135deg, #343436, #262628);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);

// Lists
$list-item-bg:         $card-background;
$list-item-hover-bg:   lighten($gray-blue, 2%);
$list-item-link-color: $text-color;
$list-item-shadow:     $card-shadow;

// Scrollbars
$scrollbarBackground: #404357;
$scrollbarBackground2: #3a3a3a;

$scrollbarBorder: black;

// Tables
// -------------------------
$table-bg:                    transparent; // overall background-color
$table-bg-accent:             $dark-3; // for striping
$table-bg-hover:              $dark-4; // for hover
$table-border:                $dark-3; // table and cell border

$table-bg-odd:               $dark-2;

// Buttons
// -------------------------

$btn-primary-bg:              #ff6600;
$btn-primary-bg-hl:           #bc3e06;

$btn-secondary-bg:            $blue-dark;
$btn-secondary-bg-hl:     		lighten($blue-dark, 5%);

$btn-success-bg:              $green;
$btn-success-bg-hl:     	    darken($green, 6%);

$btn-warning-bg:              $brand-warning;
$btn-warning-bg-hl:     	    lighten($brand-warning, 8%);

$btn-danger-bg:               $red;
$btn-danger-bg-hl:            darken($red, 8%);

$btn-inverse-bg:              $dark-3;
$btn-inverse-bg-hl:     	    lighten($dark-3, 4%);
$btn-inverse-text-color:      $link-color;
$btn-inverse-text-shadow:     0px 1px 0 rgba(0,0,0,.1);

$btn-link-color:              $gray-3;

$iconContainerBackground:	    $black;

$btn-divider-left:   $dark-4;
$btn-divider-right:  $dark-2;

$btn-drag-image: '../img/grab_dark.svg';

// Forms
// -------------------------
$input-bg:                       $input-black;
$input-bg-disabled:              $dark-3;

$input-color:                    $gray-4;
$input-border-color:             $dark-3;
$input-box-shadow:               inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10);
$input-border-focus:             $input-border-color !default;
$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
$input-color-placeholder:        $gray-1 !default;
$input-label-bg:				         $gray-blue;
$input-label-border-color:       $dark-3;
$input-invalid-border-color:     lighten($red, 5%);

// Search
$search-shadow: 0 0 30px 0 $black;
$search-filter-box-bg: $gray-blue;

// Dropdowns
// -------------------------
$dropdownBackground:            $dark-3;
$dropdownBorder:                rgba(0,0,0,.2);
$dropdownDividerTop:            transparent;
$dropdownDividerBottom:         #444;
$dropdownDivider:               $dropdownDividerBottom;
$dropdownTitle:                 $link-color-disabled;

$dropdownLinkColor:             $text-color;
$dropdownLinkColorHover:        $white;
$dropdownLinkColorActive:       $white;

$dropdownLinkBackgroundActive:  $dark-4;
$dropdownLinkBackgroundHover:   $dark-4;

$dropdown-link-color: $gray-3;

// COMPONENT VARIABLES
// --------------------------------------------------

// -------------------------
$placeholderText:         darken($text-color, 25%);


// Horizontal forms & lists
// -------------------------
$horizontalComponentOffset:       180px;


// Wells
// -------------------------
$wellBackground:                  #131517;

$navbarHeight:                    55px;
$navbarBackgroundHighlight:       $dark-3;
$navbarBackground:                $panel-bg;
$navbarBorder:                    1px solid $dark-3;
$navbarShadow:                    0 0 20px black;

$navbarText:                      $gray-4;
$navbarLinkColor:                 $gray-4;
$navbarLinkColorHover:            $white;
$navbarLinkColorActive:           $navbarLinkColorHover;
$navbarLinkBackgroundHover:       transparent;
$navbarLinkBackgroundActive:      $navbarBackground;
$navbarBrandColor:                $link-color;
$navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;

$navbarButtonBackground:          $navbarBackground;
$navbarButtonBackgroundHighlight: $body-bg;

$navbar-button-border:             #151515;

// Sidemenu
// -------------------------
$side-menu-bg:            $black;
$side-menu-item-hover-bg: $dark-2;
$side-menu-shadow:        0 0 20px black;
$side-menu-link-color:    $link-color;
$breadcrumb-hover-hl:   #111;

// Menu dropdowns
// -------------------------
$menu-dropdown-bg:            $body-bg;
$menu-dropdown-hover-bg:      $dark-2;
$menu-dropdown-border-color:  $dark-3;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;

// Breadcrumb
// -------------------------
$page-nav-bg: $black;
$page-nav-shadow: 5px 5px 20px -5px $black;
$page-nav-breadcrumb-color: $gray-3;

// Tabs
// -------------------------
$tab-border-color:          $dark-4;

// Pagination
// -------------------------
$paginationBackground:                $body-bg;
$paginationBorder:                    transparent;
$paginationActiveBackground:          $blue;

// Form states and alerts
// -------------------------
$warning-text-color:      $warn;
$error-text-color:        #E84D4D;
$success-text-color:      #12D95A;
$info-text-color:         $blue-dark;

$alert-error-bg:          linear-gradient(90deg, #d44939, #e0603d);
$alert-success-bg:        linear-gradient(90deg, #3aa655, #47b274);
$alert-warning-bg:        linear-gradient(90deg, #d44939, #e0603d);
$alert-info-bg:           linear-gradient(100deg, #1a4552, #00374a);

// popover
$popover-bg:              $page-bg;
$popover-color:           $text-color;
$popover-border-color:    $dark-4;
$popover-shadow:          0 0 20px black;

$popover-help-bg:         $btn-secondary-bg;
$popover-help-color:      $text-color;

$popover-error-bg:        $btn-danger-bg;

// Tooltips and popovers
// -------------------------
$tooltipColor:            $popover-help-color;
$tooltipBackground:       $popover-help-bg;
$tooltipArrowWidth:       5px;
$tooltipArrowColor:       $tooltipBackground;
$tooltipLinkColor:        $link-color;
$graph-tooltip-bg:        $dark-1;

// images
$checkboxImageUrl: '../img/checkbox.png';

// info box
$info-box-background: linear-gradient(100deg, #1a4552, #00374a);

// footer
$footer-link-color:   $gray-2;
$footer-link-hover:   $gray-4;

// collapse box
$collapse-box-body-border: $dark-5;
$collapse-box-body-error-border: $red;

// json-explorer
$json-explorer-default-color: $text-color;
$json-explorer-string-color: #23d662;
$json-explorer-number-color: $variable;
$json-explorer-boolean-color: $variable;
$json-explorer-null-color: #EEC97D;
$json-explorer-undefined-color: rgb(239, 143, 190);
$json-explorer-function-color: #FD48CB;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-toggler-color: #45376F;
$json-explorer-bracket-color: #9494FF;
$json-explorer-key-color: #23A0DB;
$json-explorer-url-color: #027BFF;

// Changelog and diff
// -------------------------
$diff-label-bg:         $dark-2;
$diff-label-fg:         $white;

$diff-group-bg:         $dark-4;
$diff-arrow-color:      $white;

$diff-json-bg:          $dark-4;
$diff-json-fg:          $gray-5;

$diff-json-added:       #457740;
$diff-json-deleted:     #a04338;

$diff-json-old:         #a04338;
$diff-json-new:         #457740;

$diff-json-changed-fg:  $gray-5;
$diff-json-changed-num: $text-color;

$diff-json-icon:        $gray-7;