color-9#003a8c color-10#002766 #1890ff 在代码中使用色板 我们为程序员提供了色板的 JavaScript 的使用方式。 npm install @ant-design/colors import{blue}from'@ant-design/colors'; console.log(blue);// ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D...
Ant Design Colors 🎨 Color palettes calculator ofAnt Design. Install $ npm install @ant-design/colors // or $ yarn add @ant-design/colors Usage $ npm install @ant-design/colors --save import{red,volcano,gold,yellow,lime,green,cyan,blue,geekblue,purple,magenta,grey,}from'@ant-design/col...
"theme":{"primary-color":"#1DA57A",}, 或者一个 js 文件: "theme":"./theme.js", 在create-react-app 中定制主题# 参考在 create-react-app 中使用进行配置即可。 配置less 变量文件# 另外一种方式是建立一个单独的less变量文件,引入这个文件覆盖antd.less里的变量。
import{ generate, presetDarkPalettes }from'@ant-design/colors';// Generate dark color palettes by a given colorconstcolors = generate('#1890ff', {theme:'dark',backgroundColor:'#141414'});console.log(colors);// ["#111d2c", "#112a45", "#15395b", "#164c7e", "#1765ad", "#177ddc...
param: (color, options), change the antd theme. The options specific attributes are as follows: - storageName: This can be configured to set storageName when not using picker . - customCss: custom Css color就是需要更改主题颜色的颜色值;而option是一个对象。假设只需要额外更改css效果。将css代码...
defaultValue 颜色默认的值 string | Color - defaultFormat 颜色格式默认的值 rgb | hex | hsb - 5.9.0 disabled 禁用颜色选择器 boolean - disabledAlpha 禁用透明度 boolean - 5.8.0 disabledFormat 禁用选择颜色格式 boolean - destroyTooltipOnHide 关闭后是否销毁弹窗 boolean false 5.7.0 format 颜色格式...
const theme = { token: { colorPrimary: '#1890ff', }, }; 梯度变量(Map Token) # Map Token 是基于 Seed 派生的梯度变量。定制 Map Token 推荐通过 theme.algorithm 来实现,这样可以保证 Map Token 之间的梯度关系。也可以通过 theme.token 覆盖,用于单独修改一些 map token 的值。
modifyVars: {"primary-color":"#1DA57A","link-color":"#1DA57A","border-radius-base":"2px"}, javascriptEnabled:true} } } }; 保存重启并访问页面后就可以看到定制的主题了 但官方提供的这种方式只能在编译时改变主题,无法在运行性动态切换。下面就是本文的重点,如何实现在运行时动态切换主题。
@ant-design/fast-color Fast color class. Install Usage import{FastColor}from'@ant-design/fast-color';// inputnewFastColor('#666');// short hexnewFastColor('#66ccff');// hexnewFastColor('#66ccffaa');// hex with alphanewFastColor('rgba(102, 204, 255, .5)');// old css rgb sy...
这里的modifyVars就是用来配置主题色的,@primary-color就是主题色的值,这里我将主题色改为绿色。 配置完毕了是不是?然后运行项目,刷新一下发现没有效果: 这是为什么呢?我们在craco.config.js文件中更改的是不是 less 代码,但是我们的项目中引入的是不是 less 代码,我们的项目中引入的是不是css代码: ...