diff --git a/src/renderer/assets/styles/bookDetailsDialog.css b/src/renderer/assets/styles/bookDetailsDialog.css
index 73082aba0..8322a0410 100644
--- a/src/renderer/assets/styles/bookDetailsDialog.css
+++ b/src/renderer/assets/styles/bookDetailsDialog.css
@@ -251,7 +251,7 @@
   border: none;
   height: 35px;
   background-color: transparent;
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
   border-bottom: 1px solid #c1c1c1;
 }
diff --git a/src/renderer/assets/styles/components/breadcrumb.css b/src/renderer/assets/styles/components/breadcrumb.css
index 15639af50..ed271091f 100644
--- a/src/renderer/assets/styles/components/breadcrumb.css
+++ b/src/renderer/assets/styles/components/breadcrumb.css
@@ -15,7 +15,8 @@
   font-size: 16px;
   display: flex;
   align-items: center;
-  color: rgb(59, 59, 59);
+  /* color: rgb(59, 59, 59); */
+  color: var(--color-accent);
   position: fixed;
   top: 123px;
   width: calc(100% - 120px);
diff --git a/src/renderer/assets/styles/components/buttons.css b/src/renderer/assets/styles/components/buttons.css
index 28a9faf34..baa6c0e6a 100644
--- a/src/renderer/assets/styles/components/buttons.css
+++ b/src/renderer/assets/styles/components/buttons.css
@@ -49,7 +49,7 @@ button {
   background: none;
   border: 0;
   height: 30px;
-  fill: black;
+  fill: var(--color-primary);
   cursor: pointer;
 
   &:hover {
@@ -88,6 +88,7 @@ button {
     height: 14px;
     margin-right: 8px;
     transition: all 0.2s;
+    fill: var(--color-primary);
   }
 
   &.icon_end {
@@ -121,12 +122,14 @@ button {
     width: 14px;
     vertical-align: -2px;
     margin-left: 5px;
+    fill: var(--color-primary);
+
   }
 
   &.button_icon {
     height: 16px;
     padding: 8px 20px;
-    background: white;
+    background: var(--color-secondary);
     overflow: visible;
 
     & input {
@@ -212,7 +215,7 @@ button {
 .button_transparency,
 .button_transparency_icon {
   display: inline-block;
-  color: #000;
+  color: var(--color-primary);
   transition: all 0.2s;
   border-radius: 5px;
   background: rgba(0, 0, 0, 0);
@@ -220,6 +223,9 @@ button {
   font-family: "Arial", sans-serif;
   font-weight: 600;
   cursor: pointer;
+  & svg {
+    fill: var(--color-primary);
+  }
 
   &:hover {
     background: rgba(0, 0, 0, 0.1);
diff --git a/src/renderer/assets/styles/components/dropdown.css b/src/renderer/assets/styles/components/dropdown.css
index e26a6c11c..5031a83a5 100644
--- a/src/renderer/assets/styles/components/dropdown.css
+++ b/src/renderer/assets/styles/components/dropdown.css
@@ -101,7 +101,7 @@
   & a,
   & span label {
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
     padding: 0.7rem;
     text-align: center;
     cursor: pointer;
diff --git a/src/renderer/assets/styles/components/inputs.css b/src/renderer/assets/styles/components/inputs.css
index 5545a9f33..860195eb0 100644
--- a/src/renderer/assets/styles/components/inputs.css
+++ b/src/renderer/assets/styles/components/inputs.css
@@ -66,7 +66,7 @@ input[type="search"] {
   border-radius: 0;
 
   /* outline: inherit; */
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
 
   &::placeholder {
@@ -153,6 +153,7 @@ form[role="search"] {
     font-size: 16px;
     height: 1.2rem;
     width: 14rem;
+    color: var(--color-secondary);
     background: var(--color-medium-grey);
     cursor: pointer;
 
diff --git a/src/renderer/assets/styles/components/modals.css b/src/renderer/assets/styles/components/modals.css
index 45ce398b4..cbf229372 100644
--- a/src/renderer/assets/styles/components/modals.css
+++ b/src/renderer/assets/styles/components/modals.css
@@ -47,11 +47,11 @@
   z-index: 102;
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background-color: var(--color-secondary);
   overflow-y: auto;
   overflow-x: hidden;
   align-content: flex-start;
-  color: #3b3b3b;
+  color: var(--color-primary);;
   position: relative;
   box-sizing: border-box;
 
diff --git a/src/renderer/assets/styles/components/publications.css b/src/renderer/assets/styles/components/publications.css
index 0bc131a01..0c1d91269 100644
--- a/src/renderer/assets/styles/components/publications.css
+++ b/src/renderer/assets/styles/components/publications.css
@@ -79,7 +79,8 @@
       overflow: hidden;
       text-align: center;
       margin: 10px 5%;
-      color: black;
+      color: var(--color-primary);
+      ;
 
       &:not(:first-child) {
         font-size: 90%;
@@ -373,7 +374,8 @@
   & a,
   & span label {
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
+    ;
     padding: 0.7rem;
     text-align: center;
     cursor: pointer;
@@ -432,7 +434,7 @@
     overflow: hidden;
     text-align: center;
     margin: 10px 5%;
-    color: black;
+    color: var(--color-primary);
   }
 
   & .box {
diff --git a/src/renderer/assets/styles/components/tags.css b/src/renderer/assets/styles/components/tags.css
index d0d9fc9eb..bf1f7aca6 100644
--- a/src/renderer/assets/styles/components/tags.css
+++ b/src/renderer/assets/styles/components/tags.css
@@ -57,7 +57,7 @@
   border: none;
   height: 35px;
   background-color: transparent;
-  color: black;
+  color: var(--color-primary);
   font-size: 0.9rem;
   border-bottom: 1px solid #c1c1c1;
 
diff --git a/src/renderer/assets/styles/global.css b/src/renderer/assets/styles/global.css
index d3e2d294f..aafb53c63 100644
--- a/src/renderer/assets/styles/global.css
+++ b/src/renderer/assets/styles/global.css
@@ -125,6 +125,7 @@
 
 :root {
   user-select: none;
+  color: var(--color-primary);
 }
 
 *,
@@ -165,6 +166,15 @@ nav + nav + .breadcrumb + .main {
   top: 181px;
 }
 
+table > * {
+  background-color: var(--color-light-grey);
+  color: black !important;
+}
+
+table tr td {
+  border-bottom: 1px solid black;
+}
+
 /* ============== FAST CLASS ================= */
 
 .anchor_link {
diff --git a/src/renderer/assets/styles/header.css b/src/renderer/assets/styles/header.css
index 680753033..5cf63c162 100644
--- a/src/renderer/assets/styles/header.css
+++ b/src/renderer/assets/styles/header.css
@@ -41,8 +41,8 @@
       margin-right: 60px;
 
       &.active {
-        color: black;
-        border-bottom: 3px solid black;
+        color: var(--color-primary);
+        border-bottom: 3px solid var(--color-primary);
         padding-bottom: 15px;
       }
     }
@@ -87,7 +87,7 @@
     border: none;
     height: 35px;
     background-color: transparent;
-    color: black;
+    color: var(--color-primary);
     font-size: 0.9rem;
   }
 
diff --git a/src/renderer/library/components/settings/_screenSizes.scss b/src/renderer/assets/styles/partials/_screenSizes.scss
similarity index 100%
rename from src/renderer/library/components/settings/_screenSizes.scss
rename to src/renderer/assets/styles/partials/_screenSizes.scss
diff --git a/src/renderer/assets/styles/partials/mixins.css b/src/renderer/assets/styles/partials/mixins.css
index c56c82432..fd8f2c448 100644
--- a/src/renderer/assets/styles/partials/mixins.css
+++ b/src/renderer/assets/styles/partials/mixins.css
@@ -25,10 +25,10 @@
 @define-mixin button_primary {
   position: relative;
   display: inline;
-  border: 1px solid black;
+  border: 1px solid var(--color-primary);
   border-radius: 5px;
   text-align: center;
-  color: black;
+  color:  var(--color-primary);
   text-decoration: none;
   overflow: hidden;
   cursor: pointer;
diff --git a/src/renderer/assets/styles/reader-app.css b/src/renderer/assets/styles/reader-app.css
index f27a83494..f35891f98 100644
--- a/src/renderer/assets/styles/reader-app.css
+++ b/src/renderer/assets/styles/reader-app.css
@@ -464,7 +464,7 @@ button {
       }
 
       & > .active {
-        color: black;
+        color: var(--color-primary);
         border-bottom: 3px solid black;
         padding-bottom: 15px;
       }
@@ -1266,7 +1266,7 @@ input[type=radio] + label {
   left: 50%;
   background: white;
   font-size: 16px;
-  color: black;
+  color: var(--color-primary);
   text-align: center;
   box-shadow: 0 0 46px 0 rgba(0, 0, 0, 0.12);
   transform: translateX(-50%) translateY(0%);
diff --git a/src/renderer/library/components/settings/_settings.scss b/src/renderer/library/components/settings/_settings.scss
index 7a06c0655..498da3bbe 100644
--- a/src/renderer/library/components/settings/_settings.scss
+++ b/src/renderer/library/components/settings/_settings.scss
@@ -1,5 +1,5 @@
 @use "./variable" as c;
-@use "./screenSizes" as s;
+@use "readium-desktop/renderer/assets/styles/partials/screenSizes" as s;
 
 #settings-container {
     display: inline-flex;
@@ -16,7 +16,7 @@
                 background-color: lighten(c.$color-primary, 10%);
                 color: white;
                 }
-                @media only screen and (min-width: s.$large) {
+                @media screen and (min-width: s.$large) {
                     display: grid;
                     grid-template-columns: repeat(5, 1fr);
                     label {
@@ -44,7 +44,7 @@
             text-align: center;
         }
 }
-@media only screen and (min-width: s.$large) {
+@media screen and (min-width: s.$large) {
     display: block;
 }
 }