diff --git a/components/calendar/CalendarEventDetails.vue b/components/calendar/CalendarEventDetails.vue
index 1da2745..5707fba 100644
--- a/components/calendar/CalendarEventDetails.vue
+++ b/components/calendar/CalendarEventDetails.vue
@@ -50,7 +50,7 @@ function handleGotoRelativeEvent(position: 'next' | 'prev' = 'next') {
 
 <template>
   <UiPopoverContent
-    class="event-details w-96"
+    class="event-details w-96 bg-slate-900"
     :align="'center'"
     :align-offset="50"
     :side="'left'"
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ea01d6..81727a1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,7 +13,7 @@ module.exports = {
     "./app.vue",
     "./error.vue",
   ],
-  
+
   theme: {
     container: {
       center: true,
@@ -92,5 +92,23 @@ module.exports = {
   },
   plugins: [
     animate,
+    function ({ addBase, theme }) {
+      function extractColorVars(colorObj, colorGroup = '') {
+        return Object.keys(colorObj).reduce((vars, colorKey) => {
+          const value = colorObj[colorKey]
+
+          const newVars =
+            typeof value === 'string'
+              ? { [`--color${colorGroup}-${colorKey}`]: value }
+              : extractColorVars(value, `-${colorKey}`)
+
+          return { ...vars, ...newVars }
+        }, {})
+      }
+
+      addBase({
+        ':root': extractColorVars(theme('colors'))
+      })
+    }
   ]
-}
\ No newline at end of file
+}