Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

type definition errors on presetTheme #4

Closed
therealokoro opened this issue Dec 26, 2022 · 5 comments
Closed

type definition errors on presetTheme #4

therealokoro opened this issue Dec 26, 2022 · 5 comments

Comments

@therealokoro
Copy link

Tried using this plugin, but vscode keeps shouting at me about this
image

@Dunqing
Copy link
Member

Dunqing commented Dec 26, 2022

You also need to set the theme type for unocss

Please refer to the following
https://github.com/Dunqing/unocss-preset-theme/blob/f2419617670bdcb5eb12b4b4850e2af49418ec75/playground/vite.config.ts#L10

@Dunqing Dunqing closed this as completed Dec 29, 2022
@therealokoro
Copy link
Author

Uhm... So i'm using unocss with nuxt 3 and my config lies in an unocss.config.ts file not in vite.config.ts. This means that the unocss export from vite is not needed. So how do I then use this preset?

How about you try using this preset with nuxt 3.

Here's an example of my config.

export default defineConfig({
  theme: {},
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({ scale: 1.2 }),
    presetForms(),
    presetTheme<Theme>({
      theme: {
        dark: {
          colors: {
            primary: "#1668dc",
            "primary-border": "#1668dc",
            border: "#424242"
          }
       }
    }),
  transformers: [transformerDirectives(), transformerVariantGroup()]
})

@Dunqing Dunqing reopened this Dec 31, 2022
@Dunqing
Copy link
Member

Dunqing commented Dec 31, 2022

Just like this

export default defineConfig<Theme>({...})

@therealokoro
Copy link
Author

therealokoro commented Jan 7, 2023

Works like a charm👌. Nice one

So one more thing. I think it would be nice if the plugin could convert colors to rgba so as to respect a opacity when available.

Currently when you pass in a color value(except for color names) to the color property in the default theme option of unocss, It's converted to rgba so if in usage, an opacity is passed, then it can be used.

See examples below.

Default

image one
image

Notice how the rgb color value passed to the color property in the config was converted rgba so it could respect opacity.

With this preset

image
image

Notice that it ignores the possibility of have opacity.

I do hope that this is clear enough. Thanks

@therealokoro
Copy link
Author

Beautiful work @Dunqing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants