The theme sync functionality in the theme builder for heroui pro is not working properly

And the difference between the normal theme builder seen in the heroui docs is that the hero ui theme builder gets every single css variable:

/*

• HeroUI Theme Customization

• Add this to your global.css after importing @heroui/styles

• Only includes variables users need to customize

• @see https://heroui.com/docs/react/getting-started/theming */

:root, .light, .default, [data-theme="light"], [data-theme="default"] { /* Theme Colors (Light Mode) */ --accent: oklch(0 0 0); --accent-foreground: oklch(99.11% 0 0); --background: oklch(97.02% 0.0000 0.00); --border: oklch(90.00% 0.0000 0.00); --danger: oklch(0.573 0.2249 21.97); --danger-foreground: oklch(98% 0.0200 21.97); --default: oklch(94.00% 0.0000 0.00); --default-foreground: oklch(21.03% 0.0059 0.00); --field-background: oklch(100.00% 0.0000 0.00); --field-border: transparent; --field-foreground: oklch(21.03% 0.0000 0.00); --field-placeholder: oklch(55.17% 0.0000 0.00); --focus: oklch(0 0 0); --foreground: oklch(21.03% 0.0000 0.00); --muted: oklch(55.17% 0.0000 0.00); --overlay: oklch(100.00% 0.0000 0.00); --overlay-foreground: oklch(21.03% 0.0000 0.00); --scrollbar: oklch(87.10% 0.0000 0.00); --segment: oklch(100.00% 0.0000 0.00); --segment-foreground: oklch(21.03% 0.0000 0.00); --separator: oklch(92.00% 0.0000 0.00); --success: oklch(0.6277 0.1604 153.06); --success-foreground: oklch(98% 0.0160 153.06); --surface: oklch(100.00% 0.0000 0.00); --surface-foreground: oklch(21.03% 0.0000 0.00); --surface-secondary: oklch(95.24% 0.0000 0.00); --surface-secondary-foreground: oklch(21.03% 0.0000 0.00); --surface-tertiary: oklch(93.73% 0.0000 0.00); --surface-tertiary-foreground: oklch(21.03% 0.0000 0.00); --warning: oklch(0.8446 0.1525 80.6); --warning-foreground: oklch(15% 0.0457 80.60); --accent-soft-foreground: oklch(0 0 0);

/* Border Radius */ --radius: 0.25rem; --field-radius: 0.25rem;

/* Font Family / / Make sure to load Inter font in your app */ --font-sans: var(--font-inter); }

.dark, [data-theme="dark"] { color-scheme: dark; /* Theme Colors (Dark Mode) */ --accent: oklch(0.9848 0 0); --accent-foreground: oklch(15% 0.0000 0.00); --background: oklch(12.00% 0.0000 0.00); --border: oklch(28.00% 0.0000 0.00); --danger: oklch(0.7044 0.1872 23.19); --danger-foreground: oklch(15% 0.0500 23.19); --default: oklch(27.40% 0.0000 0.00); --default-foreground: oklch(99.11% 0 0); --field-background: oklch(21.03% 0.0000 0.00); --field-border: transparent; --field-foreground: oklch(99.11% 0.0000 0.00); --field-placeholder: oklch(70.50% 0.0000 0.00); --focus: oklch(0.9848 0 0); --foreground: oklch(99.11% 0.0000 0.00); --muted: oklch(70.50% 0.0000 0.00); --overlay: oklch(21.03% 0.0000 0.00); --overlay-foreground: oklch(99.11% 0.0000 0.00); --scrollbar: oklch(70.50% 0.0000 0.00); --segment: oklch(39.64% 0.0000 0.00); --segment-foreground: oklch(99.11% 0.0000 0.00); --separator: oklch(25.00% 0.0000 0.00); --success: oklch(0.6514 0.1321 156.22); --success-foreground: oklch(15% 0.0396 156.22); --surface: oklch(21.03% 0.0000 0.00); --surface-foreground: oklch(99.11% 0.0000 0.00); --surface-secondary: oklch(25.70% 0.0000 0.00); --surface-secondary-foreground: oklch(99.11% 0.0000 0.00); --surface-tertiary: oklch(27.21% 0.0000 0.00); --surface-tertiary-foreground: oklch(99.11% 0.0000 0.00); --warning: oklch(0.8803 0.1348 86.06); --warning-foreground: oklch(15% 0.0404 86.06); --accent-soft-foreground: oklch(0.9848 0 0); }

This is the pro version:

/*

• HeroUI Pro Theme

• Add this to your globals.css after importing @heroui/styles

• @see https://heroui.com/docs/react/getting-started/theming */

/*

• Font: Inter

• Load this font in your app:

• <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" /> */ @import "@heroui-pro/react/themes/glass";

.glass-light, [data-theme="glass-light"] { /* Theme Colors */ --muted: oklch(55.17% 0.0060 253.83); --scrollbar: oklch(87.10% 0.0030 253.83); --border: oklch(90.00% 0.0030 253.83); --danger-soft-foreground: var(--danger); --warning-soft-foreground: var(--warning); --success-soft-foreground: var(--success);

/* Misc */ --skeleton-animation: shimmer; }

.glass-dark, [data-theme="glass-dark"] { color-scheme: dark; /* Theme Colors */ --muted: oklch(70.50% 0.0060 253.83); --scrollbar: oklch(70.50% 0.0030 253.83); --surface-secondary-foreground: oklch(25.70% 0.0000 253.83); --surface-tertiary-foreground: oklch(27.21% 0.0000 253.83); --field-placeholder: oklch(70.50% 0.0000 253.83); --segment: oklch(39.64% 0.0030 253.83); --border: oklch(28.00% 0.0030 253.83); --danger-soft-foreground: var(--danger); --warning-soft-foreground: var(--warning); --success-soft-foreground: var(--success); --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); --success-soft: color-mix(in oklab, var(--success) 15%, transparent); --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); }

Please fix this in order to not to have to work so hard to get the plugin working on the pro theme