Add support for custom theming with css variables in a css file

[therealokoro]

Clear and concise description of the problem

Hello there,

First of all i want to thank you for this, its a game changer for someone like me who loves both unocss and shadcn/ui.

I would love to propose for more flexibility in the usage of this preset. When using shadcn/ui with tailwind, you get the flexibility of customizing your theme colors and values using the css variables provided to you through the tailwindcss file which is undoubtedly very useful.

I wonder if we could also have this preset give room for such customization.

Suggested solution

Here are some possible solutions.

1. Passing custom variable values to the preset

presetShadcn({
  theme: {
        default: {
          background: "0 0% 100%",
          // and so on....
        },
        dark: {
          background: "0 0% 100%",
          // and so on....
        }
        cherry: {
          background: "0 0% 100%",
          // and so on....
        }
   }
})

2. Switching to custom theme

We could have some sort of property that lets the preset know that we want to use custom theme values.
This will then let you set your values in a css file, without loading the inbuilt ones

presetShadcn({
   customThemeVars: true
})

::root{
  ---background: 255 255% 100%;
 // and so on....
}


.dark{
  ---background: 0 0% 100%;
 // and so on....
}

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[hyoban]

Hi, the custom theme is supported.

To custom theme based on a built-in theme, you can try:

presetShadcn({
  color: {
    base: 'neutral',
    color: {
      light: {
        primary: '0 0% 100%',
      },
    },
  },
}),

To custom a full theme from scratch:

presetShadcn({
  color: {
    name: 'custom',
    light: {
      primary: '0 0% 100%',
      // other color
    },
    dark: {},
  },
}),

[therealokoro]

Okay, that works magic 😃😃

But I would love to propose a change to the api. Instead of having the topmost property be color, why not have it be theme so it doesn't get confused with the child color property. I think it makes more grammatic sense too.

presetShadcn({
  theme: { // use theme instead of color
    name: 'custom',
    light: {
      primary: '0 0% 100%',
      // other color
    },
    dark: {},
  },
}),

The color property can still stays for selecting a theme color though

[hyoban]

But I would love to propose a change to the api. Instead of having the topmost property be color, why not have it be theme so it doesn't get confused with the child color property. I think it makes more grammatic sense too.

How about just flat the color property? As we just custom color here.

[therealokoro]

I don't really get. Could you give an example?

Or do you mean something like this?

presetShadcn({
  color: {
    base: 'neutral',
    light: {
        primary: '0 0% 100%',
      },
  },
})

[hyoban]

Yes

[therealokoro]

Well I guess that works well too