diff --git a/assets/global.css b/assets/global.css
index eccfd84e7..625d5bf65 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -5,11 +5,24 @@
   --bg-primary-hover: rgba(0, 0, 0, 0.075);
   --bg-primary-accent: #f1f3f5;
   --bg-secondary: black;
-
   --text-primary: black;
   --text-secondary: white;
-
   --text-default: #252f3f;
+
+  --cyan: #50e3c2;
+  --purple: #f81ce5;
+
+  --foreground: #000;
+  --background: #fff;
+  --selection: var(--cyan);
+  --accents-1: #fafafa;
+  --accents-2: #eaeaea;
+  --accents-3: #999999;
+  --accents-4: #888888;
+  --accents-5: #666666;
+  --accents-6: #444444;
+  --accents-7: #333333;
+  --accents-8: #111111;
 }
 
 [data-theme='dark'] {
@@ -17,11 +30,21 @@
   --bg-secondary: white;
   --bg-primary-hover: rgba(255, 255, 255, 0.075);
   --bg-primary-accent: #111;
-
   --text-primary: white;
   --text-secondary: black;
-
   --text-default: white;
+
+  --foreground: #fff;
+  --background: #000;
+  --selection: var(--purple);
+  --accents-8: #fafafa;
+  --accents-7: #eaeaea;
+  --accents-6: #999999;
+  --accents-5: #888888;
+  --accents-4: #666666;
+  --accents-3: #444444;
+  --accents-2: #333333;
+  --accents-1: #111111;
 }
 
 .fit {
diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index 92fd2685b..b63471c38 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -68,7 +68,7 @@ const CartSidebarView: FC = () => {
           <h2 className="pt-6 text-2xl font-bold tracking-wide text-center">
             Your cart is empty
           </h2>
-          <p className="text-accent-3 px-10 text-center pt-2">
+          <p className="text-accents-3 px-10 text-center pt-2">
             Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
           </p>
         </div>
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 7c7f224c7..9dca68e46 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -27,7 +27,7 @@ const Avatar: FC<Props> = ({}) => {
 
   return (
     <div
-      className="inline-block h-8 w-8 rounded-full border border-accent-8"
+      className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
       style={{
         backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
       }}
diff --git a/components/core/Searchbar/Searchbar.module.css b/components/core/Searchbar/Searchbar.module.css
index 413c97e42..41fedd0f8 100644
--- a/components/core/Searchbar/Searchbar.module.css
+++ b/components/core/Searchbar/Searchbar.module.css
@@ -1,5 +1,5 @@
 .input {
-  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accent-4 pr-10;
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg  placeholder-accents-4 pr-10;
   min-width: 300px;
 }
 
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 8e59fea27..fc27d5022 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -18,5 +18,5 @@
 }
 
 .loading {
-  @apply bg-accent-1 text-accent-3 border-accent-2 cursor-not-allowed;
+  @apply bg-accents-1 text-accents-3 border-accents-2 cursor-not-allowed;
 }
diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css
index 0a8fe5bf0..abfa9af65 100644
--- a/components/ui/LoadingDots/LoadingDots.module.css
+++ b/components/ui/LoadingDots/LoadingDots.module.css
@@ -14,7 +14,7 @@
   @apply inline-flex text-center items-center leading-7;
 
   & span {
-    @apply bg-accent-6 rounded-full h-2 w-2;
+    @apply bg-accents-6 rounded-full h-2 w-2;
     animation-name: blink;
     animation-duration: 1.4s;
     animation-iteration-count: infinite;
diff --git a/tailwind.config.js b/tailwind.config.js
index 8a4316ecd..9bd1a5fdf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,14 +14,14 @@ module.exports = {
         075: '0.75',
       },
       colors: {
-        'accent-1': '#FAFAFA',
-        'accent-2': '#eaeaea',
-        'accent-3': '#999999',
-        'accent-4': '#888',
-        'accent-5': '#666666',
-        'accent-6': '#444444',
-        'accent-7': '#333333',
-        'accent-8': '#111111',
+        'accents-1': 'var(--accents-1)',
+        'accents-2': 'var(--accents-2)',
+        'accents-3': 'var(--accents-3)',
+        'accents-4': 'var(--accents-4)',
+        'accents-5': 'var(--accents-5)',
+        'accents-6': 'var(--accents-6)',
+        'accents-7': 'var(--accents-7)',
+        'accents-8': 'var(--accents-8)',
         violet: '#7928CA',
         pink: '#FF0080',
         cyan: '#50E3C2',