diff --git a/common/color_definitions.scss b/common/color_definitions.scss
new file mode 100644
index 0000000..aee4064
--- /dev/null
+++ b/common/color_definitions.scss
@@ -0,0 +1,3 @@
+:root {
+  --material-lighter-secondary: lighten($secondary, 10%);
+}
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 3abd263..50ddaef 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -17,13 +17,7 @@
 // make header icons semi-translucent
 .d-header-icons {
   .d-icon {
-    color: rgba(
-      dark-light-choose(
-        scale-color($header_primary, $lightness: 50%),
-        $header_primary
-      ),
-      0.7
-    );
+    color: rgba(var(--header_primary-rgb), 0.7);
   }
 }
 
@@ -34,7 +28,7 @@
 .topic-list,
 .latest-topic-list {
   @include boxShadow;
-  background-color: lighten($secondary, 10%);
+  background-color: var(--material-lighter-secondary);
 }
 
 //underline navigation links
@@ -64,7 +58,7 @@
 //create conversation cards
 .topic-body {
   @include boxShadow;
-  background-color: lighten($secondary, 10%);
+  background-color: var(--material-lighter-secondary);
   margin-top: 10px;
   border-radius: 4px;
   padding: 15px 20px 0 20px;
@@ -213,7 +207,7 @@
 //cards for search results
 .fps-result {
   @include boxShadow;
-  background-color: lighten($secondary, 10%);
+  background-color: var(--material-lighter-secondary);
   margin-top: 10px;
   padding: 20px;
   border-radius: 4px;
@@ -224,7 +218,7 @@
     background-color: lighten($tertiary, 20%);
   }
   100% {
-    background-color: lighten($secondary, 10%);
+    background-color: var(--material-lighter-secondary);
   }
 }