Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tag in dark mode #117

Open
hmz22 opened this issue Mar 2, 2022 · 0 comments
Open

Tag in dark mode #117

hmz22 opened this issue Mar 2, 2022 · 0 comments

Comments

@hmz22
Copy link

hmz22 commented Mar 2, 2022

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
Screenshot 2022-03-02 134846

Version
1.3.9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant