diff --git a/src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss b/src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss
index b53bd6c6..9a629cbf 100644
--- a/src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/list-editor/list-account/list-account.component.scss
@@ -34,7 +34,7 @@
             &--remove {
                 color: $font-link-primary;
                 &:hover{
-                    color: lighten($font-link-primary, 40);
+                    color: color(font-link-primary-lighter-40);
                 }
             }
         }
diff --git a/src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss b/src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss
index 125307c9..a58534aa 100644
--- a/src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/list-editor/list-editor.component.scss
@@ -9,7 +9,7 @@
 
     &__search {
         color: #fff;
-        background-color: darken($color-primary, 4);
+        background-color: color(color-primary-darker-4);
         border: 2px solid $color-primary;
         width: calc(100%);
         padding: 3px 5px;
diff --git a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
index 29eef8d2..39a3a0a8 100644
--- a/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
+++ b/src/app/components/floating-column/manage-account/my-account/my-account.component.scss
@@ -30,7 +30,7 @@ $button-width: $list-width/2;
         color: #fff;
 
         &:hover {
-            background-color: lighten($color-primary, 15);
+            background-color: color(color-primary-lighter-15);
         }
     }
 
@@ -62,13 +62,13 @@ $button-width: $list-width/2;
 
         &--disabled {
             cursor: default;
-            background-color: darken($color-primary, 4);
+            background-color: color(color-primary-darker-4);
 
             width: calc(100% - #{$button-width} - 1px);
             //outline: 1px solid greenyellow;
 
             &:hover {
-                background-color: darken($color-primary, 4);
+                background-color: color(color-primary-darker-4);
             }
         }
 
@@ -91,13 +91,13 @@ $button-width: $list-width/2;
 
         &--disabled {
             cursor: default;
-            background-color: darken($color-primary, 4);
+            background-color: color(color-primary-darker-4);
 
             width: calc(100% - #{$button-width} * 3 - 3px);
             //outline: 1px solid greenyellow;
 
             &:hover {
-                background-color: darken($color-primary, 4);
+                background-color: color(color-primary-darker-4);
             }
         }
 
@@ -112,13 +112,13 @@ $button-width: $list-width/2;
 
             &:hover {
                 color: #fff;
-                background-color: lighten($color-primary, 15);
+                background-color: color(color-primary-lighter-15);
             }
         }
 
         &--new-list-title {
             color: #fff;
-            background-color: darken($color-primary, 4);
+            background-color: color(color-primary-darker-4);
             border: 2px solid $color-primary;
             width: calc(100% - #{$list-width}/2 - 1px);
             padding: 3px 5px;
diff --git a/src/app/components/stream/stream-edition/stream-edition.component.scss b/src/app/components/stream/stream-edition/stream-edition.component.scss
index b505c210..d7a028d3 100644
--- a/src/app/components/stream/stream-edition/stream-edition.component.scss
+++ b/src/app/components/stream/stream-edition/stream-edition.component.scss
@@ -51,7 +51,7 @@
         }
 
         &:hover {
-            color: darken($font-color-primary, 20);
+            color: color(font-color-primary-darker-20);
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/themes/theme.service.ts b/src/app/themes/theme.service.ts
index 69dcf37f..d16296af 100644
--- a/src/app/themes/theme.service.ts
+++ b/src/app/themes/theme.service.ts
@@ -12,6 +12,10 @@ export class ThemeService {
 
     activeTheme = new BehaviorSubject<ThemeTypeEnum>(ThemeTypeEnum.default);
 
+    constructor() {
+        this.setTheme(this.active);
+    }
+
     getAvailableThemes(): Theme[] {
         return this.availableThemes;
     }
diff --git a/src/app/themes/theme.ts b/src/app/themes/theme.ts
index addf7e10..254cd35b 100644
--- a/src/app/themes/theme.ts
+++ b/src/app/themes/theme.ts
@@ -13,7 +13,12 @@ export const defaultTheme: Theme = {
     name: "default",
     type: ThemeTypeEnum.default,
     properties: {
-        "--foreground-default": "white",
+        "--font-color-primary": "#e8eaf3",
+        "--font-color-secondary-value": "#fff",
+        "--font-link-primary": "#595c67",
+        "--font-link-primary-hover": "#8f93a2",
+        "--color-primary": "#141824",
+        "--color-secondary": "#090b10",
     }
 };
 
@@ -21,6 +26,11 @@ export const lightTheme: Theme = {
     name: "light",
     type: ThemeTypeEnum.light,
     properties: {
-        "--foreground-default": "black",
+        "--font-color-primary": "#000",
+        "--font-color-secondary-value": "#000",
+        "--font-link-primary": "#000",
+        "--font-link-primary-hover": "#000",
+        "--color-primary": "#fff",
+        "--color-secondary": "#fff",
     }
 };
diff --git a/src/sass/_buttons.scss b/src/sass/_buttons.scss
index ac23968a..a1a5bd8b 100644
--- a/src/sass/_buttons.scss
+++ b/src/sass/_buttons.scss
@@ -63,10 +63,10 @@
 
     &--disabled {
         cursor: default;
-        background-color: darken($color-primary, 4);
+        background-color: color(color-primary-darker-4);
 
         &:hover {
-            background-color: darken($color-primary, 4);
+            background-color: color(color-primary-darker-4);
         }
     }
 
@@ -81,7 +81,7 @@
         color: #fff;
 
         &:hover {
-            background-color: lighten($color-primary, 15);
+            background-color: color(color-primary-lighter-15);
         }
     }
 
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index 54741cb5..bb22fe17 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,9 +1,36 @@
-$font-color-primary: #e8eaf3;
-$font-color-secondary: darken(#fff, 25);
-$font-link-primary: #595c67;
-$font-link-primary-hover: #8f93a2;
-$color-primary: #141824;
-$color-secondary: #090b10;
+:root {
+    --font-color-primary: #e8eaf3;
+    //--font-color-secondary: #fff;
+    --font-color-secondary-value: #fff;
+    --font-color-secondary: hsl(from var(--font-color-secondary-value) h s calc(l - 25%));
+    --font-link-primary: #595c67;
+    --font-link-primary-hover: #8f93a2;
+    --color-primary: #141824;
+    --color-secondary: #090b10;
+
+    --color-primary-lighter-5: hsl(from var(--color-primary) h s calc(l + 5%));
+    --color-primary-lighter-15: hsl(from var(--color-primary) h s calc(l + 15%));
+    --color-primary-lighter-20: hsl(from var(--color-primary) h s calc(l + 20%));
+    --color-primary-darker-4: hsl(from var(--color-primary) h s calc(l - 4%));
+    
+    --font-color-primary-darker-20: hsl(from var(--font-color-primary) h s calc(l - 20%));
+
+    --font-link-primary-lighter-40: hsl(from var(--font-link-primary-lighter-40) h s calc(l + 40%));
+}
+
+@function color($color-name) {
+    @return var(--#{$color-name});
+}
+
+$font-color-primary: var(--font-color-primary); // #e8eaf3;
+//$font-color-secondary: darken(var(--font-color-secondary), 25) ;// darken(#fff, 25);
+//$font-color-secondary: hsl(from var(--font-color-secondary) h s calc(l - 25%));
+$font-color-secondary: color(font-color-secondary); 
+
+$font-link-primary: color(font-link-primary); // #595c67;
+$font-link-primary-hover: color(font-link-primary-hover);// #8f93a2;
+$color-primary: var(--color-primary); // #141824;
+$color-secondary: var(--color-secondary); // #090b10;
 
 $column-color: #0f111a;
 $column-header-background-color: #0c0c10;
@@ -43,8 +70,9 @@ $separator-color:$color-primary;
 $button-size: 30px;
 $button-color: darken(white, 30);
 $button-color-hover: white;
-$button-background-color: $color-primary;
-$button-background-color-hover: lighten($color-primary, 20);
+$button-background-color: --color-primary;
+//$button-background-color-hover: lighten($color-primary, 20);
+$button-background-color-hover: color(color-primary-lighter-20);
 $button-border-color: #303957;
 
 
@@ -86,7 +114,7 @@ $autosuggest-entry-color-hover: #e2e2e2;
 $autosuggest-entry-handle-color-hover: #ffffff;
 
 $scrollbar-color: #08090d;
-$scrollbar-color-thumb: lighten($color-primary, 5);
+$scrollbar-color-thumb: color(color-primary-lighter-5);
 
 $poll-editor-background: #3e455f;
 $poll-editor-background: #32384d;