diff --git a/src/sass/_grafana_variables.dark.scss b/src/sass/_grafana_variables.dark.scss
new file mode 100644
index 0000000..70db51a
--- /dev/null
+++ b/src/sass/_grafana_variables.dark.scss
@@ -0,0 +1,406 @@
+// 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;
+
+$query-red: #e24d42;
+$query-green: #74e680;
+$query-purple: #fe85fc;
+$query-keyword: #66d9ef;
+$query-orange: $orange;
+
+// 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);
+$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909);
+
+// 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;
+
+$hr-border-color: $dark-4;
+
+// Panel
+// -------------------------
+$panel-bg: #212124;
+$panel-border-color: $dark-1;
+$panel-border: solid 1px $panel-border-color;
+$panel-header-hover-bg: $dark-4;
+
+// 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: $dark-1;
+$code-tag-border: $dark-4;
+
+// 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%, 0.1), 1px 1px 0 0 rgba(0, 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;
+
+$empty-list-cta-bg: $gray-blue;
+
+// 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;
+$table-bg-hover: $dark-3;
+
+// Buttons
+// -------------------------
+
+$btn-primary-bg: #ff6600;
+$btn-primary-bg-hl: #bc3e06;
+
+$btn-secondary-bg-hl: lighten($blue-dark, 5%);
+$btn-secondary-bg: $blue-dark;
+
+$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, 0.1);
+
+$btn-active-bg: $gray-4;
+$btn-active-text-color: $blue-dark;
+
+$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.1);
+$input-border-focus: $input-border-color;
+$input-box-shadow-focus: rgba(102, 175, 233, 0.6);
+$input-color-placeholder: $gray-1 !default;
+$input-label-bg: $gray-blue;
+$input-label-border-color: $dark-3;
+$input-color-select-arrow: $white;
+
+// Search
+$search-shadow: 0 0 30px 0 $black;
+$search-filter-box-bg: $gray-blue;
+
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $black;
+$typeahead-selected-bg: $dark-4;
+$typeahead-selected-color: $yellow;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $dark-3;
+$dropdownBorder: rgba(0, 0, 0, 0.2);
+$dropdownDividerTop: transparent;
+$dropdownDividerBottom: #444;
+$dropdownDivider: $dropdownDividerBottom;
+
+$dropdownLinkColor: $text-color;
+$dropdownLinkColorHover: $white;
+$dropdownLinkColorActive: $white;
+
+$dropdownLinkBackgroundActive: $dark-4;
+$dropdownLinkBackgroundHover: $dark-4;
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+// -------------------------
+$placeholderText: darken($text-color, 25%);
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset: 180px;
+
+// Wells
+// -------------------------
+
+$navbarHeight: 55px;
+
+$navbarBackground: $panel-bg;
+$navbarBorder: 1px solid $dark-3;
+$navbarShadow: 0 0 20px black;
+
+$navbarLinkColor: $gray-4;
+
+$navbarButtonBackground: $navbarBackground;
+$navbarButtonBackgroundHighlight: $body-bg;
+
+$navbar-button-border: #2f2f32;
+
+// Sidemenu
+// -------------------------
+$side-menu-bg: $black;
+$side-menu-bg-mobile: $side-menu-bg;
+$side-menu-item-hover-bg: $dark-2;
+$side-menu-shadow: 0 0 20px black;
+$side-menu-link-color: $link-color;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $body-bg;
+$menu-dropdown-hover-bg: $dark-2;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
+// Breadcrumb
+// -------------------------
+
+// Tabs
+// -------------------------
+$tab-border-color: $dark-4;
+
+// Toolbar
+$toolbar-bg: $input-black;
+
+// Pagination
+// -------------------------
+
+// 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-border-color: darken($blue, 12%);
+
+// footer
+$footer-link-color: $gray-2;
+$footer-link-hover: $gray-4;
+
+// 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-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;
+
+//Submenu
+$variable-option-bg: $blue-dark;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $input-bg;
+$switch-slider-color: $dark-2;
+$switch-slider-off-bg: $gray-1;
+$switch-slider-on-bg: linear-gradient(90deg, $orange, $red);
+$switch-slider-shadow: 0 0 3px black;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $dark-1;
+$checkbox-border: 1px solid $gray-1;
+$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
+$checkbox-color: $dark-1;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0 0 20px black;
+$panel-editor-border: 1px solid $dark-3;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
+$panel-editor-toolbar-view-bg: $input-black;
+$panel-editor-viz-item-shadow: 0 0 8px $dark-5;
+$panel-editor-viz-item-border: 1px solid $dark-5;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue;
+$panel-editor-viz-item-border-hover: 1px solid $blue;
+$panel-editor-viz-item-bg: $input-black;
+$panel-editor-tabs-line-color: #e3e3e3;
+$panel-editor-viz-item-bg-hover: darken($blue, 47%);
+$panel-editor-viz-item-bg-hover-active: darken($orange, 45%);
+
+$panel-option-section-border: 1px solid $dark-3;
+$panel-option-section-header-bg: linear-gradient(0deg, $gray-blue, $dark-1);
+
+$panel-grid-placeholder-bg: darken($blue, 47%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue;
+
+// logs
+$logs-color-unkown: $gray-2;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red);
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $black;
+$button-toggle-group-btn-seperator-border: 1px solid $page-bg;
+
+$vertical-resize-handle-bg: $dark-5;
+$vertical-resize-handle-dots: $gray-1;
+$vertical-resize-handle-dots-hover: $gray-2;
diff --git a/src/sass/_grafana_variables.light.scss b/src/sass/_grafana_variables.light.scss
new file mode 100644
index 0000000..6afd087
--- /dev/null
+++ b/src/sass/_grafana_variables.light.scss
@@ -0,0 +1,415 @@
+// Cosmo 2.3.2
+// Variables
+// --------------------------------------------------
+
+// Global values
+// --------------------------------------------------
+
+$theme-name: light;
+
+// Grays
+// -------------------------
+$black: #000;
+
+// -------------------------
+$black: #000;
+$dark-1: #13161d;
+$dark-2: #1e2028;
+$dark-3: #303133;
+$dark-4: #35373f;
+$dark-5: #41444b;
+$gray-1: #52545c;
+$gray-2: #767980;
+$gray-3: #acb6bf;
+$gray-4: #c7d0d9;
+$gray-5: #dde4ed;
+$gray-6: #e9edf2;
+$gray-7: #f7f8fa;
+
+$white: #fff;
+
+// Accent colors
+// -------------------------
+$blue: #0083b3;
+$blue-dark: #005f81;
+$blue-light: #00a8e6;
+$green: #3aa655;
+$red: #d44939;
+$yellow: #ff851b;
+$orange: #ff7941;
+$pink: #e671b8;
+$purple: #9954bb;
+$variable: $blue;
+
+$brand-primary: $orange;
+$brand-success: $green;
+$brand-warning: $orange;
+$brand-danger: $red;
+
+$query-red: $red;
+$query-green: $green;
+$query-purple: $purple;
+$query-orange: $orange;
+$query-keyword: $blue;
+
+// Status colors
+// -------------------------
+$online: #01a64f;
+$warn: #f79520;
+$critical: #ec2128;
+
+// Scaffolding
+// -------------------------
+
+$body-bg: $gray-7;
+$page-bg: $gray-7;
+$body-color: $gray-1;
+$text-color: $gray-1;
+$text-color-strong: $dark-2;
+$text-color-weak: $gray-2;
+$text-color-faint: $gray-4;
+$text-color-emphasis: $dark-5;
+
+$text-shadow-strong: none;
+$text-shadow-faint: none;
+$textShadow: none;
+
+// gradients
+$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%);
+$page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
+//$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
+$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
+
+// Links
+// -------------------------
+$link-color: $gray-1;
+$link-color-disabled: lighten($link-color, 30%);
+$link-hover-color: darken($link-color, 20%);
+$external-link-color: $blue-light;
+
+// Typography
+// -------------------------
+$headings-color: $text-color;
+$abbr-border-color: $gray-2 !default;
+$text-muted: $text-color-weak;
+
+$hr-border-color: $dark-3 !default;
+
+// Panel
+// -------------------------
+
+$panel-bg: $white;
+$panel-border-color: $gray-5;
+$panel-border: solid 1px $panel-border-color;
+$panel-header-hover-bg: $gray-6;
+
+// Page header
+$page-header-bg: linear-gradient(90deg, $white, $gray-7);
+$page-header-shadow: inset 0px -3px 10px $gray-6;
+$page-header-border-color: $gray-4;
+
+$divider-border-color: $gray-2;
+
+// Graphite Target Editor
+$tight-form-bg: #eaebee;
+
+$tight-form-func-bg: $gray-5;
+$tight-form-func-highlight-bg: $gray-6;
+
+$modal-backdrop-bg: $body-bg;
+$code-tag-bg: $gray-6;
+$code-tag-border: darken($code-tag-bg, 3%);
+
+// cards
+$card-background: linear-gradient(135deg, $gray-6, $gray-5);
+$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1);
+
+// Lists
+$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background;
+$list-item-hover-bg: darken($gray-5, 5%);
+$list-item-link-color: $text-color;
+$list-item-shadow: $card-shadow;
+$empty-list-cta-bg: $gray-6;
+
+// Tables
+// -------------------------
+$table-bg: transparent; // overall background-color
+$table-bg-accent: $gray-5; // for striping
+$table-bg-hover: $gray-5; // for hover
+$table-bg-active: $table-bg-hover !default;
+$table-border: $gray-3; // table and cell border
+
+$table-bg-odd: $gray-6;
+$table-bg-hover: $gray-5;
+
+// Scrollbars
+$scrollbarBackground: $gray-5;
+$scrollbarBackground2: $gray-5;
+$scrollbarBorder: $gray-4;
+
+// Buttons
+// -------------------------
+$btn-primary-bg: $brand-primary;
+$btn-primary-bg-hl: lighten($brand-primary, 8%);
+
+$btn-secondary-bg: $blue;
+$btn-secondary-bg-hl: lighten($blue, 4%);
+
+$btn-success-bg: lighten($green, 3%);
+$btn-success-bg-hl: darken($green, 3%);
+
+$btn-warning-bg: lighten($orange, 3%);
+$btn-warning-bg-hl: darken($orange, 3%);
+
+$btn-danger-bg: lighten($red, 3%);
+$btn-danger-bg-hl: darken($red, 3%);
+
+$btn-inverse-bg: $gray-6;
+$btn-inverse-bg-hl: darken($gray-6, 5%);
+$btn-inverse-text-color: $gray-1;
+$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+
+$btn-active-bg: $white;
+$btn-active-text-color: $blue;
+
+$btn-link-color: $gray-1;
+
+$btn-divider-left: $gray-4;
+$btn-divider-right: $gray-7;
+$btn-drag-image: '../img/grab_light.svg';
+
+$iconContainerBackground: $white;
+
+// Forms
+// -------------------------
+$input-bg: $white;
+$input-bg-disabled: $gray-5;
+
+$input-color: $dark-3;
+$input-border-color: $gray-5;
+$input-box-shadow: none;
+$input-border-focus: $blue !default;
+$input-box-shadow-focus: $blue !default;
+$input-color-placeholder: $gray-4 !default;
+$input-label-bg: $gray-5;
+$input-label-border-color: $gray-5;
+$input-color-select-arrow: $gray-1;
+
+// Sidemenu
+// -------------------------
+$side-menu-bg: $dark-2;
+$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
+$side-menu-item-hover-bg: $gray-1;
+$side-menu-shadow: 5px 0px 10px -5px $gray-1;
+$side-menu-link-color: $gray-6;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg: $gray-7;
+$menu-dropdown-hover-bg: $gray-6;
+$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
+
+// Breadcrumb
+// -------------------------
+
+// Tabs
+// -------------------------
+$tab-border-color: $gray-5;
+
+// Toolbar
+$toolbar-bg: white;
+
+// search
+$search-shadow: 0 5px 30px 0 $gray-4;
+$search-filter-box-bg: $gray-7;
+
+// Typeahead
+$typeahead-shadow: 0 5px 10px 0 $gray-5;
+$typeahead-selected-bg: $gray-6;
+$typeahead-selected-color: $yellow;
+
+// Dropdowns
+// -------------------------
+$dropdownBackground: $white;
+$dropdownBorder: $gray-4;
+$dropdownDividerTop: $gray-6;
+$dropdownDividerBottom: $white;
+$dropdownDivider: $dropdownDividerTop;
+
+$dropdownLinkColor: $dark-3;
+$dropdownLinkColorHover: $link-color;
+$dropdownLinkColorActive: $link-color;
+
+$dropdownLinkBackgroundActive: $gray-6;
+$dropdownLinkBackgroundHover: $gray-6;
+
+// COMPONENT VARIABLES
+// --------------------------------------------------
+
+// Input placeholder text color
+// -------------------------
+$placeholderText: $gray-2;
+
+// Hr border color
+// -------------------------
+$hrBorder: $gray-3;
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset: 180px;
+
+// Wells
+// -------------------------
+
+// Navbar
+// -------------------------
+
+$navbarHeight: 52px;
+$navbarBackground: $white;
+$navbarBorder: 1px solid $gray-4;
+$navbarShadow: 0 0 3px #c1c1c1;
+
+$navbarLinkColor: #444;
+
+$navbarBrandColor: $navbarLinkColor;
+
+$navbarButtonBackground: lighten($navbarBackground, 3%);
+$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+
+$navbar-button-border: $gray-4;
+
+// Pagination
+// -------------------------
+
+// Form states and alerts
+// -------------------------
+$warning-text-color: lighten($orange, 10%);
+$error-text-color: lighten($red, 10%);
+$success-text-color: lighten($green, 10%);
+$info-text-color: $blue;
+
+$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d);
+$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274);
+$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d);
+$alert-info-bg: $blue;
+
+// popover
+$popover-bg: $page-bg;
+$popover-color: $text-color;
+$popover-border-color: $gray-5;
+$popover-shadow: 0 0 20px $white;
+
+$popover-help-bg: $blue;
+$popover-help-color: $gray-6;
+$popover-error-bg: $btn-danger-bg;
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor: $popover-help-color;
+$tooltipBackground: $popover-help-bg;
+$tooltipArrowWidth: 5px;
+$tooltipArrowColor: $tooltipBackground;
+$tooltipLinkColor: lighten($popover-help-color, 5%);
+$graph-tooltip-bg: $gray-5;
+
+// images
+$checkboxImageUrl: '../img/checkbox_white.png';
+
+// info box
+$info-box-border-color: lighten($blue, 20%);
+
+// footer
+$footer-link-color: $gray-3;
+$footer-link-hover: $dark-5;
+
+// collapse box
+
+// json explorer
+$json-explorer-default-color: black;
+$json-explorer-string-color: green;
+$json-explorer-number-color: blue;
+$json-explorer-boolean-color: red;
+$json-explorer-null-color: #855a00;
+$json-explorer-undefined-color: rgb(202, 11, 105);
+$json-explorer-function-color: #ff20ed;
+$json-explorer-rotate-time: 100ms;
+$json-explorer-toggler-opacity: 0.6;
+$json-explorer-bracket-color: blue;
+$json-explorer-key-color: #00008b;
+$json-explorer-url-color: blue;
+
+// Changelog and diff
+// -------------------------
+$diff-label-bg: $gray-5;
+$diff-label-fg: $gray-2;
+
+$diff-switch-bg: $gray-7;
+$diff-switch-disabled: $gray-5;
+
+$diff-arrow-color: $dark-3;
+$diff-group-bg: $gray-7;
+
+$diff-json-bg: $gray-5;
+$diff-json-fg: $gray-2;
+
+$diff-json-added: lighten(desaturate($green, 30%), 10%);
+$diff-json-deleted: desaturate($red, 35%);
+
+$diff-json-old: #5a372a;
+$diff-json-new: #664e33;
+
+$diff-json-changed-fg: $gray-6;
+$diff-json-changed-num: $gray-4;
+$diff-json-icon: $gray-4;
+
+//Submenu
+$variable-option-bg: $blue-light;
+
+//Switch Slider
+// -------------------------
+$switch-bg: $white;
+$switch-slider-color: $gray-7;
+$switch-slider-off-bg: $gray-5;
+$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red);
+$switch-slider-shadow: 0 0 3px $dark-5;
+
+//Checkbox
+// -------------------------
+$checkbox-bg: $gray-6;
+$checkbox-border: 1px solid $gray-3;
+$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red);
+$checkbox-color: $gray-7;
+
+//Panel Edit
+// -------------------------
+$panel-editor-shadow: 0px 0px 8px $gray-3;
+$panel-editor-border: 1px solid $dark-4;
+$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
+$panel-editor-toolbar-view-bg: $white;
+$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
+$panel-editor-viz-item-border: 1px solid $gray-3;
+$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
+$panel-editor-viz-item-border-hover: 1px solid $blue-light;
+$panel-editor-viz-item-bg: $white;
+$panel-editor-tabs-line-color: $dark-5;
+$panel-editor-viz-item-bg-hover: lighten($blue, 62%);
+$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%);
+
+$panel-option-section-border: 1px solid $gray-6;
+$panel-option-section-header-bg: linear-gradient(0deg, $gray-6, $gray-7);
+
+$panel-grid-placeholder-bg: lighten($blue, 62%);
+$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
+
+// logs
+$logs-color-unkown: $gray-5;
+
+// toggle-group
+$button-toggle-group-btn-active-bg: $brand-primary;
+$button-toggle-group-btn-active-shadow: inset 0 0 4px $white;
+$button-toggle-group-btn-seperator-border: 1px solid $gray-6;
+
+$vertical-resize-handle-bg: $gray-4;
+$vertical-resize-handle-dots: $gray-3;
+$vertical-resize-handle-dots-hover: $gray-2;
diff --git a/src/sass/_panel-problems.scss b/src/sass/_panel-problems.scss
index 64c1064..03f382b 100644
--- a/src/sass/_panel-problems.scss
+++ b/src/sass/_panel-problems.scss
@@ -84,7 +84,10 @@
     }
 
     .problem-severity {
-      padding: 0px;
+
+      &.rt-td {
+        padding: 0px;
+      }
 
       .severity-cell {
         width: 100%;
@@ -190,7 +193,7 @@
       .description-label {
         font-weight: 500;
         font-style: italic;
-        color: $text-color-muted;
+        color: $text-muted;
       }
 
       .problem-age {
@@ -204,7 +207,7 @@
       }
 
       .problem-item-name {
-        color: $text-color-muted;
+        color: $text-muted;
       }
 
       .problem-item-value {
@@ -300,7 +303,7 @@
 
         .problem-ack-time,
         .problem-ack-user {
-          color: $text-color-muted;
+          color: $text-muted;
         }
         // span {
         //   padding-right: 0.6rem;
@@ -312,7 +315,7 @@
         flex: 0 0 auto;
         padding: 0.5rem 2rem;
         // background: $dark-4;
-        color: $text-color-muted;
+        color: $text-muted;
 
         &.compact {
           padding: 0.5rem 1rem;
@@ -348,13 +351,13 @@
           top: 0;
           left: 0;
           transition: all 0.2s ease-out;
-          // border: 1px solid $text-color-muted;
+          // border: 1px solid $text-muted;
           // border-radius: 2px;
           display: block;
 
           .event-timestamp {
             font-weight: 500;
-            color: $text-color-muted;
+            color: $text-muted;
           }
         }
 
diff --git a/src/sass/_react-table.scss b/src/sass/_react-table.scss
new file mode 100644
index 0000000..d8665a0
--- /dev/null
+++ b/src/sass/_react-table.scss
@@ -0,0 +1,67 @@
+// ReactTable basic overrides (does not include pivot/groups/filters)
+
+.ReactTable {
+  border: none;
+}
+
+.ReactTable .rt-table {
+  // Allow some space for the no-data text
+  min-height: 90px;
+}
+
+.ReactTable .rt-thead.-header {
+  box-shadow: none;
+  background: $list-item-bg;
+  border-top: 2px solid $body-bg;
+  border-bottom: 2px solid $body-bg;
+  height: 2em;
+}
+.ReactTable .rt-thead.-header .rt-th {
+  text-align: left;
+  color: $blue;
+  font-weight: 500;
+}
+.ReactTable .rt-thead .rt-td,
+.ReactTable .rt-thead .rt-th {
+  padding: 0.45em 0 0.45em 1.1em;
+  border-right: none;
+  box-shadow: none;
+}
+.ReactTable .rt-tbody .rt-td {
+  padding: 0.45em 0 0.45em 1.1em;
+  border-bottom: 2px solid $body-bg;
+  border-right: 2px solid $body-bg;
+}
+.ReactTable .rt-tbody .rt-td:last-child {
+  border-right: none;
+}
+.ReactTable .-pagination {
+  border-top: none;
+  box-shadow: none;
+  margin-top: $panel-margin;
+}
+.ReactTable .-pagination .-btn {
+  color: $blue;
+  background: $list-item-bg;
+}
+.ReactTable .-pagination input,
+.ReactTable .-pagination select {
+  color: $input-color;
+  background-color: $input-bg;
+}
+.ReactTable .-loading {
+  background: $input-bg;
+}
+.ReactTable .-loading.-active {
+  opacity: 0.8;
+}
+.ReactTable .-loading > div {
+  color: $input-color;
+}
+.ReactTable .rt-tr .rt-td:last-child {
+  text-align: right;
+}
+.ReactTable .rt-noData {
+  top: 60px;
+  z-index: inherit;
+}
diff --git a/src/sass/_variables.dark.scss b/src/sass/_variables.dark.scss
index c275205..6ec5c93 100644
--- a/src/sass/_variables.dark.scss
+++ b/src/sass/_variables.dark.scss
@@ -1,41 +1,4 @@
-// Grays
-// -------------------------
-$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:        #292a2d;
-
-$white:            #fff;
-
-// Accent colors
-// -------------------------
-$blue:             #33b5e5;
-$bluedark:         #005f81;
-$green:            #299c46;
-$red:              #d44a3a;
-$yellow:           #ecbb13;
-$pink:             #ff4444;
-$purple:           #9933cc;
-$orange:           #eb7b18;
-$variable:         #32d1df;
-$regex:            #d69e2e;
-
-$body-bg:               rgb(20,20,20);
-$body-color:            $gray-4;
-$text-color:            $gray-4;
-$text-color-muted:      $gray-2;
-$tight-form-func-bg:    #333;
-$grafanaListAccent:     lighten($dark-2, 2%);
+$regex: #d69e2e;
 
 $zbx-tag-color: $gray-5;
 $zbx-text-highlighted: $white;
diff --git a/src/sass/_variables.light.scss b/src/sass/_variables.light.scss
index eda72db..270f937 100644
--- a/src/sass/_variables.light.scss
+++ b/src/sass/_variables.light.scss
@@ -1,40 +1,4 @@
-// Grays
-// -------------------------
-$black:            #000;
-$dark-1:           #13161d;
-$dark-2:           #1e2028;
-$dark-3:           #303133;
-$dark-4:           #35373f;
-$dark-5:           #41444b;
-$gray-1:           #52545c;
-$gray-2:           #767980;
-$gray-3:           #acb6bf;
-$gray-4:           #c7d0d9;
-$gray-5:           #dde4ed;
-$gray-6:           #e9edf2;
-$gray-7:           #f7f8fa;
-
-$white:            #fff;
-
-// Accent colors
-// -------------------------
-$blue:             #1ca4d6;
-$blue-dark:        #3caad6;
-$green:            #3aa655;
-$red:              #d44939;
-$yellow:           #ff851b;
-$orange:           #ff7941;
-$pink:             #e671b8;
-$purple:           #9954bb;
-$variable:           $blue;
-$regex:            #aa7b1d;
-
-$body-bg :              $white;
-$body-color:            $gray-1;
-$text-color:            $gray-1;
-$text-color-muted:      $gray-2;
-$tight-form-func-bg:    $gray-5;
-$grafanaListAccent:     $gray-5;
+$regex: #d69e2e;
 
 $zbx-tag-color: $gray-6;
 $zbx-text-highlighted: $black;
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index e69de29..82eb907 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -0,0 +1 @@
+$panel-margin: 10px;
diff --git a/src/sass/grafana-zabbix.dark.scss b/src/sass/grafana-zabbix.dark.scss
index 56cb7bb..a58d8ea 100644
--- a/src/sass/grafana-zabbix.dark.scss
+++ b/src/sass/grafana-zabbix.dark.scss
@@ -1,2 +1,3 @@
+@import 'grafana_variables.dark';
 @import 'variables.dark';
 @import 'grafana-zabbix';
diff --git a/src/sass/grafana-zabbix.light.scss b/src/sass/grafana-zabbix.light.scss
index 6adbd07..dd63963 100644
--- a/src/sass/grafana-zabbix.light.scss
+++ b/src/sass/grafana-zabbix.light.scss
@@ -1,2 +1,3 @@
+@import 'grafana_variables.light';
 @import 'variables.light';
 @import 'grafana-zabbix';
diff --git a/src/sass/grafana-zabbix.scss b/src/sass/grafana-zabbix.scss
index cc1c2f1..708c9fa 100644
--- a/src/sass/grafana-zabbix.scss
+++ b/src/sass/grafana-zabbix.scss
@@ -1,4 +1,8 @@
+// DEPENDENCIES
+@import '../../node_modules/react-table/react-table.css';
+
 @import 'variables';
 @import 'panel-triggers';
 @import 'panel-problems';
 @import 'query_editor';
+@import 'react-table';