Working on dynamic theme

uno.config.ts

@@ -1,8 +1,9 @@
 import {
   defineConfig, presetAttributify, presetIcons,
   presetTypography, presetUno, presetWind,
-  transformerDirectives, transformerVariantGroup,
 } from 'unocss'
+import transformerVariantGroup from '@unocss/transformer-variant-group'
+import transformerDirectives from '@unocss/transformer-directives'
 import { presetScrollbar } from 'unocss-preset-scrollbar'
 import { ColorsTheme } from './types'
 
@@ -13,16 +14,21 @@ export default defineConfig({
     presetIcons(),
     presetTypography(),
     presetScrollbar(),
-    presetWind(),
+    presetWind({
+      dark: 'class',
+    }),
   ],
   transformers: [
     transformerDirectives(),
     transformerVariantGroup(),
   ],
   safelist: [
+    // Theme text colors
     ...Object.values(ColorsTheme).map(color => `text-${color}-500`),
-    'text-white', 'text-black',
+    ...'bg-black dark:bg-white dark:text-black text-white'.split(' '),
+
+    // Theme background colors
     ...Object.values(ColorsTheme).map(color => `bg-${color}-500`),
-    'bg-white', 'bg-black',
+    ...'text-black dark:text-white'.split(' '),
   ],
 })