Import variables for specific themes in to another

[amocarski]

How I can re-use variables from a specific theme in to the another theme?

Basically what I want to achieve:

:root {
  --background: hsla(0, 0%, 100%, 1);
  --foreground: oklch(0.145 0 0);
  ...
}

.dark {
  --background: hsla(0, 0%, 0%, 1);
  --foreground: oklch(0.985 0 0);
  ...
}

.new-custom {

}

and then I'd love to re-use every token from .dark exactly as there are (and no copy/paste -> not scalable) inside .new-custom with only few overrides.

How I can achieve this?

[Taib-Rabah]

You can achieve this like this:

:root {
  --background: white;
  --foreground: black;
}

/* Both dark and custom themes share the same base variables */
.dark,
.new-custom {
  --background: black;
  --foreground: white;
}

/* Then override specific variables for your custom theme */
.new-custom {
  --foreground: blue; /* Only this value changes while keeping others */
}

[amocarski]

Oh yes, it makes sense! Works.

I was doing it in a different way

.dark, .new-custom {
  --foreground: blue; /* Only this value changes while keeping others */
}

Trying to add .dark to .new-custom not other way around.

[rozsazoltan]

I know it's not part of the question, but I think it's worth mentioning that using layers is highly recommended. In this case, it's advisable to place the variables inside @layer theme.

• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root

@layer theme {
  :root, :host {
    --background: white;
    --foreground: black;
  }

  .dark {
    --background: black;
    --foreground: white;
  }
  
  .new-custom {
    --background: black;
    --foreground: blue;
  }
}

Also, if you don't want to declare the themes repeatedly based on class names, create the appropriate variant for each theme, and then you'll be able to access them consistently with a simple reference.

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant new-custom (&:where(.new-custom, .new-custom *));

@layer theme {
  :root, :host {
    --background: white;
    --foreground: black;
    
    @variant dark {
      --background: black;
      --foreground: white;
    }

    @variant new-custom {
      --background: black;
      --foreground: blue;
    }
  }
}

Or for nested themes:

@custom-variant dark (&:where(.dark, .dark *));
@custom-variant new-custom (&:where(.new-custom, .new-custom *));

@layer theme {
  :root, :host {
    --background: white;
    --foreground: black;
  }

  * {   
    @variant dark {
      --background: black;
      --foreground: white;
    }

    @variant new-custom {
      --background: black;
      --foreground: blue;
    }
  }
}