Handling colors with light mode and dark mode

[rntjr]

Does anyone have any idea how I can change the theme colors (light: zinc, orange, green, etc. dark: zinc, orange, green, etc.) like on the example page?

I've seen some discussions and questions, but nothing very practical.

I'd like to create some custom colors and make them work in both light and dark themes.

[alexdanilowicz]

Hi, this website might do the trick: https://ui.jln.dev/

If you end up using it, you can then apply it to Shadcn UI generators like Magic Patterns: www.magicpatterns.com

[FotieMConstant]

Hi, thanks for that however, it doesn't explain how to make support for other themes and handling colors with light mode and dark mode. Any ideas on how to implement this?

Something like this maybe:

For light

.orange{}

For dark

.dark .orange {}

anyone, any idea on how to do this with @shadcn ?

[FotieMConstant]

such a way that a user can choose to switch between any of the themes

[halchester]

@FotieMConstant I also want to achieve the same thing but the closest I find related to that was this file config. I'm also still not sure how I can achieve it.

[vcheeze]

@rntjr I took a brief look at the file shared by @halchester, and I think the use-config hook is the key. It is used in many places, so I haven't figured out where exactly the magic is happening. Maybe have a look through the code yourself to see if you can find out where exactly it is applied. Gut feeling is it's in the theme-*.tsx files in the components folder. Maybe @shadcn can shed some light here as well since he built it :)

I'll share an update here when I get time to look through it more thoroughly, provided it's not already resolved.

[piyush97]

I'm trying to implement the same currently.
.dark .orange doesn't work.
How can I make the color persist along with light and dark mode? Any idea?

[Adoo2401]

@vcheeze any updates ?

[ao-Barbosa]

I'm not sure if that is the best way to do this, but i have got it working by overriding the root variables, since they are the thing dictating the colors in practice.

For the themes i have them configured in JSON format and once i have to change it, i call the following method:

setStyle = (styleJson: IStyleJson) => {
    if (
      !styleJson.main.primary ||
      !styleJson.main.primaryForeground ||
      !styleJson.main.secondary ||
      !styleJson.main.secondaryForeground ||
      !styleJson.dark.primary ||
      !styleJson.dark.primaryForeground ||
      !styleJson.dark.secondary ||
      !styleJson.dark.secondaryForeground
    ) {
      throw new Error('There are missing colors. Please inform them all before setting a new theme.');
    }

    if (styleJson.main.background) {
      //Light
      document.documentElement.style.setProperty(
        '--background',
        styleJson.main.background,
      );
    }

    if (styleJson.main.foreground) {
      document.documentElement.style.setProperty(
        '--foreground',
        styleJson.main.foreground,
      );
    }

    if (styleJson.main.muted) {
      document.documentElement.style.setProperty('--muted', styleJson.main.muted);
    }

    if (styleJson.main.mutedForeground) {
      document.documentElement.style.setProperty(
        '--muted-foreground',
        styleJson.main.mutedForeground,
      );
    }

    if (styleJson.main.popover) {
      document.documentElement.style.setProperty('--popover', styleJson.main.popover);
    }

    if (styleJson.main.popoverForeground) {
      document.documentElement.style.setProperty(
        '--popover-foreground',
        styleJson.main.popoverForeground,
      );
    }

    if (styleJson.main.card) {
      document.documentElement.style.setProperty('--card', styleJson.main.card);
    }

    if (styleJson.main.cardForeground) {
      document.documentElement.style.setProperty(
        '--card-foreground',
        styleJson.main.cardForeground,
      );
    }

    if (styleJson.main.border) {
      document.documentElement.style.setProperty('--border', styleJson.main.border);
    }

    if (styleJson.main.input) {
      document.documentElement.style.setProperty('--input', styleJson.main.input);
    }

    document.documentElement.style.setProperty('--primary', styleJson.main.primary);
    document.documentElement.style.setProperty(
      '--primary-foreground',
      styleJson.main.primaryForeground,
    );

    document.documentElement.style.setProperty('--secondary', styleJson.main.secondary);
    document.documentElement.style.setProperty(
      '--secondary-foreground',
      styleJson.main.secondaryForeground,
    );

    if (styleJson.main.destructive) {
      document.documentElement.style.setProperty(
        '--destructive',
        styleJson.main.destructive,
      );
    }

    if (styleJson.main.destructiveForeground) {
      document.documentElement.style.setProperty(
        '--destructive-foreground',
        styleJson.main.destructiveForeground,
      );
    }

    if (styleJson.main.ring) {
      document.documentElement.style.setProperty('--ring', styleJson.main.ring);
    }

    //Dark
    const styleSheet = document.styleSheets[0];
    const cssRules = Array.from(styleSheet.cssRules);
    const darkClassIndex = cssRules.findIndex(
      (cssRule) => cssRule instanceof CSSStyleRule && cssRule.selectorText === '.dark',
    );

    let rule = '.dark {';

    if (styleJson.dark.background) rule += `--background: ${styleJson.dark.background};`;

    if (styleJson.dark.foreground) rule += `--foreground: ${styleJson.dark.foreground};`;

    if (styleJson.dark.muted) rule += `--muted: ${styleJson.dark.muted};`;

    if (styleJson.dark.mutedForeground)
      rule += `--muted-foreground: ${styleJson.dark.mutedForeground};`;

    if (styleJson.dark.popover) rule += `--popover: ${styleJson.dark.popover};`;

    if (styleJson.dark.popoverForeground)
      rule += `--popover-foreground: ${styleJson.dark.popoverForeground};`;

    if (styleJson.dark.card) rule += `--card: ${styleJson.dark.card};`;

    if (styleJson.dark.cardForeground)
      rule += `--card-foreground: ${styleJson.dark.cardForeground};`;

    if (styleJson.dark.border) rule += `--border: ${styleJson.dark.border};`;

    if (styleJson.dark.input) rule += `--input: ${styleJson.dark.input};`;

    rule += `--primary: ${styleJson.dark.primary};`;
    rule += `--primary-foreground: ${styleJson.dark.primaryForeground};`;
    rule += `--secondary: ${styleJson.dark.secondary};`;
    rule += `--secondary-foreground: ${styleJson.dark.secondaryForeground};`;

    if (styleJson.dark.destructive)
      rule += `--destructive: ${styleJson.dark.destructive};`;

    if (styleJson.dark.destructiveForeground)
      rule += `--destructive-foreground: ${styleJson.dark.destructiveForeground};`;

    if (styleJson.dark.ring) rule += `--ring: ${styleJson.dark.ring};`;

    rule += '}';

    styleSheet.deleteRule(darkClassIndex);
    styleSheet.insertRule(rule, darkClassIndex);
  };