Tag in dark mode

[hmz22]

Describe the bug When switch to dark mode tag bg and border not switch to dark and still in light mode style. Tell how fix in var.less

Show your code var.less:

@import "~antd/lib/style/themes/default.less";
@primary-color: @blue-6;
@menu-selected-item-bg: @menu-item-active-bg;
@select-item-select-bg: @select-item-selected-bg;
@tag-defaulted-bg: @tag-default-bg;

:root {
  --PC: @primary-color;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: @menu-selected-item-bg;
}

.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background-color: @select-item-select-bg;
}

config-overrides.js:

const path = require("path");
const fs = require("fs");
const {
  override,
  fixBabelImports,
  addLessLoader,
  addWebpackPlugin,
} = require("customize-cra");
const AntDesignThemePlugin = require("antd-theme-webpack-plugin");
const { getLessVars } = require("antd-theme-generator");

const themeVariables = getLessVars(
  path.join(__dirname, "./src/styles/vars.less")
);
const defaultVars = getLessVars(
  "./node_modules/antd/lib/style/themes/default.less"
);
const darkVars = {
  ...getLessVars("./node_modules/antd/lib/style/themes/dark.less"),
  "@primary-color": defaultVars["@primary-color"],
  "@picker-basic-cell-active-with-range-color": "darken(@primary-color, 20%)",
};
const lightVars = {
  ...getLessVars("./node_modules/antd/lib/style/themes/compact.less"),
  "@primary-color": defaultVars["@primary-color"],
};
fs.writeFileSync("./src/dark.json", JSON.stringify(darkVars));
fs.writeFileSync("./src/light.json", JSON.stringify(lightVars));
fs.writeFileSync("./src/theme.json", JSON.stringify(themeVariables));

const options = {
  stylesDir: path.join(__dirname, "./src"),
  antDir: path.join(__dirname, "./node_modules/antd"),
  varFile: path.join(__dirname, "./src/styles/vars.less"),
  themeVariables: Array.from(
    new Set([
      ...Object.keys(darkVars),
      ...Object.keys(lightVars),
      ...Object.keys(themeVariables),
    ])
  ),
  generateOnce: false, // generate color.less on each compilation
};

module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  addWebpackPlugin(new AntDesignThemePlugin(options)),
  addLessLoader({
    javascriptEnabled: true,
  })
);

Screenshots

Version 1.3.9