What If. Dev Edition

Christian Andrei — Wed, 16 Dec 2020 10:51:43 +0000

A lot of topics here in dev are mostly fall on a category of How to, Tips to and Learn to.

But what if there's a category about What if? Well, that's a topic for another... What If.

There is an entertaining platform What if with 12M followers on Facebook and 4.5M subscribers on Youtube at the time of this writing. Its more on science and exploration of possibilities. Here are some awesome topics on it.

What If We Dumped Our Trash into Volcanoes?
What If You Fell From the International Space Station?
What If a Black Neutron Star Entered the Solar System?

The narrator will start with some introduction, then tell what would happen and open another What If topic at the end.

How about on tech? These are some of What If in my mind:

What if jQuery was not free to use before?
What if nodejs never existed?
What if there is no Open Source projects?
What if the idea of reconciliation or Virtual Dom implemented on early 2000?

Hope that great minds and content creators write something like this, that would be very interesting to read.

What's your What If? Comment down below! 👇👇

5 steps to change antd theme on runtime using create-react-app

Christian Andrei — Fri, 30 Oct 2020 09:20:01 +0000

Before we start, install antd on your app (create-react-app) and add some layout, components and toggle switch to it. We will also use antd.css for the default styling of components but we will remove it later and use less instead.

Step 1 - Install packages needed

react-app-rewired
customize-cra
babel-plugin-import
less
less-loader
antd-theme-webpack-plugin

npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd-theme-webpack-plugin  --save-dev

explanation:

react-app-rewired: tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts.
customize-cra: we need customize-cra along with react-app-rewired due to new react-app-rewired@2.x issue.
babel-plugin-import: for importing components on demand.
less: default development language for styling in antd.
less-loader: compiler for translating less into css.
antd-theme-webpack-plugin: a webpack plugin to generate color specific less/css and inject into your index.html file so that you can change Ant Design specific color theme in browser.

Step 2 - Create vars.less file

Create a vars.less file somewhere inside the src folder and inside the file, import the default less that used by antd:

Step 3 - Create config-overrides.js file

On the root directory of your app (where package.json reside), create config-overrides.js file and add the following code:

Some options explanation:

stylesDir: path of the parent directory of vars.less file that you created on Step 2
varFile: path of vars.less file that you created on Step 2
themeVariables: listed values on this are the only less variables that you can modify on Step 5. Here (default less used by antd) are the list of variables that you can add to it.

Note: if you are using less-loader@5 please check this

Step 4 - Modify package.json

On the script part of package.json, we will use react-app-rewired instead of react-scripts:

Note: Do NOT flip the call for the eject script.

You can now start your app:

npm start

Step 5 - Modify less vars in javascript

If the app started without errors, then you are good to go to the final step.

Here is a sample code on how to modify a less variables:

//less variables that will be used here must be declared in themeVariables on config-overrides.js
window.less
    .modifyVars({
        "@primary-color": "#52c41a"
     })
    .then(() => {
        //do other stuff here
     })
     .catch(error => {
         console.error(error);
     });

You can now remove your import antd.css

Live preview: https://antd-change-theme-color.netlify.app/
Code: https://github.com/christianandrei/antd-change-theme-color

Happy coding!

SOON: Antd Darkmode Tutorial!

stay tuned!

DEV Community: Christian Andrei