Theme Customization: Dark mode using css custom properties:

[abdullah-mjawaz]

What problem does this feature solve?

Utilizing CSS custom properties provides a more easy approach for theming ant components and addresses the issue of flickering that may occur when loading or refreshing a page using dynamic theme switching.

Expected outcomes include:

• Switch to dark/default theme via CSS custom properties by applying either the .dark/.default CSS class to the root element,
• utilizing the color palette through var(--ant-prefix-primary-1) across the application without reliance on LESS variable.

What does the proposed API look like?

Transferring all color operation functions such as fading and darkening from component-specific style files (e.g., table/style/index.less) to the root theme files like dark.less and variable.less would address this problem.
I'm having a similar issue: #3611

I can't override these less variables since they're used as parameters to less color operation functions.

• @disabled-color: fade(@white, 30%);
• @btn-text-hover-bg: rgba(255, 255, 255, 0.03);
• @border-color-split: #303030;
• @text-color-secondary: fade(@white, 45%);
• @disabled-color: fade(@white, 30%);

note: I'm using dark theme values for these variables.

prof of concept:
angular-ng-zorro-css-theme