diff --git a/generator/konfig-next-app/src/components/OperationRequest.tsx b/generator/konfig-next-app/src/components/OperationRequest.tsx
index d9389872b..01bb1480d 100644
--- a/generator/konfig-next-app/src/components/OperationRequest.tsx
+++ b/generator/konfig-next-app/src/components/OperationRequest.tsx
@@ -43,7 +43,8 @@ export function OperationRequest({
                     <button
                       className={clsx(
                         {
-                          ['border-emerald-500 text-emerald-500']: selected,
+                          ['border-brand-800 text-brand-800 dark:border-brand-600 dark:text-brand-600']:
+                            selected,
                           ['border-transparent hover:text-white']: !selected,
                         },
                         'border-b py-4 transition ui-not-focus-visible:outline-none'
diff --git a/generator/konfig-next-app/src/utils/generate-mantine-theme-colors.ts b/generator/konfig-next-app/src/utils/generate-mantine-theme-colors.ts
index 65845595e..ead64c5ec 100644
--- a/generator/konfig-next-app/src/utils/generate-mantine-theme-colors.ts
+++ b/generator/konfig-next-app/src/utils/generate-mantine-theme-colors.ts
@@ -4,18 +4,32 @@ import { generateShadePalette } from './generate-shade-palette'
 export function generateMantineThemeColors({
   primaryColor,
   colors,
+  label = 'brand',
 }: {
   primaryColor?: string | null
   colors: MantineTheme['colors']
+  label?: string
 }): {
   colors: Partial<MantineThemeColors>
 } {
+  const color =
+    primaryColor !== undefined && primaryColor != null
+      ? generateShadePalette(primaryColor)
+      : colors.blue
+
+  if (typeof window !== 'undefined') {
+    // create CSS variables for every color shade labeled as --color-brand-50, --color-brand-100, etc.
+    for (const [key, value] of Object.entries(color)) {
+      document.documentElement.style.setProperty(
+        `--color-${label}-${key}00`,
+        value
+      )
+    }
+  }
+
   return {
     colors: {
-      brand:
-        primaryColor !== undefined && primaryColor != null
-          ? generateShadePalette(primaryColor)
-          : colors.blue,
+      [label]: color,
     },
   }
 }
diff --git a/generator/konfig-next-app/tailwind.config.js b/generator/konfig-next-app/tailwind.config.js
index f958d73bf..35f53557b 100644
--- a/generator/konfig-next-app/tailwind.config.js
+++ b/generator/konfig-next-app/tailwind.config.js
@@ -5,6 +5,18 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        brand: {
+          // 100-900 from css variables --color-brand-100, --color-brand-200, etc.
+          100: 'var(--color-brand-100)',
+          200: 'var(--color-brand-200)',
+          300: 'var(--color-brand-300)',
+          400: 'var(--color-brand-400)',
+          500: 'var(--color-brand-500)',
+          600: 'var(--color-brand-600)',
+          700: 'var(--color-brand-700)',
+          800: 'var(--color-brand-800)',
+          900: 'var(--color-brand-900)',
+        },
         'mantine-gray': '#868e96',
         'mantine-gray': {
           0x000: '#F8F9FA',