diff --git a/dashmachine/static/css/global/dashmachine-theme.css b/dashmachine/static/css/global/dashmachine-theme.css
index f8e3f5b..318e1d3 100644
--- a/dashmachine/static/css/global/dashmachine-theme.css
+++ b/dashmachine/static/css/global/dashmachine-theme.css
@@ -12,6 +12,7 @@
   --theme-color-font-muted: rgba(44, 47, 58, 0.85);
   --theme-color-font-muted2: rgba(44, 47, 58, 0.65);
   --theme-warning: #f44336;
+  --theme-on-primary: #fff;
 }
 [data-theme="dark"] {
   --theme-background: #1c1c1c;
@@ -43,27 +44,34 @@
 }
 [data-accent="lightBlue"] {
   --theme-primary: #03a9f4;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="cyan"] {
   --theme-primary: #00bcd4;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="teal"] {
   --theme-primary: #009688;
 }
 [data-accent="green"] {
   --theme-primary: #4caf50;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="lightGreen"] {
   --theme-primary: #8bc34a;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="lime"] {
   --theme-primary: #cddc39;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="yellow"] {
   --theme-primary: #ffeb3b;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="amber"] {
   --theme-primary: #ffc107;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="deepOrange"] {
   --theme-primary: #ff5722;
@@ -73,6 +81,7 @@
 }
 [data-accent="grey"] {
   --theme-primary: #9e9e9e;
+  --theme-on-primary: #2c2f3a;
 }
 [data-accent="blueGrey"] {
   --theme-primary: #607d8b;
@@ -125,4 +134,10 @@
 }
 .theme-surface-transparent1 {
   background: rgba(var(--theme-surface-rgb), 0.9) !important;
+}
+.theme-on-primary {
+  background-color: var(--theme-on-primary) !important;
+}
+.theme-on-primary-text {
+  color: var(--theme-on-primary) !important;
 }
\ No newline at end of file
diff --git a/dashmachine/static/css/global/dashmachine.css b/dashmachine/static/css/global/dashmachine.css
index 439d717..e8c14b2 100644
--- a/dashmachine/static/css/global/dashmachine.css
+++ b/dashmachine/static/css/global/dashmachine.css
@@ -626,6 +626,15 @@ input:disabled {
     top: unset;
     bottom: 10px;
 }
+.sidenav-active-rounded .sidenav li > a.active > i {
+    color: var(--theme-on-primary) !important;
+}
+.sidenav-active-rounded .sidenav li > a.active > span {
+    color: var(--theme-on-primary) !important;
+}
+.sidenav-active-rounded .sidenav li > a.active {
+    min-width: 3.6rem;
+}
 
 .border-bottom-1 {
     border-bottom: 1px solid var(--theme-background);
@@ -730,7 +739,7 @@ span.badge.new {
 }
 
 .icon-btn:hover {
-    color: white !important;
+    color: var(--theme-on-primary) !important;
     background-color: var(--theme-primary);
     border-radius: 24px;
     padding: 5px;
diff --git a/dashmachine/templates/global_macros.html b/dashmachine/templates/global_macros.html
index 979281c..b5b3d5b 100644
--- a/dashmachine/templates/global_macros.html
+++ b/dashmachine/templates/global_macros.html
@@ -52,7 +52,7 @@ icon=None,
 float="right",
 href=None
 )%}
-    <a class="waves-effect waves-light btn {{class}} {{float}}"
+    <a class="waves-effect waves-light btn {{class}} {{float}} theme-on-primary-text"
             {% if id %}
        id="{{id}}"
             {% endif %}
diff --git a/dashmachine/templates/main/layout.html b/dashmachine/templates/main/layout.html
index efd9786..585c4ec 100644
--- a/dashmachine/templates/main/layout.html
+++ b/dashmachine/templates/main/layout.html
@@ -8,7 +8,7 @@
 
 {% block sidenav %}
     <div id="show-sidenav" class="draggable z-depth-1 hide">
-        <i class="material-icons-outlined white-text pointer">chevron_right</i>
+        <i class="material-icons-outlined theme-on-primary-text pointer">chevron_right</i>
     </div>
     <!-- BEGIN: SideNav-->
     <aside id="main-sidenav" class="sidenav-main nav-collapsed nav-collapsible sidenav-light sidenav-active-rounded z-depth-2">
@@ -49,7 +49,11 @@
             {% endfor %}
 
         </ul>
-                <div class="navigation-background"></div><a id="sidenav-mobile-toggle-btn" class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary" href="#" data-target="slide-out"><i class="material-icons-outlined">menu</i></a>
+               <a id="sidenav-mobile-toggle-btn"
+                  class="sidenav-trigger btn-sidenav-toggle btn-floating btn-medium waves-effect waves-light hide-on-large-only theme-primary"
+                  href="#" data-target="slide-out">
+                   <i class="material-icons-outlined theme-on-primary-text">menu</i>
+               </a>
     </aside>
     <!-- END: SideNav-->
 
diff --git a/dashmachine/templates/settings_system/files.html b/dashmachine/templates/settings_system/files.html
index 49aec0a..b379fed 100644
--- a/dashmachine/templates/settings_system/files.html
+++ b/dashmachine/templates/settings_system/files.html
@@ -9,7 +9,7 @@
 <div class="row">
     <div class="col s12">
         <ul class="collection with-header">
-            <li class="collection-header theme-primary white-text">Backgrounds</li>
+            <li class="collection-header theme-primary theme-on-primary-text">Backgrounds</li>
             {% if backgrounds %}
                 {% for background in backgrounds %}
                     <li class="collection-item pt-2 pb-2 avatar">
@@ -36,7 +36,7 @@
 <div class="row">
     <div class="col s12">
         <ul class="collection with-header">
-            <li class="collection-header theme-primary white-text">Icons</li>
+            <li class="collection-header theme-primary theme-on-primary-text">Icons</li>
             {% if icons %}
                 {% for icon in icons %}
                     <li class="collection-item pt-2 pb-2 avatar">