Frustration with global style changes

[paul-gaspar]

Hello!

First of all: Naive UI is the best Vue 3 component library! Very clean and well thought. Thank you for your great work!

Now my problem: I need to change some of the styles globally (no TS). And I don't get it. The docs on this are quite cryptic to be honest. Really abstract.

Sample: I need to change the box shadow of the popover (--n-box-shadow) globally, not per component. What are the specific steps to solve this? In which file do I have to place which code?

Sorry for this beginner-like question ...

[07akioni]

It's not your fault, docs about theme is quite not good.

For you scene, you can add a config provider at root of your app, then set theme overrides on it:

<n-config-provider :theme-overrides="{ Popover: { boxShadow: 'style...' } }">
  <app />
</n-config-provider>

[07akioni]

I think we will improve docs about theme later.

[07akioni]

https://www.naiveui.com/en-US/os-theme/docs/customize-theme#Customizing-theme-vars-(design-tokens)

[paul-gaspar]

Thank you, that has helped a lot. It is working now.