diff --git a/src/assets/icons/help-outline.svg b/src/assets/icons/help-outline.svg
index 2fd05c3..c0271f7 100644
--- a/src/assets/icons/help-outline.svg
+++ b/src/assets/icons/help-outline.svg
@@ -1,10 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Help-Mode" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="01.-Help-button" transform="translate(-1408.000000, -645.000000)" fill="#283241" fill-rule="nonzero">
+<svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg"
+>
+    <g fill="none" fill-rule="evenodd" id="Help-Mode" stroke="none" stroke-width="1">
+        <g fill="currentColor" fill-rule="nonzero" id="01.-Help-button" transform="translate(-1408.000000, -645.000000)">
             <g id="help-button" transform="translate(1294.000000, 635.000000)">
                 <g id="help" transform="translate(114.000000, 10.000000)">
-                    <path d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
+                    <path
+                        d="M10,0 C15.5,1.01033361e-15 20,4.5 20,10 C20,15.5 15.5,20 10,20 C4.5,20 3.55271368e-15,15.5 3.55271368e-15,10 C7.10542736e-15,4.5 4.5,-1.01033361e-15 10,0 Z M10,2 C5.6,2 2,5.6 2,10 C2,14.4 5.6,18 10,18 C14.4,18 18,14.4 18,10 C18,5.6 14.4,2 10,2 Z M10.86,12.9 L10.86,14.9 L8.86,14.9 L8.86,12.9 L10.86,12.9 Z M9.86,4.9 C11.56,4.9 12.86,6.2 12.86,7.9 C12.86,8.8 12.36,9.7 11.66,10.3 C11.3830769,10.4846154 10.9357396,10.839645 10.8685571,11.4437415 L10.86,11.6 L10.86,11.9 L8.86,11.9 L8.86,11.6 C8.86,10.5 9.46,9.4 10.46,8.7 C10.76,8.5 10.86,8.2 10.86,7.9 C10.86,7.3 10.46,6.9 9.86,6.9 C9.30285714,6.9 8.91816327,7.24489796 8.86604956,7.77456268 L8.86,7.9 L6.86,7.9 C6.86,6.2 8.16,4.9 9.86,4.9 Z"></path>
                 </g>
             </g>
         </g>
diff --git a/src/assets/icons/list.svg b/src/assets/icons/list.svg
index ab4457d..2ae2446 100644
--- a/src/assets/icons/list.svg
+++ b/src/assets/icons/list.svg
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg height="14px" version="1.1" viewBox="0 0 14 14" width="14px" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd" id="Styleguide" stroke="none" stroke-width="1">
-        <g fill="#283241" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
+        <g fill="currentColor" fill-rule="nonzero" id="Styleguide-Actions" transform="translate(-979.000000, -294.000000)">
             <g id="list" transform="translate(969.000000, 284.000000)">
                 <g id="list-view" transform="translate(10.000000, 10.000000)">
                     <path
diff --git a/src/assets/styles/_common-mixins.scss b/src/assets/styles/_common-mixins.scss
index 7034d9f..4cf6984 100644
--- a/src/assets/styles/_common-mixins.scss
+++ b/src/assets/styles/_common-mixins.scss
@@ -21,7 +21,7 @@
 }
 
 @mixin scroll-bar {
-    scrollbar-color: var(--iqser-quick-filter-border) var(--iqser-grey-2);
+    scrollbar-color: var(--iqser-grey-5) var(--iqser-grey-2);
     scrollbar-width: thin;
 
     &::-webkit-scrollbar {
@@ -35,7 +35,7 @@
 
     /* Handle */
     &::-webkit-scrollbar-thumb {
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-grey-5);
     }
 }
 
diff --git a/src/assets/styles/_common-variables.scss b/src/assets/styles/_common-variables.scss
index 5f2f1c8..03e7587 100644
--- a/src/assets/styles/_common-variables.scss
+++ b/src/assets/styles/_common-variables.scss
@@ -1,11 +1,13 @@
 @use 'sass:meta';
 
