grafana/public/sass/_variables.dark.scss

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


// Grays
// -------------------------
$black:                 #000;
$gray:                  #bbb;
$gray-dark:             #262626;
$gray-darker:           #1f1f1f;

$gray-light:            #ADAFAE;
$gray-lighter:          #BBBFC2;
$white:                 #fff;

// Accent colors
// -------------------------
$blue:                  #33B5E5;
$blue-dark:             #005f81;
$green:                 #669900;
$red:                   #CC3900;
$yellow:                #ECBB13;
$orange:                #FF8800;
$pink:                  #FF4444;
$purple:                #9933CC;
$variable:              #32D1DF;

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

// Scaffolding
// -------------------------
$body-bg:  				rgb(20,20,20);
$page-bg:  				$gray-darker;
$body-color:      		$gray-lighter;
$text-color:      		$gray-lighter;

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

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

$text-muted: 			 darken($link-color,30%);

$blockquote-small-color:  $gray-light !default;
$blockquote-border-color: $gray-lighter !default;

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

// Panel
// -------------------------
$panel-bg: 					$gray-darker;
$panel-border: 				solid 1px $gray-dark;

$divider-border-color: 		#555; 

// Graphite Target Editor
$tight-form-border:         #050505;
$tight-form-bg:     		$gray-dark;
  
$tight-form-func-bg: 		#333;
$tight-form-func-highlight-bg: #444;

$modal-background: $black;
$code-tag-bg: #444;


// Lists
$grafanaListBackground:  $gray-dark;
$grafanaListAccent:      lighten($gray-darker, 2%);
$grafanaListBorderTop:      $gray-dark;
$grafanaListBorderBottom:   $black;
$grafanaListHighlight:      #333;
$grafanaListMainLinkColor: $text-color;

// Scrollbars
$scrollbarBackground: #3a3a3a;
$scrollbarBackground2: #3a3a3a;
$scrollbarBorder: black;

// Tables
// -------------------------
$table-bg:                    transparent; // overall background-color
$table-bg-accent:             rgba(100, 100, 100, 0.3); // for striping
$table-bg-hover:              $gray-dark; // for hover
$table-border:                $gray-dark; // table and cell border

// Buttons
// -------------------------
$btnBackground:                     $gray-dark;
$btnBackgroundHighlight:            darken($gray-light, 15%);
$btnBackgroundShadow:            	darken($gray-light, 15%);
$btnBorder:                         #bbb;

$btnPrimaryBackground:              $blue-dark;
$btnPrimaryBackgroundHighlight:     lighten($blue-dark, 5%);

$btnInfoBackground:                 lighten($purple, 3%);
$btnInfoBackgroundHighlight:        darken($purple, 3%);

$btnSuccessBackground:              lighten($green, 3%);
$btnSuccessBackgroundHighlight:     darken($green, 3%);

$btnWarningBackground:              lighten($orange, 3%);
$btnWarningBackgroundHighlight:     darken($orange, 3%);

$btnDangerBackground:               lighten($red, 3%);
$btnDangerBackgroundHighlight:      darken($red, 3%);

$btnInverseBackground:              $gray-dark;
$btnInverseBackgroundHighlight:     lighten($gray-dark, 1%);
$btnInverseText:                    $link-color;
$btnInverseBorder:                  #333;

$btnText:              				$gray;

$iconContainerBackground:			      $black;
$iconContainerBackgroundHighlight:	lighten($black, 5%);
$iconContainerBorder:				        1px solid transparent;
$iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);

// Hero unit
// -------------------------
$heroUnitBackground:              $gray-dark;
$heroUnitHeadingColor:            inherit;
$heroUnitLeadColor:               inherit;

// Forms
// -------------------------
$inputBackground:               lighten($gray-dark,5%);
$inputBorder:                   lighten($gray-dark,5%);
$inputBorderRadius:             $baseBorderRadius;
$inputText:              		$gray-light;
$inputDisabledBackground:       #555;
$formActionsBackground:         transparent;
$inputHeight:                   $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
$labelBackground:				$gray-dark;


// Search
$searchShadow: 0 0 35px 0 $body-bg;

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

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

$dropdownLinkBackgroundActive:  $blue-dark;
$dropdownLinkBackgroundHover:   $blue-dark;


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


// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown:          1000;
$zindexPopover:           1010;
$zindexTooltip:           1020;
$zindexFixedNavbar:       1030;
$zindexModalBackdrop:     1040;
$zindexModal:             1050;

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


// Hr border color
// -------------------------
$hrBorder:                $gray-dark;


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


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

$navbarHeight:                    52px;
$navbarBackgroundHighlight:       $gray-dark;
$navbarBackground:                $gray-dark;
$navbarBorder:                    1px solid $body-bg;

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

$navbarButtonBackground:          lighten($navbarBackground, 3%);
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);

// Sidemenu
// -------------------------
$sideMenuTopShadow:          $navbarDropdownShadow;
$sideMenuBackground:         $gray-dark;
$sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
$sideMenuShadow: 0 0 35px 0 $body-bg;

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

// Form states and alerts
// -------------------------
$state-warning-text:             darken(#c09853, 10%);
$state-warning-bg:       $orange;

$errorText:               #b94a48;
$errorBackground:         $btnDangerBackground;

$successText:             #468847;
$successBackground:       $btnSuccessBackground;

$infoText:                $blue-dark;
$infoBackground:          $btnInfoBackground;

// Tooltips and popovers
// -------------------------
$tooltipColor:            $white;
$tooltipBackground:       rgb(58, 57, 57);
$tooltipArrowWidth:       5px;
$tooltipArrowColor:       $tooltipBackground;
$tooltipLinkColor:        $link-color;

$popoverBackground:       $heroUnitBackground;
$popoverArrowWidth:       10px;
$popoverArrowColor:       $popoverBackground;
$popoverTitleBackground:  $popoverBackground;

// Special enhancement for popovers
$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
$popoverArrowOuterColor:  rgba(0,0,0,.25);

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

// GRID
// --------------------------------------------------


// Default 940px grid
// -------------------------
$gridColumns:             12;
$gridColumnWidth:         60px;
$gridGutterWidth:         20px;
$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));

// 1200px min
$gridColumnWidth1200:     70px;
$gridGutterWidth1200:     30px;
$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));

// 768px-979px
$gridColumnWidth768:      42px;
$gridGutterWidth768:      20px;
$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));


// Fluid grid
// -------------------------
$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);

// 1200px min
$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);

// 768px-979px
$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);