Thankfully, we don't have to implement it ourselves since react-css-theme-switcher comes with a built-in solution. To avoid overriding our styles, we can mark an insertion point in our HTML which will allow it to be injected at that location, avoiding collisions. On this screenshot, you may observe that the style tags which are build-time CSS declarations are located before those pre-fetched. You may notice our styles are being appended to the head on runtime which means that those that were added on build time will be possibly overridden. Inside our playground, we will be able to change smoothly between themes! Install Gulp and necessary dependencies to minify, use postcss and resolve imports: yarn add -D gulp gulp-less gulp-postcss gulp-debug gulp-csso autoprefixer less-plugin-npm-importĪnd create a gulpfile.js : const gulp = require ( 'gulp' ) const gulpless = require ( 'gulp-less' ) const postcss = require ( 'gulp-postcss' ) const debug = require ( 'gulp-debug' ) var csso = require ( 'gulp-csso' ) const autoprefixer = require ( 'autoprefixer' ) const NpmImportPlugin = require ( 'less-plugin-npm-import' ) gulp. Also, it has great support for minifying and compiling Less. Therefore, I decided to go with the Gulp task runner since it applies a pipeline paradigm with files that maintain code simple and maintainable. Using scripts can result in extensive and unreadable code. Using Webpack would mean creating a plugin and with every change, the styles would have to compile which will slow down development speed for styles that will remain relatively static. There are several ways to compile Less stylesheets: using a task runner, a module bundler, or scripts. On this step, we have to achieve two main objectives: compile Less files to CSS and then append these to the public or static folder so they can be available for the client to be pre-fetched and injected. For example, for the light theme: // light-theme.less '~antd/lib/style/color/colorPalette.less' '~antd/dist/antd.less' '~antd/lib/style/themes/default.less' // These are shared variables that can be extracted to their own file : #00adb5 : 4 px įor the dark theme: // dark-theme.less '~antd/lib/style/color/colorPalette.less' '~antd/dist/antd.less' '~antd/lib/style/themes/dark.less' : #00adb5 : 4 px : #303030 : #303030 : #303030 : #6f6c6c : #424242 : #424242 : #424242 : #424242 : #424242 Compiling Less Files With Gulp To achieve this, we just have to import the variables and styles that we need for each theme. The first thing we have to do is creating the Less stylesheets that will contain AntD styles. I tried many approaches to solving this issue, from modifying CSS directly to react-app-rewire-antd-theme, and arrived at a solution that is production-ready: swapping between pre-fetched less-compiled CSS stylesheets on runtime using react-css-theme-switch. This may work with a small number of variables, however, for hundreds of variables for a dark theme, it is just not feasible. This injects the less file with the colors to modify directly in HTML and using window.modifyVars to recompile the styles with the new variables on runtime. To fix the lack of modification there exists libraries like react-app-rewire-antd-theme. This means you can't modify its variables or properties as you would do through Less.js. However, the way a React handles this is by using Webpack to compile the styles to CSS and then add them to the build. Less stylesheets are really good for supercharging CSS and handle ever-increasing styles. If you want to change, for example, the primary color to any color on runtime then you will have to use a library like react-app-rewire-antd-theme. Note: This tutorial will only work with static themes: themes that are just meant to compiled once on the build. In this post, I'll explore how I solved this conundrum. This means that in order to modify the variables dynamically you would have to recompile the styles and in runtime, this is not feasible. When I faced the need to implement a dark mode for my dashboard I noticed AntD didn't have a provider for styles instead it utilizes Less Stylesheets. However, there is a big disadvantage: lack of dynamic theming. I love it a lot and have been using it to create my student dashboard. How to Change Between Light and Dark Themes in Ant Designĭon't want to code along? Check out the GitHub respository of this post with a full example!Īnt Design is a great UI library for bootstrapping an application quickly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |