diff --git a/source/scss/components/_listenbrainz.scss b/source/scss/components/_listenbrainz.scss
index e62dd49..514007a 100644
--- a/source/scss/components/_listenbrainz.scss
+++ b/source/scss/components/_listenbrainz.scss
@@ -1,14 +1,14 @@
 .listenbrainz a {
   align-items: center;
-  border: 2px solid #fff;
+  border: 2px solid var(--foreground-1);
   display: flex;
   margin-top: 1rem;
   padding: 1rem;
 
   &:hover {
-    background-color: #fff;
-    border-color: #fff;
-    color: #000;
+    background-color: var(--foreground-1);
+    border-color: var(--foreground-1);
+    color: var(--background-1);
   }
 
   img {
diff --git a/source/scss/components/_page-main.scss b/source/scss/components/_page-main.scss
index 1ce5dd1..4881fd2 100644
--- a/source/scss/components/_page-main.scss
+++ b/source/scss/components/_page-main.scss
@@ -12,14 +12,14 @@
 
     a {
       border: 2px solid;
-      color: #fff;
+      color: var(--foreground-1);
       padding: 1rem;
       text-decoration: none;
 
       &:hover {
-        background-color: #fff;
-        border-color: #fff;
-        color: #000;
+        background-color: var(--foreground-1);
+        border-color: var(--foreground-1);
+        color: var(--background-1);
       }
     }
   }
diff --git a/source/scss/components/_userstyles.scss b/source/scss/components/_userstyles.scss
index 456200c..f5ae5a3 100644
--- a/source/scss/components/_userstyles.scss
+++ b/source/scss/components/_userstyles.scss
@@ -6,7 +6,7 @@
   padding: 0;
 
   .style {
-    border: 2px solid #fff;
+    border: 2px solid var(--foreground-1);
     padding: 1rem;
 
     .header {
@@ -26,9 +26,9 @@
         text-decoration: none;
 
         &:hover {
-          background-color: #fff;
-          border-color: #fff;
-          color: #000;
+          background-color: var(--foreground-1);
+          border-color: var(--foreground-1);
+          color: var(--background-1);
         }
       }
     }
diff --git a/source/scss/index.scss b/source/scss/index.scss
index e2420e1..1f84836 100644
--- a/source/scss/index.scss
+++ b/source/scss/index.scss
@@ -5,14 +5,17 @@ html {
 }
 
 body {
-  background-color: #000;
-  color: #fff;
+  --background-1: #000;
+  --foreground-1: #fff;
+
+  background-color: var(--background-1);
+  color: var(--foreground-1);
   font-family: sans-serif;
   font-size: 2rem;
 }
 
 a {
-  color: #fff;
+  color: var(--foreground-1);
   font-weight: bold;
 }
 
@@ -25,7 +28,7 @@ button {
 }
 
 .divider {
-  border-top: 2px solid #fff;
+  border-top: 2px solid var(--foreground-1);
   margin-bottom: 1rem;
   margin-top: 1rem;
 }