-:root {
+body {
     --iqser-primary: lightblue;
     --iqser-primary-rgb: 220, 230, 234;
     --iqser-primary-2: orange;
     --iqser-accent: blue;
     --iqser-accent-rgb: 123, 234, 111;
+    --iqser-background: white;
+    --iqser-text: black;
     --iqser-disabled: #9398a0;
     --iqser-not-disabled-table-item: #f9fafb;
     --iqser-btn-bg-hover: #e2e4e9;
@@ -15,18 +17,15 @@
     --iqser-black: black;
     --iqser-light: white;
     --iqser-separator: rgba(226, 228, 233, 0.9);
-    --iqser-quick-filter-border: #d3d5da;
-    --iqser-grey-1: #283241;
-    --iqser-grey-2: #f4f5f7;
-    --iqser-grey-3: #aaacb3;
-    --iqser-grey-4: #e2e4e9;
-    --iqser-grey-5: #d3d5da;
-    --iqser-grey-6: #f0f1f4;
-    --iqser-grey-7: #9398a0;
-    --iqser-grey-8: #f9fafb;
-    --iqser-grey-9: #f5f5f7;
-    --iqser-grey-10: #313d4e;
-    --iqser-grey-11: #ecedf0;
+    --iqser-grey-1: #283241; // ebony clay
+    --iqser-grey-10: #313d4e; // oxford blue - manual only
+    --iqser-grey-7: #9398a0; // manatee
+    --iqser-grey-3: #aaacb3; // aluminium
+    --iqser-grey-5: #d3d5da; // iron
+    --iqser-grey-4: #e2e4e9; // athens gray
+    --iqser-grey-6: #f0f1f4; // athens gray
+    --iqser-grey-2: #f4f5f7; // athens gray
+    --iqser-grey-8: #f9fafb; // athens gray
     --iqser-green-1: #00ff00;
     --iqser-green-2: #5ce594;
     --iqser-orange-1: #ff801a;
@@ -44,8 +43,16 @@
     --iqser-helpmode-primary: green;
 }
 
-@mixin configure($args...) {
-    :root {
+@mixin configureLight($args...) {
+    body.light {
+        @each $name, $value in meta.keywords($args) {
+            --#{$name}: #{$value};
+        }
+    }
+}
+
+@mixin configureDark($args...) {
+    body.dark {
         @each $name, $value in meta.keywords($args) {
             --#{$name}: #{$value};
         }
diff --git a/src/assets/styles/common-base-screen.scss b/src/assets/styles/common-base-screen.scss
index ec2c3ef..9922f3d 100644
--- a/src/assets/styles/common-base-screen.scss
+++ b/src/assets/styles/common-base-screen.scss
@@ -8,6 +8,7 @@
     padding: 0 24px;
     border-bottom: 1px solid var(--iqser-separator);
     box-sizing: border-box;
+    background-color: var(--iqser-background);
 
     > *:not(:last-child) {
         margin-right: 50px;
@@ -28,6 +29,7 @@
         letter-spacing: 0;
         line-height: 20px;
         white-space: nowrap;
+        color: var(--iqser-text);
     }
 
     .menu {
diff --git a/src/assets/styles/common-breadcrumbs.scss b/src/assets/styles/common-breadcrumbs.scss
index b8976d7..5756f33 100644
--- a/src/assets/styles/common-breadcrumbs.scss
+++ b/src/assets/styles/common-breadcrumbs.scss
@@ -30,7 +30,7 @@
 
 .breadcrumb {
     text-decoration: none;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-weight: 600;
     width: fit-content;
     white-space: nowrap;
diff --git a/src/assets/styles/common-checkbox.scss b/src/assets/styles/common-checkbox.scss
index 9e9142a..765f013 100644
--- a/src/assets/styles/common-checkbox.scss
+++ b/src/assets/styles/common-checkbox.scss
@@ -19,7 +19,7 @@
 
     .mat-checkbox-label {
         font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
 
         display: flex;
         align-items: center;
diff --git a/src/assets/styles/common-components.scss b/src/assets/styles/common-components.scss
index 51592da..4598a4f 100644
--- a/src/assets/styles/common-components.scss
+++ b/src/assets/styles/common-components.scss
@@ -24,6 +24,7 @@
 
     &.gray-dark {
         background-color: var(--iqser-grey-6);
+        color: var(--iqser-accent);
     }
 
     &.gray-primary {
@@ -33,6 +34,7 @@
 
     &.lightgray-dark {
         background-color: var(--iqser-grey-4);
+        color: var(--iqser-accent);
     }
 
     &.lightgray-primary {
@@ -57,6 +59,7 @@
 
     &.white-dark {
         border: 1px solid var(--iqser-grey-4);
+        color: var(--iqser-accent);
     }
 
     &.inactive {
@@ -97,6 +100,7 @@
 
         &.warn {
             background-color: rgba(var(--iqser-yellow-rgb), 0.7);
+            color: var(--iqser-accent);
         }
 
         &.error {
diff --git a/src/assets/styles/common-full-pages.scss b/src/assets/styles/common-full-pages.scss
index 3b37d46..b83f25a 100644
--- a/src/assets/styles/common-full-pages.scss
+++ b/src/assets/styles/common-full-pages.scss
@@ -6,7 +6,7 @@
 
 .full-page-section {
     opacity: 0.7;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
     z-index: 900;
 }
 
diff --git a/src/assets/styles/common-inputs.scss b/src/assets/styles/common-inputs.scss
index 7fff6a7..c9c540b 100644
--- a/src/assets/styles/common-inputs.scss
+++ b/src/assets/styles/common-inputs.scss
@@ -21,10 +21,10 @@ form .iqser-input-group:not(first-of-type) {
         position: absolute;
         left: 114px;
         bottom: 1px;
-        background: var(--iqser-quick-filter-border);
+        background: var(--iqser-grey-5);
         height: 34px;
         width: 34px;
-        border-left: 1px solid var(--iqser-quick-filter-border);
+        border-left: 1px solid var(--iqser-inputs-border);
         border-top-right-radius: 7px;
         border-bottom-right-radius: 7px;
         cursor: pointer;
@@ -97,10 +97,11 @@ form .iqser-input-group:not(first-of-type) {
         box-sizing: border-box;
         padding-left: 11px;
         padding-right: 11px;
-        border: 1px solid var(--iqser-quick-filter-border);
+        border: 1px solid var(--iqser-inputs-border);
         font-family: Inter, sans-serif;
         font-size: 13px;
-        background-color: #ffffff;
+        background-color: var(--iqser-background);
+        color: var(--iqser-text);
         border-radius: 8px;
         outline: none;
         margin-top: 3px;
@@ -111,11 +112,11 @@ form .iqser-input-group:not(first-of-type) {
         }
 
         &:focus:not(:disabled):not(.mat-select-disabled) {
-            border-color: var(--iqser-accent);
+            border-color: var(--iqser-text);
         }
 
         &::placeholder {
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
             opacity: 0.7;
         }
 
@@ -150,6 +151,11 @@ form .iqser-input-group:not(first-of-type) {
 
         .mat-select-value {
             vertical-align: middle;
+            color: var(--iqser-text);
+        }
+
+        .mat-select-arrow {
+            color: rgba(var(--iqser-text-rgb), 0.7);
         }
     }
 
diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss
index dcd8e4f..d9a2c4a 100644
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@@ -6,7 +6,8 @@ body {
     padding: 0;
     height: 100vh;
     font-family: 'Inter', sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
+    background-color: var(--iqser-background);
     font-size: 13px;
     line-height: 16px;
     display: flex;
@@ -44,7 +45,7 @@ section.settings {
     height: 50px;
     width: 100vw;
     box-sizing: border-box;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
     border-bottom: 1px solid var(--iqser-separator);
 
     .filters {
@@ -121,7 +122,7 @@ section.settings {
     border-radius: 8px;
     margin-top: 40px;
     margin-bottom: 70px;
-    background-color: var(--iqser-white);
+    background-color: var(--iqser-background);
     max-width: 650px;
     height: fit-content;
     box-shadow: 0 1px 5px 0 rgba(40, 50, 65, 0.19);
@@ -158,9 +159,9 @@ section.settings {
 }
 
 .right-container {
-    border-left: 1px solid var(--iqser-grey-4);
+    border-left: 1px solid var(--iqser-separator);
     box-sizing: border-box;
-    background: var(--iqser-white);
+    background: var(--iqser-background);
     overflow: hidden;
     transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s;
 
diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss
index 1d38269..8775cd5 100644
--- a/src/assets/styles/common-menu.scss
+++ b/src/assets/styles/common-menu.scss
@@ -6,6 +6,7 @@
     max-width: none !important;
     min-width: 180px !important;
     margin-top: 10px;
+    background-color: var(--iqser-background);
     @include common-mixins.scroll-bar;
 
     .mat-menu-content:not(:empty) {
@@ -23,7 +24,7 @@
 
     .mat-menu-item {
         font-size: 13px;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
         padding: 0 26px 0 8px;
         margin: 0 8px 2px 8px;
         border-radius: 4px;
@@ -32,6 +33,10 @@
         display: flex;
         align-items: center;
 
+        mat-icon {
+            color: var(--iqser-text);
+        }
+
         .dot {
             right: 8px;
         }
diff --git a/src/assets/styles/common-select.scss b/src/assets/styles/common-select.scss
index d2c7cca..56fee69 100644
--- a/src/assets/styles/common-select.scss
+++ b/src/assets/styles/common-select.scss
@@ -2,6 +2,7 @@
 
 .mat-select-panel {
     padding: 7px 0 !important;
+    background-color: var(--iqser-background);
     @include common-mixins.scroll-bar;
 
     .mat-option {
@@ -15,7 +16,7 @@
 
         &.mat-selected:not(.mat-option-multiple) {
             background-color: rgba(var(--iqser-primary-rgb), 0.2);
-            color: var(--iqser-accent);
+            color: var(--iqser-text);
         }
     }
 }
diff --git a/src/assets/styles/common-side-nav.scss b/src/assets/styles/common-side-nav.scss
index 61c2423..11f2e07 100644
--- a/src/assets/styles/common-side-nav.scss
+++ b/src/assets/styles/common-side-nav.scss
@@ -5,7 +5,7 @@ iqser-side-nav {
     flex-direction: column;
     min-width: 200px;
     max-width: 200px;
-    background-color: var(--iqser-grey-2);
+    background-color: var(--iqser-side-nav);
     border-right: 1px solid var(--iqser-separator);
     box-sizing: border-box;
     padding: 8px;
@@ -24,7 +24,7 @@ iqser-side-nav {
         cursor: pointer;
         transition: background-color 0.2s;
         font-weight: 500;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
         text-decoration: none;
         display: flex;
         align-items: center;
diff --git a/src/assets/styles/common-tabs.scss b/src/assets/styles/common-tabs.scss
index 7bc7308..58051a5 100644
--- a/src/assets/styles/common-tabs.scss
+++ b/src/assets/styles/common-tabs.scss
@@ -26,7 +26,7 @@
     }
 
     &[disabled] {
-        color: rgba(var(--iqser-accent-rgb), 0.3);
+        color: rgba(var(--iqser-text-rgb), 0.3);
         cursor: not-allowed;
     }
 }
diff --git a/src/assets/styles/common-texts.scss b/src/assets/styles/common-texts.scss
index 122ce29..273711f 100644
--- a/src/assets/styles/common-texts.scss
+++ b/src/assets/styles/common-texts.scss
@@ -52,7 +52,7 @@ a {
 
 pre {
     font-family: Inter, sans-serif;
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
 }
 
 .heading-xl {
@@ -95,7 +95,7 @@ pre {
 }
 
 .link-action {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-size: 11px;
     line-height: 14px;
     text-decoration: underline;
@@ -103,12 +103,12 @@ pre {
 
     &:hover {
         text-decoration: none;
-        color: var(--iqser-accent);
+        color: var(--iqser-text);
     }
 }
 
 .large-label {
-    color: var(--iqser-accent);
+    color: var(--iqser-text);
     font-size: 13px;
     line-height: 16px;
 }
diff --git a/src/lib/filtering/quick-filters/quick-filters.component.scss b/src/lib/filtering/quick-filters/quick-filters.component.scss
index e011abd..619ce6c 100644
--- a/src/lib/filtering/quick-filters/quick-filters.component.scss
+++ b/src/lib/filtering/quick-filters/quick-filters.component.scss
@@ -6,7 +6,7 @@
 
 .quick-filter {
     box-sizing: border-box;
-    border: 1px solid var(--iqser-quick-filter-border);
+    border: 1px solid var(--iqser-inputs-border);
     border-radius: 17px;
     background-color: var(--iqser-btn-bg);
     padding: 0 14px;
@@ -17,11 +17,11 @@
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
     }
 
     &.active {
-        background-color: var(--iqser-white);
+        background-color: var(--iqser-background);
         font-weight: 600;
         border: none;
     }
diff --git a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
index 05fc890..6f76799 100644
--- a/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
+++ b/src/lib/help-mode/help-mode-dialog/help-mode-dialog.component.scss
@@ -1,5 +1,5 @@
 section {
-    background: var(--iqser-grey-11);
+    background: var(--iqser-grey-4);
     align-items: center;
 
     .content {
diff --git a/src/lib/inputs/round-checkbox/round-checkbox.component.scss b/src/lib/inputs/round-checkbox/round-checkbox.component.scss
index a87359e..ff18c89 100644
--- a/src/lib/inputs/round-checkbox/round-checkbox.component.scss
+++ b/src/lib/inputs/round-checkbox/round-checkbox.component.scss
@@ -9,8 +9,8 @@
     border-radius: 50%;
 
     &.inactive {
-        border: 1px solid #d3d5da;
-        background-color: var(--iqser-white);
+        border: 1px solid var(--iqser-inputs-border);
+        background-color: var(--iqser-background);
     }
 
     .mat-icon {
diff --git a/src/lib/listing/table-content/table-content.component.scss b/src/lib/listing/table-content/table-content.component.scss
index 568053f..3a65a2b 100644
--- a/src/lib/listing/table-content/table-content.component.scss
+++ b/src/lib/listing/table-content/table-content.component.scss
@@ -3,6 +3,7 @@
 :host cdk-virtual-scroll-viewport {
     height: calc(100vh - 50px - 31px - 111px);
     overflow-y: hidden !important;
+    background-color: var(--iqser-background);
     @include mixins.scroll-bar;
 
     &.no-data {
diff --git a/src/lib/listing/table-content/table-item/table-item.component.scss b/src/lib/listing/table-content/table-item/table-item.component.scss
index 2260b6e..ec0cd43 100644
--- a/src/lib/listing/table-content/table-item/table-item.component.scss
+++ b/src/lib/listing/table-content/table-item/table-item.component.scss
@@ -17,6 +17,7 @@
         border-bottom: 1px solid var(--iqser-separator);
         height: var(--itemSize);
         padding: 0 10px;
+        background-color: var(--iqser-background);
 
         &.center {
             align-items: center;
diff --git a/test.json b/test.json
new file mode 100644
index 0000000..e69de29