Do pallets override css variables?

[imprakharshukla]

Describe the bug Hey! I am unable to set the value of my css variables in the css file since  they are overridden by the pallet colors. I want to set the text, caption, title text-colors when in dark mode but unable to do so.

To Reproduce globals.css:

@layer base {
  :root {
    --card-padding: theme("spacing[6]");
    --accordion-padding: theme("spacing[4]");
    --feedback-padding: var(--card-padding);
    --toast-padding: theme("spacing[4]");
    --display-text-color: theme(colors.gray.100);
    --title-text-color: var(--display-text-color);
    --caption-text-color: theme(colors.gray.100);
    --body-text-color: theme(colors.gray.100);
    --placeholder-text-color: theme(colors.gray.400);
    --background: theme(colors.blue.600);
    --card-background: theme(colors.gray.100);
  }

  .dark {
    --display-text-color: theme(colors.white);
    --title-text-color: var(--display-text-color);
    --caption-text-color: theme(colors.gray.500);
    --body-text-color: theme(colors.gray.300);
    --placeholder-text-color: theme(colors.gray.600);
    --background: theme(colors.neutral.900);
    --card-background: theme(colors.gray.800);
  }
}

tailwind.config.ts:

export default {
  content: [""],

  theme: {
    darkMode: "class",
    extend: {
      colors: palettes.trust,
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [
    require("tailwindcss-animate"),
    rounded,
    shade,
    components,
    animations,
  ],
} satisfies Config;

Expected behavior I should be able to assign the colors to my css variables without being overridden by the palette.

Screenshots Here's a video to explain the issue: https://youtu.be/AjyH63R3zjc

Desktop (please complete the following information):

• OS: MacOS
• Browser Arc
• Version 1.46.6

Additional context I am using Next-theme, and here's the provider:

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider enableSystem disableTransitionOnChange attribute="class"
    defaultTheme="system" {...props}>{children}</NextThemesProvider>;
}