Customize Ant Design specific colors dynamically on runtime
Home Page: https://antd-live-theme.firebaseapp.com/
This project is generated using create-react-app v2 and then added required configurations and dependencies to make a perfect starter project for Ant Design.
In this project, we have setup less-loader with required configurations for Ant Design. Added babel and eslint configurations.
hello,can you give me a dva project change theme demo? i looked this demo,but this is different struct with dva project,I can't apply it. thank you
So, i follow your instruction, and create config-overrides.js, variables.less, color.less, and change my code in index.html, but when i tried do window.less.modifyVars(vars), nothing happend.
my code for change:
import 'path';
import {message} from 'antd';
export const changeTheme = (isDark) => {
let vars = {
'@primary-color': '#ff00ff',
'@secondary-color': '#ff00ff',
'@text-color': '#ff00ff',
'@text-color-secondary': '#ff00ff',
};
window.less
.modifyVars(vars)
.then(() => {
message.success(isDark ? "We have cookies" : "Let the force be with you");
console.log(window.less);
})
.catch(error => {
message.error(error.toString());
});
};
my config-overrides.js
import 'path';
import {message} from 'antd';
export const changeTheme = (isDark) => {
let vars = {
'@primary-color': '#ff00ff',
'@secondary-color': '#ff00ff',
'@text-color': '#ff00ff',
'@text-color-secondary': '#ff00ff',
};
window.less
.modifyVars(vars)
.then(() => {
message.success(isDark ? "We have cookies" : "Let the force be with you");
console.log(window.less);
})
.catch(error => {
message.error(error.toString());
});
};
my variables.less
@import "~antd/lib/style/themes/default.less";
@primary-color: #1DA57A;
@secondary-color: #ccc;
@text-color: fade(@black, 65%);
@text-color-secondary: fade(#1DA57B, 65%);
config-overrides.js is in root
i can see some data in local storage, but interface colors is not changing
`const path = require('path');
const { updateConfig } = require('react-app-rewire-antd-theme');
const options = {
stylesDir: path.join(__dirname, './src/styles'),
antDir: path.join(__dirname, './node_modules/antd'),
varFile: path.join(__dirname, './src/styles/variables.less'),
mainLessFile: path.join(__dirname, './src/styles/index.less'),
themeVariables: ['@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color'],
indexFileName: 'index.html'
}
module.exports = function override(config, env) {
config = updateConfig(config, env, options)
return config;
};`
> this is my config-override.js file.
here i give themeVariables array for five colors. only @primary-color and @heading-color are updated in dynamically but @text-color not updated dynamically and also @layout-header-color, @layout-body-color, @layout-sider-color are not updated dynamically @mzohaibqc pls help me
We get the following error when deploying to Netlify and we don't see the colors updated as expected although it works nicely in local development:
less.min.js:13
b.exports {type: "Parse", filename: "http://my-site.netlify.com/color.less", index: 0, line: 1, callLine: NaN, …}
callExtract
:
undefined
callLine
:
NaN
column
:
0
extract
:
(3) [undefined, "<!DOCTYPE html><html lang="en"><head><meta charset…a1bc/static/css/main.1eac8156.css'/></head><body>", " <link rel="stylesheet/less" type="text/css" href="/color.less" />"]
filename
:
"http://my-site.netlify.com/color.less"
href
:
"http://my-site.netlify.com/color.less"
index
:
0
line
:
1
message
:
"Unrecognised input"
stack
:
undefined
type
:
"Parse"
__proto__
:
Error
Any idea why we're getting this error?
There's an official theme editor available.
I don't know why they don't advertise it on the home page - I found it by accident.
So you might want to consider deprecating this project, and/or link from the README to the official editor, which is much more complete. (Your project ranks highly in search results on Google, so you might help others find it.)
First of all, amazing work, been searching for this solution for over 3 months.
All works great using window.less.modifyVars(vars).
Amazing feature would be if You could make it also change the css while changing the variables.less file without the need to recompile whole project.
Page reloads take a long time while using this package.
For now I've commented out the config and less files and this makes page reload much faster while in local dev. I wonder if there's a better solution though, and why things take so long to reload while using this package.
I added the config-override.js, variable.less and also index.less file.
and in webpack i added this configuration
const options = {
stylesDir: path.join(__dirname, './../'),
antDir: path.join(__dirname, './../node_modules/antd'),
varFile: path.join(__dirname, './../variables.less'),
mainLessFile: path.join(__dirname, './../index.less'),
themeVariables: ['@primary-color', '@text-color'],
}
const themePlugin = new AntDesignThemePlugin(options);
but on running the development webpack server i am getting this error
node_modules/antd/lib/style/index.less in Missed semicolon
You tried to parse Less with the standard CSS parser; try again with the postcss-less parser.
can you point out is i am doing something wrong or is there any issue with using without create-react-app boilerplate.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.