diff --git a/examples/example_next/src/app/(website)/components/HeaderLink.tsx b/examples/example_next/src/app/(website)/components/HeaderLink.tsx
index 49c5e5299..1ea5c6ffc 100644
--- a/examples/example_next/src/app/(website)/components/HeaderLink.tsx
+++ b/examples/example_next/src/app/(website)/components/HeaderLink.tsx
@@ -15,7 +15,7 @@ export function HeaderLink({ href, children, className }: HeaderLinkProps) {
     const isActive = pathname.startsWith(href);
     return (
         <Link href={href}
-              className={cls("block uppercase py-2 text-sm font-semibold hover:text-primary-dark dark:text-surface-300",
+              className={cls("block uppercase py-2 text-sm font-semibold hover:text-secondary dark:text-surface-300",
                   isActive ? 'text-secondary' : 'text-surface-800',
                   className)}>
             {children}
diff --git a/examples/example_next/tailwind.config.js b/examples/example_next/tailwind.config.js
index 75fc3bada..19563e706 100644
--- a/examples/example_next/tailwind.config.js
+++ b/examples/example_next/tailwind.config.js
@@ -43,7 +43,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx b/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx
index 49c5e5299..1ea5c6ffc 100644
--- a/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx
+++ b/packages/cli/templates/template_next_pro/src/app/(website)/components/HeaderLink.tsx
@@ -15,7 +15,7 @@ export function HeaderLink({ href, children, className }: HeaderLinkProps) {
     const isActive = pathname.startsWith(href);
     return (
         <Link href={href}
-              className={cls("block uppercase py-2 text-sm font-semibold hover:text-primary-dark dark:text-surface-300",
+              className={cls("block uppercase py-2 text-sm font-semibold hover:text-secondary dark:text-surface-300",
                   isActive ? 'text-secondary' : 'text-surface-800',
                   className)}>
             {children}
diff --git a/packages/cli/templates/template_next_pro/tailwind.config.js b/packages/cli/templates/template_next_pro/tailwind.config.js
index 12343d675..dddf441bf 100644
--- a/packages/cli/templates/template_next_pro/tailwind.config.js
+++ b/packages/cli/templates/template_next_pro/tailwind.config.js
@@ -43,7 +43,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx b/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx
index 21645564e..d2dcba05e 100644
--- a/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx
+++ b/packages/firecms_cloud/src/hooks/useBuildProjectConfig.tsx
@@ -118,11 +118,9 @@ export function useBuildProjectConfig({
     useEffect(() => {
         if (primaryColor) {
             document.documentElement.style.setProperty("--fcms-primary", primaryColor);
-            document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(primaryColor, 10));
             document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(primaryColor, 10));
         } else {
             document.documentElement.style.setProperty("--fcms-primary", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
-            document.documentElement.style.setProperty("--fcms-primary-dark", darkenColor(DEFAULT_PRIMARY_COLOR, 10));
             document.documentElement.style.setProperty("--fcms-primary-bg", hexToRgbaWithOpacity(DEFAULT_PRIMARY_COLOR, 10));
         }
         if (secondaryColor) {
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 63814f2a1..d069cb5cc 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -75,7 +75,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index b33c4a38c..9f8946f77 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -38,8 +38,8 @@ const ButtonInner = React.forwardRef<
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
+        "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 
diff --git a/packages/ui/src/components/Slider.tsx b/packages/ui/src/components/Slider.tsx
index 4c5700f57..3018d3e90 100644
--- a/packages/ui/src/components/Slider.tsx
+++ b/packages/ui/src/components/Slider.tsx
@@ -33,7 +33,7 @@ function SliderThumb(props: {
         <TooltipPrimitive.Trigger asChild>
             <SliderPrimitive.Thumb
                 className={cls({
-                        "border-primary bg-primary hover:bg-primary-dark outline-none": !props.props.disabled,
+                        "border-primary bg-primary outline-none": !props.props.disabled,
                         "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
                     },
                     props.classes,
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 9ed2b63e6..5e514c40f 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -37,7 +37,6 @@ export default {
             },
             colors: {
                 "primary": "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 "secondary": "var(--fcms-secondary)",
                 "field": {
diff --git a/packages/user_management/tailwind.config.js b/packages/user_management/tailwind.config.js
index 415db4e6f..8b0f7bfe6 100644
--- a/packages/user_management/tailwind.config.js
+++ b/packages/user_management/tailwind.config.js
@@ -32,7 +32,6 @@ export default {
             },
             colors: {
                 primary: "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 secondary: "var(--fcms-secondary)",
                 field: {
diff --git a/website/docs/components.mdx b/website/docs/components.mdx
index 479ea7cc7..0d32363ee 100644
--- a/website/docs/components.mdx
+++ b/website/docs/components.mdx
@@ -92,7 +92,6 @@ Finally, you need to define your primary and secondary colors in your `index.css
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/migrating_from_v3_beta.mdx b/website/docs/pro/migrating_from_v3_beta.mdx
index 93d52a9ef..75a191ba0 100644
--- a/website/docs/pro/migrating_from_v3_beta.mdx
+++ b/website/docs/pro/migrating_from_v3_beta.mdx
@@ -80,7 +80,6 @@ Your `index.css` file should look like this:
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/nextjs.mdx b/website/docs/pro/nextjs.mdx
index 0ca0a85fa..6ce31eea3 100644
--- a/website/docs/pro/nextjs.mdx
+++ b/website/docs/pro/nextjs.mdx
@@ -125,7 +125,6 @@ Create a file called `index.css` in the `./src/cms` folder with the following co
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
diff --git a/website/docs/pro/styling_firecms.mdx b/website/docs/pro/styling_firecms.mdx
index 7288623c5..4ab67d0b4 100644
--- a/website/docs/pro/styling_firecms.mdx
+++ b/website/docs/pro/styling_firecms.mdx
@@ -48,7 +48,6 @@ in your `index.css` file:
 
 :root {
     --fcms-primary: #0070F4;
-    --fcms-primary-dark: #0061e6;
     --fcms-primary-bg: #0061e610;
     --fcms-secondary: #FF5B79;
 }
@@ -90,7 +89,6 @@ export default {
         extend: {
             colors: {
                 "primary": "var(--fcms-primary)",
-                "primary-dark": "var(--fcms-primary-dark)",
                 "primary-bg": "var(--fcms-primary-bg)",
                 "secondary": "var(--fcms-secondary)",
                 "field": {
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index f0a820c17..be49d36a7 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -35,7 +35,6 @@ export default {
       },
       colors: {
         "primary": "var(--fcms-primary)",
-        "primary-dark": "var(--fcms-primary-dark)",
         "primary-bg": "var(--fcms-primary-bg)",
         "secondary": "var(--fcms-secondary)",
         "field": {