Theming in v4 - colorTextBase

[rowanwins]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I have been looking into v4, particularly because of the ability to dynamically theme my application.

One of the hurdles I have is that previously using the LESS I could change a single variable and it would flow through too all text on my page even if it wasn't a AntDesignComponent (eg just a standard <p>)

css: {
   preprocessorOptions: {
      less: {
         modifyVars: {
            'text-color': 'red',
         }
      }
   }
},

It now seems that the colorTextBase config token only flows through to AntDesign Components

<a-config-provider
   :theme="{
      token: {
         colorTextBase: 'red',
      },
   }"
>
   <p>I won't be red</p>
</a-config-provider>

I could go and change all my p elements (plus a series of other things) to make use of Typography component but I wonder if there is an alternate approach that is a bit less invasive and more flexible?

I did also take a look at the config for your docs in here as I noticed on your site that you'd exposed css variables on the document root, this seems like one option, but it's a bit complicated and undocumented how all that works but maybe a similar concept could be made available as a theme setting?

What does the proposed API look like?

One option might be to provide something like a setCssVariablesOnDocumentRoot option on the theme?

<a-config-provider
   :theme="{
      setCssVariablesOnDocumentRoot: true,
      token: {
         colorTextBase: 'red',
      },
   }"
>
   <p>I can now be red</p>
</a-config-provider>

<style>
p {
   color: --site-text-color
}
</style>

But open to other ideas as to how this might be solved.

[CCherry07]

Ok, this is a very good suggestion, but we recommend to use useToken to get the token information, if it's not antdv component, you can use v-bind-in-css to do the style binding?, of course, you can still through the access token to define CSS variables. in this way or useCssVar

const token = useToken()
document.querySelector(':root').style.setProperty('--site-text-color',token.colorTextBase)

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.