diff --git a/.storybook/main.js b/.storybook/main.js
index e9e799c8..a6c1ec40 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -7,7 +7,7 @@ module.exports = {
     '../src/components/*.stories.mdx',
     '../src/components/**/**/*.stories.@(tsx|mdx)',
   ],
-  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-controls'],
+  addons: ['@storybook/addon-docs', '@storybook/addon-links', '@storybook/addon-controls', 'storybook-addon-themes'],
   presets: [
     '@storybook/preset-create-react-app',
     {
diff --git a/.storybook/preview.js b/.storybook/preview.js
index e5034a5c..424e3652 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -20,4 +20,16 @@ export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'centered',
   controls: { expanded: true },
+  themes: {
+    default: 'Blue',
+    list: [
+      { name: 'Blue', class: '', color: '#3bc0f9' },
+      { name: 'Dark', class: 'theme--dark', color: '#222222' },
+      { name: 'Grey', class: 'theme--grey', color: '#888888' },
+      { name: 'Green', class: 'theme--green', color: '#2ac952' },
+      { name: 'Yellow', class: 'theme--yellow', color: '#ffd83d' },
+      { name: 'Red', class: 'theme--red', color: '#ff3a30' },
+      { name: 'Violet', class: 'theme--violet', color: '#9b1dd9' },
+    ],
+  },
 };
diff --git a/package.json b/package.json
index ed90bf12..0238ca29 100644
--- a/package.json
+++ b/package.json
@@ -113,6 +113,7 @@
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-typescript2": "^0.17.0",
     "rollup-plugin-url": "^1.4.0",
+    "storybook-addon-themes": "^6.1.0",
     "typescript": "^3.9.7"
   },
   "files": [
diff --git a/src/components/atoms/Avatar/Avatar.scss b/src/components/atoms/Avatar/Avatar.scss
index fdeb3bf8..73a78a9f 100644
--- a/src/components/atoms/Avatar/Avatar.scss
+++ b/src/components/atoms/Avatar/Avatar.scss
@@ -10,17 +10,17 @@
   }
 
   &--regular {
-    color: $primary-color;
+    color: var(--primary-color);
     background-color: $grey-100;
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--primary {
     color: $white;
-    background-color: $primary-color;
+    background-color: var(--primary-color);
 
     .ebs-icon {
       color: $white;
@@ -100,7 +100,7 @@
     }
 
     &--regular {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
     }
 
     &--inactive {
diff --git a/src/components/atoms/Button/Button.scss b/src/components/atoms/Button/Button.scss
index e26a57ff..3b313e8d 100644
--- a/src/components/atoms/Button/Button.scss
+++ b/src/components/atoms/Button/Button.scss
@@ -34,19 +34,19 @@
 
   // button type (Color)
   &--primary {
-    border-color: $primary-color;
-    background-color: $primary-color;
+    border-color: var(--primary-color);
+    background-color: var(--primary-color);
     color: $white;
 
     &:hover {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
     }
 
     &:active,
     &.active {
-      border-color: $primary-700;
-      background-color: $primary-700;
+      border-color: var(--primary-700);
+      background-color: var(--primary-700);
     }
 
     .ebs-icon {
@@ -68,8 +68,8 @@
     color: $white;
 
     @include hover-state {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
     }
 
     .ebs-button,
@@ -92,13 +92,13 @@
   }
 
   &--fill {
-    border-color: $primary-100;
-    background-color: $primary-100;
-    color: $primary-color;
+    border-color: var(--primary-100);
+    background-color: var(--primary-100);
+    color: var(--primary-color);
 
     &:hover {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
       color: $white;
 
       .ebs-button,
@@ -109,8 +109,8 @@
 
     &:active,
     &.active {
-      border-color: $primary-600;
-      background-color: $primary-600;
+      border-color: var(--primary-600);
+      background-color: var(--primary-600);
       color: $white;
 
       .ebs-button,
@@ -120,12 +120,12 @@
     }
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--fill & {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
   &--ghost.ebs-button__wrapper {
@@ -167,14 +167,14 @@
 
   &--text {
     background-color: transparent;
-    color: $primary-color;
+    color: var(--primary-color);
 
     &:hover {
       background-color: transparent;
 
       .ebs-button,
       .ebs-icon {
-        color: $primary-600;
+        color: var(--primary-600);
       }
     }
 
@@ -184,17 +184,17 @@
 
       .ebs-button,
       .ebs-icon {
-        color: $primary-700;
+        color: var(--primary-700);
       }
     }
 
     .ebs-icon {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 
   &--text & {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
   &--disabled {
diff --git a/src/components/atoms/Chips/Chips.scss b/src/components/atoms/Chips/Chips.scss
index f21b11c6..ba337e17 100644
--- a/src/components/atoms/Chips/Chips.scss
+++ b/src/components/atoms/Chips/Chips.scss
@@ -9,13 +9,13 @@
   transition: all $transition-time;
 
   &--checked {
-    background-color: $primary-000;
-    border-color: $primary-color;
-    color: $primary-color;
+    background-color: var(--primary-000);
+    border-color: var(--primary-color);
+    color: var(--primary-color);
 
     &:hover {
-      background-color: $primary-color;
-      border-color: $primary-color;
+      background-color: var(--primary-color);
+      border-color: var(--primary-color);
       color: $white;
 
       .ebs-icon {
@@ -31,8 +31,8 @@
 
     &:hover {
       background-color: transparent;
-      border-color: $primary-400;
-      color: $primary-400;
+      border-color: var(--primary-400);
+      color: var(--primary-400);
     }
   }
 
diff --git a/src/components/atoms/Input/Input.scss b/src/components/atoms/Input/Input.scss
index 538f74ab..ca628fca 100644
--- a/src/components/atoms/Input/Input.scss
+++ b/src/components/atoms/Input/Input.scss
@@ -15,7 +15,7 @@
 
   &--active,
   &.focus {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
     background-color: $white;
 
     .ebs-input {
diff --git a/src/components/atoms/Label/Label.scss b/src/components/atoms/Label/Label.scss
index cdfc0947..ed9da39c 100644
--- a/src/components/atoms/Label/Label.scss
+++ b/src/components/atoms/Label/Label.scss
@@ -84,9 +84,9 @@
   }
 
   &--primary {
-    background-color: $primary-000;
-    color: $primary-color;
-    border-color: $primary-color;
+    background-color: var(--primary-000);
+    color: var(--primary-color);
+    border-color: var(--primary-color);
   }
 
   &--fill {
diff --git a/src/components/atoms/Radio/Radio.scss b/src/components/atoms/Radio/Radio.scss
index 8b6fedfb..a7e8417d 100644
--- a/src/components/atoms/Radio/Radio.scss
+++ b/src/components/atoms/Radio/Radio.scss
@@ -82,27 +82,27 @@
     cursor: pointer;
 
     &:hover ~ .ebs-radio {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
 
       &__dot {
-        border-color: $primary-color;
-        background-color: $primary-100;
+        border-color: var(--primary-color);
+        background-color: var(--primary-100);
       }
     }
 
     &:checked:hover ~ .ebs-radio {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
 
       &__dot {
-        border-color: $primary-color;
-        background-color: $primary-color;
-        box-shadow: 0px 0px 0px 3px $primary-100 inset;
+        border-color: var(--primary-color);
+        background-color: var(--primary-color);
+        box-shadow: 0px 0px 0px 3px var(--primary-100 inset);
       }
     }
 
     &:checked ~ .ebs-radio .ebs-radio__dot {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
       box-shadow: 0px 0px 0px 3px $white inset;
     }
   }
diff --git a/src/components/atoms/Switch/Switch.scss b/src/components/atoms/Switch/Switch.scss
index 551db4c7..ca1f7098 100644
--- a/src/components/atoms/Switch/Switch.scss
+++ b/src/components/atoms/Switch/Switch.scss
@@ -15,8 +15,8 @@
     }
 
     &:hover .ebs-switch__dot {
-      border-color: $primary-200;
-      box-shadow: 0px 0px 0px 2px $primary-color inset;
+      border-color: var(--primary-200);
+      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     }
   }
 
@@ -32,29 +32,29 @@
   }
 
   &--checked {
-    background-color: $primary-200;
+    background-color: var(--primary-200);
 
     .ebs-switch__dot {
       transform: translate(16px, -50%);
-      background-color: $primary-400;
-      border-color: $primary-200;
+      background-color: var(--primary-400);
+      border-color: var(--primary-200);
     }
 
     &:hover .ebs-switch__dot {
-      border-color: $primary-300;
-      box-shadow: 0px 0px 0px 2px $primary-color inset;
+      border-color: var(--primary-300);
+      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     }
   }
 
   &--checked.disabled {
     cursor: not-allowed;
-    background-color: $primary-100;
+    background-color: var(--primary-100);
 
     .ebs-switch__dot,
     .ebs-switch__dot:hover {
-      box-shadow: 0px 0px 0px 2px $primary-400 inset;
-      background-color: $primary-300;
-      border-color: $primary-100;
+      box-shadow: 0px 0px 0px 2px var(--primary-400 inset);
+      background-color: var(--primary-300);
+      border-color: var(--primary-100);
     }
   }
 
@@ -66,7 +66,7 @@
     width: rem(16px);
     height: rem(16px);
     border: 2px solid transparent;
-    box-shadow: 0px 0px 0px 2px $primary-color inset;
+    box-shadow: 0px 0px 0px 2px var(--primary-color inset);
     border-radius: 50%;
     overflow: hidden;
     transition: all $transition-time;
diff --git a/src/components/molecules/Checkbox/Checkbox.scss b/src/components/molecules/Checkbox/Checkbox.scss
index 19e57b10..16df2fdc 100644
--- a/src/components/molecules/Checkbox/Checkbox.scss
+++ b/src/components/molecules/Checkbox/Checkbox.scss
@@ -14,8 +14,8 @@
     }
 
     .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
 
       .ebs-checkbox__check {
         font-size: 0;
@@ -91,8 +91,8 @@
 
   &:checked {
     ~ .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
     }
 
     ~ .ebs-checkbox .ebs-checkbox__check {
@@ -101,20 +101,20 @@
     }
 
     &:hover ~ .ebs-checkbox {
-      border-color: $primary-color;
-      background-color: $primary-color;
+      border-color: var(--primary-color);
+      background-color: var(--primary-color);
 
       &:before {
-        background-color: $primary-100;
+        background-color: var(--primary-100);
       }
     }
   }
 
   &:hover ~ .ebs-checkbox {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
 
     &:before {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
   }
 }
diff --git a/src/components/molecules/Checkbox/CheckboxMixins.scss b/src/components/molecules/Checkbox/CheckboxMixins.scss
index 493a6d2c..9c380d82 100644
--- a/src/components/molecules/Checkbox/CheckboxMixins.scss
+++ b/src/components/molecules/Checkbox/CheckboxMixins.scss
@@ -1,18 +1,18 @@
 // TODO use these in Checkbox.scss
 
 @mixin checkbox-hover() {
-  border-color: $primary-color;
+  border-color: var(--primary-color);
 
   &:before {
-    background-color: $primary-100;
+    background-color: var(--primary-100);
   }
 }
 
 @mixin checkbox-checked-hover() {
-  border-color: $primary-color;
-  background-color: $primary-color;
+  border-color: var(--primary-color);
+  background-color: var(--primary-color);
 
   &:before {
-    background-color: $primary-100;
+    background-color: var(--primary-100);
   }
 }
diff --git a/src/components/molecules/DatePicker/DatePicker.scss b/src/components/molecules/DatePicker/DatePicker.scss
index 4d50456d..7dfa0b92 100644
--- a/src/components/molecules/DatePicker/DatePicker.scss
+++ b/src/components/molecules/DatePicker/DatePicker.scss
@@ -76,7 +76,7 @@
   }
 
   @include hover-state {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
     background-color: $white;
   }
 
@@ -117,11 +117,11 @@
 
   &.is-opened {
     .ebs-datepicker {
-      border-color: $primary-color;
+      border-color: var(--primary-color);
     }
     .react-datepicker-wrapper:first-child {
       .ebs-datepicker {
-        border-right-color: $primary-color;
+        border-right-color: var(--primary-color);
       }
     }
   }
@@ -129,11 +129,11 @@
   &:not(.disabled) {
     @include hover-state {
       .ebs-datepicker {
-        border-color: $primary-color;
+        border-color: var(--primary-color);
       }
       .react-datepicker-wrapper:first-child {
         .ebs-datepicker {
-          border-right-color: $primary-color;
+          border-right-color: var(--primary-color);
         }
       }
     }
@@ -184,7 +184,7 @@
     }
 
     &__time-list-item:hover {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
       color: $text-color;
     }
 
@@ -194,7 +194,7 @@
 
     &__time-list-item--selected,
     &__time-list-item--selected:hover {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
       color: $white;
     }
 
@@ -318,15 +318,15 @@
     }
 
     &__day:hover {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
 
     &__day--in-range {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
 
     &__day--in-selecting-range {
-      background-color: $primary-000;
+      background-color: var(--primary-000);
     }
 
     &__day--selected,
@@ -336,7 +336,7 @@
     &__day--range-start,
     &__day--range-end {
       border-radius: rem($border-radius);
-      background-color: $primary-color;
+      background-color: var(--primary-color);
       color: $white;
     }
   }
@@ -357,7 +357,7 @@
     color: $text-color;
 
     @include hover-state {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
   }
 
@@ -367,7 +367,7 @@
     ul.react-datepicker__time-list
     li.react-datepicker__time-list-item {
     @include hover-state {
-      background-color: $primary-100;
+      background-color: var(--primary-100);
     }
   }
 
@@ -376,7 +376,7 @@
     .react-datepicker__time-box
     ul.react-datepicker__time-list
     li.react-datepicker__time-list-item--selected {
-    background-color: $primary-color;
+    background-color: var(--primary-color);
   }
 }
 
diff --git a/src/components/molecules/InputPhone/InputPhone.scss b/src/components/molecules/InputPhone/InputPhone.scss
index e1d28b44..1138d607 100644
--- a/src/components/molecules/InputPhone/InputPhone.scss
+++ b/src/components/molecules/InputPhone/InputPhone.scss
@@ -5,7 +5,7 @@
 
   &.active .form-control,
   &.active .flag-dropdown {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
     background-color: $white;
     color: $heading-color;
   }
@@ -44,15 +44,15 @@
     .country.highlight,
     .country:hover,
     .country[aria-selected='true'] {
-      background-color: $primary-000;
+      background-color: var(--primary-000);
       border-radius: rem($border-radius);
     }
 
     .country[aria-selected='true'] {
-      color: $primary-color;
+      color: var(--primary-color);
 
       .dial-code {
-        color: $primary-400;
+        color: var(--primary-400);
       }
     }
 
diff --git a/src/components/molecules/Loader/Loader.scss b/src/components/molecules/Loader/Loader.scss
index 43e9082d..919d0597 100644
--- a/src/components/molecules/Loader/Loader.scss
+++ b/src/components/molecules/Loader/Loader.scss
@@ -56,7 +56,7 @@
 
     &--small {
       border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
+      border-top: 2px solid var(--primary-color);
       width: rem(#{$base-size / 2});
       height: rem(#{$base-size / 2});
       top: calc(50% - #{$base-size / 4});
@@ -64,7 +64,7 @@
 
     &--middle {
       border: 2px solid $grey-500;
-      border-top: 2px solid $primary-color;
+      border-top: 2px solid var(--primary-color);
       width: rem(#{$base-size - $gutter-size});
       height: rem(#{$base-size - $gutter-size});
       top: calc(50% - #{($base-size - $gutter-size) / 2});
@@ -73,7 +73,7 @@
 
     &--regular {
       border: 6px solid $grey-500;
-      border-top: 6px solid $primary-color;
+      border-top: 6px solid var(--primary-color);
       width: rem(#{$base-size * 2});
       height: rem(#{$base-size * 2});
       top: calc(50% - #{$base-size});
diff --git a/src/components/molecules/Notify/Notify.scss b/src/components/molecules/Notify/Notify.scss
index ec177d31..8755c436 100644
--- a/src/components/molecules/Notify/Notify.scss
+++ b/src/components/molecules/Notify/Notify.scss
@@ -92,12 +92,12 @@
       color: $text-color;
 
       .ebs-icon {
-        color: $primary-color;
+        color: var(--primary-color);
       }
     }
 
     &--primary {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
     }
 
     &--success {
diff --git a/src/components/molecules/Select/Select.scss b/src/components/molecules/Select/Select.scss
index 76207411..77fcd69a 100644
--- a/src/components/molecules/Select/Select.scss
+++ b/src/components/molecules/Select/Select.scss
@@ -145,7 +145,7 @@
 
       .ebs-select__clear {
         font-weight: 100;
-        color: $primary-color;
+        color: var(--primary-color);
       }
     }
 
@@ -178,11 +178,11 @@
 
     &.active {
       .ebs-select__prefix {
-        border-color: $primary-color;
+        border-color: var(--primary-color);
       }
 
       .ebs-select-dropdown__wrapper .ebs-select {
-        border-color: $primary-color;
+        border-color: var(--primary-color);
         background-color: $white;
 
         .ebs-select-value {
@@ -192,7 +192,7 @@
 
       .ebs-select__suffix {
         .ebs-button__wrapper {
-          border-color: $primary-color;
+          border-color: var(--primary-color);
         }
       }
     }
diff --git a/src/components/molecules/Select/Select.stories.tsx b/src/components/molecules/Select/Select.stories.tsx
index 0eb44096..5f8f884b 100644
--- a/src/components/molecules/Select/Select.stories.tsx
+++ b/src/components/molecules/Select/Select.stories.tsx
@@ -24,6 +24,7 @@ const limit = 20;
 export const Regular: React.FC<SelectProps> & { args: SelectProps } = ({ children, ...props }) => {
   const [search, setSearch] = React.useState<string>('');
   const [list, setList] = React.useState<Option[]>([]);
+  const [value, setValue] = React.useState<any>();
   const [page, setPage] = React.useState(1);
   const [total, setTotal] = React.useState(0);
   const [loading, setLoaded] = React.useState(true);
@@ -56,7 +57,7 @@ export const Regular: React.FC<SelectProps> & { args: SelectProps } = ({ childre
 
   return (
     <Template>
-      <Select loading={loading} {...props}>
+      <Select loading={loading} value={value} onChange={setValue} {...props}>
         <Select.Search value={search} onSearch={(val) => setSearch(val)} />
 
         <Select.Options>
@@ -91,6 +92,7 @@ Regular.args = {
 export const InfiniteScrollPagination: React.FC<SelectProps> & { args: SelectProps } = ({ children, ...props }) => {
   const [search, setSearch] = React.useState<string>('');
   const [list, setList] = React.useState<Option[]>([]);
+  const [value, setValue] = React.useState<any>();
   const [page, setPage] = React.useState(1);
   const [total, setTotal] = React.useState(0);
   const [loading, setLoaded] = React.useState(true);
@@ -123,7 +125,7 @@ export const InfiniteScrollPagination: React.FC<SelectProps> & { args: SelectPro
 
   return (
     <Template>
-      <Select loading={loading} {...props}>
+      <Select loading={loading} value={value} onChange={setValue} {...props}>
         <Select.Search value={search} onSearch={(val) => setSearch(val)} />
 
         <Select.Options>
diff --git a/src/components/molecules/Select/components/Options/Item/Item.scss b/src/components/molecules/Select/components/Options/Item/Item.scss
index eb7e5cd0..a28efabb 100644
--- a/src/components/molecules/Select/components/Options/Item/Item.scss
+++ b/src/components/molecules/Select/components/Options/Item/Item.scss
@@ -10,15 +10,15 @@
   }
 
   &.active {
-    background-color: $primary-000;
+    background-color: var(--primary-000);
   }
 
   &.active &-text {
-    color: $primary-color;
+    color: var(--primary-color);
   }
 
   &.selected {
-    background-color: $primary-000;
+    background-color: var(--primary-000);
   }
 
   &.selected &-suffix,
@@ -29,10 +29,10 @@
   }
 
   &:hover {
-    background-color: $primary-000;
+    background-color: var(--primary-000);
 
     .ebs-select__options-item-text {
-      color: $primary-color;
+      color: var(--primary-color);
     }
 
     &-suffix,
diff --git a/src/components/molecules/Stepper/Stepper.scss b/src/components/molecules/Stepper/Stepper.scss
index 2f837b55..462e8e80 100644
--- a/src/components/molecules/Stepper/Stepper.scss
+++ b/src/components/molecules/Stepper/Stepper.scss
@@ -3,11 +3,11 @@
 .ebs-stepper__wrapper {
   &.active .ebs-stepper,
   &.active .ebs-stepper:hover {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
     background-color: $white;
 
     .rc-input-number-handler-wrap {
-      border-color: $primary-color;
+      border-color: var(--primary-color);
     }
 
     .rc-input-number-input {
@@ -70,11 +70,11 @@
     }
 
     &.rc-input-number-focused {
-      border-color: $primary-color;
+      border-color: var(--primary-color);
       background-color: $white;
 
       .rc-input-number-handler-wrap {
-        border-color: $primary-color;
+        border-color: var(--primary-color);
       }
 
       .rc-input-number-input {
diff --git a/src/components/molecules/Textarea/Textarea.scss b/src/components/molecules/Textarea/Textarea.scss
index c7f8f8cb..f6fe7bc5 100644
--- a/src/components/molecules/Textarea/Textarea.scss
+++ b/src/components/molecules/Textarea/Textarea.scss
@@ -15,7 +15,7 @@
   }
 
   &.has-value {
-    border-color: $primary-color;
+    border-color: var(--primary-color);
   }
 
   &.has-error {
diff --git a/src/components/molecules/Upload/Upload.scss b/src/components/molecules/Upload/Upload.scss
index 3c1e80f7..58c697f5 100644
--- a/src/components/molecules/Upload/Upload.scss
+++ b/src/components/molecules/Upload/Upload.scss
@@ -47,7 +47,7 @@
       margin-right: 10px;
     }
     &__bar {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
       flex-grow: 0;
       height: 4px;
       border-radius: 4px;
diff --git a/src/components/organisms/Actions/Actions.scss b/src/components/organisms/Actions/Actions.scss
index dc9b3dc0..6d14afb1 100644
--- a/src/components/organisms/Actions/Actions.scss
+++ b/src/components/organisms/Actions/Actions.scss
@@ -43,7 +43,7 @@
     color: $text-color;
 
     &:hover {
-      color: $primary-color;
+      color: var(--primary-color);
     }
   }
 }
diff --git a/src/components/organisms/Layout/Layout.scss b/src/components/organisms/Layout/Layout.scss
index 50de768c..d2d56fe1 100644
--- a/src/components/organisms/Layout/Layout.scss
+++ b/src/components/organisms/Layout/Layout.scss
@@ -166,7 +166,7 @@
           border-right: 1px solid $layout-top-bar-toggler-border-color;
 
           &:hover {
-            background-color: $primary-000;
+            background-color: var(--primary-000);
 
             .ebs-icon {
               color: $layout-top-bar-toggler-hover-color;
diff --git a/src/components/organisms/Sidebar/Options/Item/Item.scss b/src/components/organisms/Sidebar/Options/Item/Item.scss
index 28a83385..d6bc11aa 100644
--- a/src/components/organisms/Sidebar/Options/Item/Item.scss
+++ b/src/components/organisms/Sidebar/Options/Item/Item.scss
@@ -13,7 +13,7 @@
   }
 
   @include hover-state {
-    background-color: $primary-000;
-    color: $primary-color;
+    background-color: var(--primary-000);
+    color: var(--primary-color);
   }
 }
diff --git a/src/components/organisms/Sidebar/Sidebar.scss b/src/components/organisms/Sidebar/Sidebar.scss
index 49561b11..54cfb2df 100644
--- a/src/components/organisms/Sidebar/Sidebar.scss
+++ b/src/components/organisms/Sidebar/Sidebar.scss
@@ -89,7 +89,7 @@
     .ebs-sidebar__options
       .ebs-sidebar__item.ebs-sidebar__item--invert
       .ebs-sidebar__item.ebs-sidebar__item--active:hover {
-      background-color: $primary-color;
+      background-color: var(--primary-color);
     }
   }
 
diff --git a/src/components/organisms/SortBy/SortBy.scss b/src/components/organisms/SortBy/SortBy.scss
index 33771542..714b68c2 100644
--- a/src/components/organisms/SortBy/SortBy.scss
+++ b/src/components/organisms/SortBy/SortBy.scss
@@ -25,12 +25,12 @@
 
     &--active {
       @include fontBold;
-      color: $primary-color;
+      color: var(--primary-color);
     }
 
     &:hover {
       background-color: #f4f3f2;
-      color: $primary-300;
+      color: var(--primary-300);
     }
 
     &:not(:last-child) {
diff --git a/src/components/organisms/Table/Table.scss b/src/components/organisms/Table/Table.scss
index 70a7ec6f..c306e0f3 100644
--- a/src/components/organisms/Table/Table.scss
+++ b/src/components/organisms/Table/Table.scss
@@ -216,7 +216,7 @@
     color: $text-color;
 
     a {
-      color: $primary-color;
+      color: var(--primary-color);
     }
 
     b,
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 3e6d8eee..0ee5f378 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useEventListener';
 export * from './useScrollToggler';
 export * from './useNotify';
 export * from './usePortal';
+export * from './useTheme';
diff --git a/src/hooks/useNotify.tsx b/src/hooks/useNotify.tsx
index 47bc23d1..74da65cb 100644
--- a/src/hooks/useNotify.tsx
+++ b/src/hooks/useNotify.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NotifyItemProps } from '../components/molecules/Notify/NotifyItem';
 import { NotifyContext } from '../';
 
-export interface Props {
+export interface NotifyProps {
   error: (item: NotifyItemProps) => void;
   success: (item: NotifyItemProps) => void;
   info: (item: NotifyItemProps) => void;
@@ -11,7 +11,7 @@ export interface Props {
   warning: (item: NotifyItemProps) => void;
 }
 
-export const useNotify = (): Props => {
+export const useNotify = (): NotifyProps => {
   const { push } = React.useContext(NotifyContext);
 
   return {
diff --git a/src/hooks/useTheme.tsx b/src/hooks/useTheme.tsx
new file mode 100644
index 00000000..381d56e7
--- /dev/null
+++ b/src/hooks/useTheme.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+export type ThemeProps = [string | undefined, (value?: string) => void];
+
+export const useTheme = (defaultTheme?: string): ThemeProps => {
+  const [theme, setTheme] = React.useState<string | undefined>(defaultTheme);
+
+  React.useEffect(() => {
+    if (theme) {
+      document.body.classList.add(`theme--${theme}`);
+    }
+
+    return () => {
+      if (theme) {
+        document.body.classList.remove(`theme--${theme}`);
+      }
+    };
+  }, [theme]);
+
+  const onChange = (value?: string): void => {
+    if (theme && value !== theme) {
+      document.body.classList.remove(`theme--${theme}`);
+    }
+
+    setTheme(value);
+  };
+
+  return [theme, onChange];
+};
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b27419bf..d4484983 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,5 +1,6 @@
 // Utilities
 @import './palette';
+@import './themes';
 @import './variables';
 @import './mixins/index';
 @import './helpers/index';
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
new file mode 100644
index 00000000..00e15a7a
--- /dev/null
+++ b/src/styles/themes.scss
@@ -0,0 +1,104 @@
+:root {
+  --primary-000: #{$primary-000};
+  --primary-100: #{$primary-100};
+  --primary-200: #{$primary-200};
+  --primary-300: #{$primary-300};
+  --primary-400: #{$primary-400};
+  --primary-500: #{$primary-500};
+  --primary-600: #{$primary-600};
+  --primary-700: #{$primary-700};
+  --primary-800: #{$primary-800};
+  --primary-900: #{$primary-900};
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--dark {
+  --primary-000: #f3f3f3;
+  --primary-100: #e8e8e8;
+  --primary-200: #bcbcbc;
+  --primary-300: #7a7a7a;
+  --primary-400: #222222;
+  --primary-500: #1d1819;
+  --primary-600: #181112;
+  --primary-700: #130a0d;
+  --primary-800: #100609;
+  --primary-900: #000000;
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--grey {
+  --primary-000: #{$grey-50};
+  --primary-100: #{$grey-100};
+  --primary-200: #{$grey-200};
+  --primary-300: #{$grey-300};
+  --primary-400: #{$grey-400};
+  --primary-500: #{$grey-500};
+  --primary-600: #{$grey-600};
+  --primary-700: #{$grey-700};
+  --primary-800: #{$grey-800};
+  --primary-900: #{$grey-900};
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--green {
+  --primary-000: #{$white};
+  --primary-100: #{$accent-3-100};
+  --primary-200: #{$accent-3-200};
+  --primary-300: #{$accent-3-300};
+  --primary-400: #{$accent-3-400};
+  --primary-500: #{$accent-3-500};
+  --primary-600: #{$accent-3-600};
+  --primary-700: #{$accent-3-700};
+  --primary-800: #{$accent-3-800};
+  --primary-900: #{$accent-3-900};
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--yellow {
+  --primary-000: #{$white};
+  --primary-100: #{$accent-2-100};
+  --primary-200: #{$accent-2-200};
+  --primary-300: #{$accent-2-300};
+  --primary-400: #{$accent-2-400};
+  --primary-500: #{$accent-2-500};
+  --primary-600: #{$accent-2-600};
+  --primary-700: #{$accent-2-700};
+  --primary-800: #{$accent-2-800};
+  --primary-900: #{$accent-2-900};
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--red {
+  --primary-000: #{$white};
+  --primary-100: #{$danger-100};
+  --primary-200: #{$danger-200};
+  --primary-300: #{$danger-300};
+  --primary-400: #{$danger-400};
+  --primary-500: #{$danger-500};
+  --primary-600: #{$danger-600};
+  --primary-700: #{$danger-700};
+  --primary-800: #{$danger-800};
+  --primary-900: #{$danger-900};
+
+  --primary-color: var(--primary-500);
+}
+
+.theme--violet {
+  --primary-000: #{$white};
+  --primary-100: #{$accent-1-100};
+  --primary-200: #{$accent-1-200};
+  --primary-300: #{$accent-1-300};
+  --primary-400: #{$accent-1-400};
+  --primary-500: #{$accent-1-500};
+  --primary-600: #{$accent-1-600};
+  --primary-700: #{$accent-1-700};
+  --primary-800: #{$accent-1-800};
+  --primary-900: #{$accent-1-900};
+
+  --primary-color: var(--primary-500);
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 3ea36932..8ba66ffe 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -114,9 +114,9 @@ $avatar-size-small: 30px !default;
 $avatar-size-big: 60px !default;
 $avatar-font-small: 9px !default;
 $avatar-font-big: 13px !default;
-$avatar-description-color: $primary-color !default;
+$avatar-description-color: var(--primary-color) !default;
 $avatar-status-active: $success-color !default;
-$avatar-status-regular: $primary-color !default;
+$avatar-status-regular: var(--primary-color) !default;
 $avatar-status-uanctive: $success-color !default;
 $avatar-short-alt-font-weight: $font-weight-bold !default;
 $avatar-inline-alt-font-weight: $font-weight-semibold !default;
@@ -135,7 +135,7 @@ $actions-tooltip-item-font-size: 12px !default;
 $actions-tooltip-item-padding: $actions-tooltip-title-padding !default;
 $actions-border: 1px solid $border-color !default;
 $actions-height: 36px !default;
-$actions-icon-color: $primary-color !default;
+$actions-icon-color: var(--primary-color) !default;
 $actions-icon-hover-color: $white !default;
 
 // Badges
@@ -181,7 +181,7 @@ $card-padding-y-lg: 20px !default;
 
 $card-border-radius: $border-radius !default;
 $card-border-color: $border-color !default;
-$card-bordered-color: $primary-color !default;
+$card-bordered-color: var(--primary-color) !default;
 $card-header-bg-color: $white !default;
 $card-body-bg-color: $grey-100 !default;
 $card-footer-bg-color: $white !default;
@@ -197,7 +197,7 @@ $collapse-padding-y-lg: 20px !default;
 
 $collapse-border-radius: $border-radius !default;
 $collapse-border-color: $border-color !default;
-$collapse-bordered-color: $primary-color !default;
+$collapse-bordered-color: var(--primary-color) !default;
 $collapse-header-bg-color: $white !default;
 $collapse-body-bg-color: $grey-100 !default;
 $collapse-group-box-shadow: $box-shadow !default;
@@ -205,10 +205,10 @@ $collapse-group-box-shadow: $box-shadow !default;
 // Links
 //
 // Style anchor elements.
-$link-color: $primary-color !default;
+$link-color: var(--primary-color) !default;
 $link-decoration: none !default;
 $link-shade-percentage: 20% !default;
-$link-hover-color: $primary-600 !default;
+$link-hover-color: var(--primary-600) !default;
 $link-hover-decoration: none !default;
 
 // ListGroup
@@ -256,16 +256,16 @@ $btn-border-radius: $border-radius !default;
 $btn-border-radius-sm: $border-radius-sm !default;
 $btn-border-radius-lg: $border-radius-lg !default;
 
-$btn-type-ghost-border-color: $primary-color !default;
+$btn-type-ghost-border-color: var(--primary-color) !default;
 $btn-type-ghost-background: transparent !default;
-$btn-type-ghost-color: $primary-color !default;
+$btn-type-ghost-color: var(--primary-color) !default;
 $btn-type-ghost-hover-color: $white !default;
-$btn-type-ghost-hover-background: $primary-color !default;
-$btn-type-ghost-hover-border-color: $primary-color !default;
+$btn-type-ghost-hover-background: var(--primary-color) !default;
+$btn-type-ghost-hover-border-color: var(--primary-color) !default;
 $btn-type-ghost-active-color: $white !default;
-$btn-type-ghost-active-background: $primary-600 !default;
-$btn-type-ghost-active-border-color: $primary-600 !default;
-$btn-type-ghost-icon-color: $primary-color !default;
+$btn-type-ghost-active-background: var(--primary-600) !default;
+$btn-type-ghost-active-border-color: var(--primary-600) !default;
+$btn-type-ghost-icon-color: var(--primary-color) !default;
 
 // Layout
 //
@@ -277,15 +277,15 @@ $layout-top-bar-background: $white !default;
 $layout-top-bar-side-left-margin-left: $gutter-size !default;
 $layout-top-bar-side-right-margin-left: $gutter-size !default;
 
-$layout-top-bar-avatar-background: $primary-color !default;
+$layout-top-bar-avatar-background: var(--primary-color) !default;
 $layout-top-bar-avatar-color: $white !default;
 $layout-top-bar-avatar-alt-color: $text-color !default;
-$layout-top-bar-avatar-icon-btn-color: $primary-color !default;
+$layout-top-bar-avatar-icon-btn-color: var(--primary-color) !default;
 $layout-top-bar-avatar-icon-btn-size: 32px !default;
 $layout-top-bar-avatar-icon-btn-padding: 0 !default;
 
-$layout-top-bar-toggler-color: $primary-color !default;
-$layout-top-bar-toggler-hover-color: $primary-color !default;
+$layout-top-bar-toggler-color: var(--primary-color) !default;
+$layout-top-bar-toggler-hover-color: var(--primary-color) !default;
 $layout-top-bar-toggler-border-color: $border-color !default;
 
 $layout-content-background: $white !default;
@@ -314,7 +314,7 @@ $sidebar-background: $white !default;
 $sidebar-bottom-background: $white !default;
 
 $sidebar-item-text-color: $text-color !default;
-$sidebar-item-hover-background: $primary-color !default;
+$sidebar-item-hover-background: var(--primary-color) !default;
 $sidebar-item-hover-color: $white !default;
 $sidebar-logo-width: $sidebar-width - $gutter-size * 3 !default;
 
@@ -336,7 +336,7 @@ $table-head-cell-text-align: left !default;
 $table-head-font-size: 13px !default;
 $table-head-background: $white !default;
 $table-head-cell-border: $table-border !default;
-$table-head-cell-bottom-border: 1px solid $primary-color !default;
+$table-head-cell-bottom-border: 1px solid var(--primary-color) !default;
 $table-sub-cell-border: $table-border !default;
 $table-font-size: $font-size-base !default;
 $table-filter-active-color: $text-color-secondary !default;
@@ -346,7 +346,7 @@ $table-filter-active-color: $text-color-secondary !default;
 // Customize height & icon of sortBy
 $sort-by-height: 36px !default;
 $sort-by-tooltip-height: 250px !default;
-$sort-by-icon-color: $primary-color !default;
+$sort-by-icon-color: var(--primary-color) !default;
 $sort-by-icon-hover-color: $white !default;
 $sort-by-text-color: $text-color !default;
 $sort-by-text-hover-color: $white !default;
@@ -357,17 +357,17 @@ $sort-by-text-hover-color: $white !default;
 $scrollbar-size: $gutter-size / 2 !default;
 $scrollbar-track-background-color: $background-content !default;
 $scrollbar-thumb-background-color: $border-color !default;
-$scrollbar-thumb-hover-background-color: $primary-color !default;
+$scrollbar-thumb-hover-background-color: var(--primary-color) !default;
 
 // Icon
-$icon-svg-color: $primary-color !default;
+$icon-svg-color: var(--primary-color) !default;
 
 // Tabs
 $tab-item-margin: 0 30px 0 0 !default;
 $tab-item-padding: 20px 0 !default;
 $tab-border: none !default;
 $tab-border-bottom: 1px solid #111 !default;
-$tab-item-border-bottom-active: 2px solid $primary-color !default;
+$tab-item-border-bottom-active: 2px solid var(--primary-color) !default;
 $tab-item-disabled-color: $normal-color !default;
 $tab-content-padding: 10px !default;
 
diff --git a/yarn.lock b/yarn.lock
index ecb67177..af39c7c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2017,7 +2017,7 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.3.7", "@storybook/addons@^6.3.7":
+"@storybook/addons@6.3.7", "@storybook/addons@^6.0.0", "@storybook/addons@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.7.tgz#7c6b8d11b65f67b1884f6140437fe996dc39537a"
   integrity sha512-9stVjTcc52bqqh7YQex/LpSjJ4e2Czm4/ZYDjIiNy0p4OZEx+yLhL5mZzMWh2NQd6vv+pHASBSxf2IeaR5511A==
@@ -2073,7 +2073,7 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/api@6.3.7":
+"@storybook/api@6.3.7", "@storybook/api@^6.0.0":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.3.7.tgz#88b8a51422cd0739c91bde0b1d65fb6d8a8485d0"
   integrity sha512-57al8mxmE9agXZGo8syRQ8UhvGnDC9zkuwkBPXchESYYVkm3Mc54RTvdAOYDiy85VS4JxiGOywHayCaRwgUddQ==
@@ -2289,7 +2289,7 @@
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/components@6.3.7":
+"@storybook/components@6.3.7", "@storybook/components@^6.0.0":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.3.7.tgz#42b1ca6d24e388e02eab82aa9ed3365db2266ecc"
   integrity sha512-O7LIg9Z18G0AJqXX7Shcj0uHqwXlSA5UkHgaz9A7mqqqJNl6m6FwwTWcxR1acUfYVNkO+czgpqZHNrOF6rky1A==
@@ -2440,7 +2440,7 @@
   dependencies:
     core-js "^3.8.2"
 
-"@storybook/core-events@6.3.7":
+"@storybook/core-events@6.3.7", "@storybook/core-events@^6.0.0":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.3.7.tgz#c5bc7cae7dc295de73b6b9f671ecbe582582e9bd"
   integrity sha512-l5Hlhe+C/dqxjobemZ6DWBhTOhQoFF3F1Y4kjFGE7pGZl/mas4M72I5I/FUcYCmbk2fbLfZX8hzKkUqS1hdyLA==
@@ -2768,7 +2768,7 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7":
+"@storybook/theming@6.3.7", "@storybook/theming@^6.0.0", "@storybook/theming@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
   integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==
@@ -6773,6 +6773,11 @@ core-js@^3.0.1, core-js@^3.0.4, core-js@^3.5.0, core-js@^3.6.5, core-js@^3.8.2:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.11.0.tgz#05dac6aa70c0a4ad842261f8957b961d36eb8926"
   integrity sha512-bd79DPpx+1Ilh9+30aT5O1sgpQd4Ttg8oqkqi51ZzhedMM1omD2e6IOF48Z/DzDCZ2svp49tN/3vneTK6ZBkXw==
 
+core-js@^3.6.4:
+  version "3.16.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.2.tgz#3f485822889c7fc48ef463e35be5cc2a4a01a1f4"
+  integrity sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -18176,6 +18181,20 @@ storybook-addon-outline@^1.4.1:
     "@storybook/core-events" "^6.3.0"
     ts-dedent "^2.1.1"
 
+storybook-addon-themes@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/storybook-addon-themes/-/storybook-addon-themes-6.1.0.tgz#5d7afe293cd4bc28a8f634aa466dbd8fd2f9222e"
+  integrity sha512-ZT8aNgrwFVNEOmOPBLNS0WBacjvMFo/bZ83P8MmsJ3Ewqt0AbmPioghTZccARUn/EQ+LrDxyh2D0QgmLaKo07Q==
+  dependencies:
+    "@storybook/addons" "^6.0.0"
+    "@storybook/api" "^6.0.0"
+    "@storybook/components" "^6.0.0"
+    "@storybook/core-events" "^6.0.0"
+    "@storybook/theming" "^6.0.0"
+    core-js "^3.6.4"
+    global "^4.4.0"
+    memoizerific "^1.11.3"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"