Whats the easiest way to make a light theme using a dark theme that has heavy customizaiton

[hipp0]

I’m using Foundation theme with a dark palette that I have customized heavily with css.

I am wondering what would be the easiest method for making a light version that follows all the same CSS rules.

[Moin]

You can add a light color palette to your theme

You can update colors based on whether the light or dark theme is used:

@awesomerobot

So in color_definitions.scss you can do:

$my-theme-color: dark-light-choose($primary, red);

:root {
  --my-theme-color: #{$my-theme-color};
}

and then you’d use the new dark/light changing custom property in your theme:

body {
  color: var(--my-theme-color);
}

[hipp0]

Okay so I need to adjust every single change with the dark or light (i am using default dark/light)

[Moin]

It depends. You only need to do that if you used hardcoded colors. As long as you refer to colors like var(--primary-300) or var(--danger), they change automatically based on the color palette.