diff --git a/src/index.scss b/src/index.scss
index 59fff98..10f0343 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -81,14 +81,15 @@
   --ic-danger-normal: rgba(240, 71, 71, 0.7);
 
   /* user mxid colors */
-  --mx-uc-1: hsl(208, 66%, 53%);
-  --mx-uc-2: hsl(302, 49%, 45%);
-  --mx-uc-3: hsl(163, 97%, 36%);
-  --mx-uc-4: hsl(343, 75%, 61%);
-  --mx-uc-5: hsl(24, 100%, 59%);
-  --mx-uc-6: hsl(181, 63%, 47%);
-  --mx-uc-7: hsl(242, 89%, 65%);
-  --mx-uc-8: hsl(94, 65%, 50%);
+  /* Thanks: Gruvbox Material Light */
+  --mx-uc-1: #af2528;
+  --mx-uc-2: #b94c07;
+  --mx-uc-3: #b4730e;
+  --mx-uc-4: #72761e;
+  --mx-uc-5: #477a5b;
+  --mx-uc-6: #266b79;
+  --mx-uc-7: #924f79;
+  --mx-uc-8: #af2528;
 
   /* system icon size | -ic-[size]: value */
   --ic-large: 38px;
@@ -231,6 +232,16 @@
   --bg-ping-hover: hsla(137deg, 100%, 38%, 50%);
   --bg-divider: hsla(0, 0%, 100%, .1);
 
+  /* user mxid colors (dark theme) */
+  /* Thanks: Gruvbox Material Dark */
+  --mx-uc-1: #f2594b;
+  --mx-uc-2: #f28534;
+  --mx-uc-3: #e9b143;
+  --mx-uc-4: #b0b846;
+  --mx-uc-5: #8bba7f;
+  --mx-uc-6: #80aa9e;
+  --mx-uc-7: #d3869b;
+  --mx-uc-8: #f2594b;
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgba(255, 255, 255, 98%);
@@ -251,18 +262,6 @@
   --ic-surface-normal: rgba(255, 255, 255, 84%);
   --ic-surface-low: rgba(255, 255, 255, 64%);
   --ic-primary-normal: #ffffff;
-
-  & .text {
-    /* override user mxid colors for texts */
-    --mx-uc-1: hsl(208, 100%, 58%);
-    --mx-uc-2: hsl(301, 80%, 70%);
-    --mx-uc-3: hsl(163, 93%, 41%);
-    --mx-uc-4: hsl(343, 91%, 66%);
-    --mx-uc-5: hsl(24, 90%, 67%);
-    --mx-uc-6: hsl(181, 90%, 50%);
-    --mx-uc-7: hsl(243, 100%, 74%);
-    --mx-uc-8: hsl(94, 66%, 50%);
-  }
   
   /* shadow and overlay */
   --bg-overlay: rgba(0, 0, 0, 60%);