search

vueComponent / ant-design-vue

🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
https://antdv.com/
Other
20.02k stars 3.77k forks source link

css variables #4903

Closed L-Z-Y closed 2 years ago

L-Z-Y commented 2 years ago

What problem does this feature solve?

The current antdv online theme switching requires the introduction of the less compiler. This runtime compilation will affect the performance of the production environment. Can the form of css variables be added later? What should I do if I want to pre-compile multiple sets of theme styles?

What does the proposed API look like?

null

timyourivh commented 2 years ago

I'm stuck with this as well. I want to have a dark theme in my Nuxt app but this is impossible using LESS. I tried using @nuxtjs/color-mode which uses a .dark class at the html element but the theme becomes bugged if I try compiling it like this:

  .dark {
    @import '~ant-design-vue/dist/antd.less';
    @import '~ant-design-vue/lib/style/themes/default.less';

    // Not sure what this does... 
    @html-selector: html.dark;

    /*
    * Ant design vars.
    *
    * To see defaults check the imported default.less
    */
    @primary-color: #556ee6; // Primary color for all components
    // etc...
  }

The color switching works but things like the menu become completely bugged when class .dark is applied to <html> :(

ant-design-vue: 1.7.8
vue: 2.6.14
github-actions[bot] commented 2 years ago

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

github-actions[bot] commented 1 year ago

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.