Customize theme 🎨

Depending on the product's variability, React Suite provides flexible configurable parameters on the theme design.

Light/Dark theme

React Suite offers Light and Dark 2 sets of themes that you can use depending on the needs of your product or the environment in which you operate.

☀️ Light

@import '~rsuite/lib/styles/themes/default/index.less';
// @import '~rsuite/dist/styles/rsuite-default.css'

🌙 Dark

@import '~rsuite/lib/styles/themes/dark/index.less';
// @import '~rsuite/dist/styles/rsuite-dark.css'

Design standards that can be referenced in custom themes: Light theme, Dark theme.

For customization

The React Suite style uses Less as the development language and defines a series of variables that can be customized using Modify Variables. This includes but is not limited to customizing theme colors, resizing component fillet radii, modifying font styles, replacing auxiliary colors, and so on. The code in the following example is a new action in custom-theme.less.

Import less

Create a separate .less file as follows, and then introduce this file.

@import '~rsuite/lib/styles/themes/default/index.less'; //The default style file.
@import 'custom-theme.less'; // Style customization.

Custom Theme Colors

Sets the theme base color.

@base-color: #00bcd4;

After you configure the theme base color, a set of swatches (@H050 - @H900, H is Hue) reference is generated: constants.less.

Now go to the palette to select the appropriate color or upload your own Logo to preview.

Adjusts the fillet radius of the assembly.

@border-radius-base: 2px;

Modify the font style.

@font-family-base: 'Lucida Grande', 'Avenir Next', 'Helvetica Neue', Helvetica, Arial,
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;
@font-size-base: 14px;

Replace the auxiliary color.

Information, successes, warnings, errors, respectively, the corresponding color, modified to affect the Message](../components/message), Notification and other needs to display the status of the components.

@info-color: #2196f3;
@info-light-color: #e9f5fe;

@success-color: #4caf50;
@success-light-color: #edfae1;

@warning-color: #ffb300;
@warning-light-color: #fff9e6;

@error-color: #f44336;
@error-light-color: #fde9ef;

Disable ripple animation

@button-ripple: false;

Disable IE polyfill

@ie-polyfill: false;

Disable HTML styles reset

@reset-import: false;

More Custom Configurations

We provide a rich variable, if still unable to meet your customized needs, welcome to our issue.

Webpack compiles multiple themes

React Suite provides a Webpack assist tool webpack-multiple-themes-compile, which can generate multiple sets of CSS files according to the configuration when the project is compiled, and then introduce different CSS files in different theme environments to achieve multi-theme switching effect. The principle of implementation is based on the substitution of Less's variables, so it must rely on Less compilation, we will illustrate it by the following example.

First, let's look at the configuration of compiling Less into CSS by Webpack by default:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractLess = new ExtractTextPlugin(`style.[hash].css`);

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        loader: extractLess.extract({
          use: [{ loader: 'css-loader' }, { loader: 'less-loader?javascriptEnabled=true' }]
        })
      }
    ]
  }
  // ...Other configurations.
};

Then, hand the Less file to webpack-multiple-themes-compile and configure the themesConfig parameter to define the variables needed under the theme.

const merge = require('webpack-merge');
const multipleThemesCompile = require('webpack-multiple-themes-compile');

const webpackConfigs = {
  // There is another options.
};

module.exports = merge(
  webpackConfigs,
  multipleThemesCompile({
    themesConfig: {
      default: {},
      green: {
        'base-color': '#008000'
      },
      yellow: {
        'base-color': '#ffff00'
      }
    }
  })
);

If you use html-webpack-plugin, in order to avoid introducing all styles into html, you need to add the excludeChunks parameter to exclude topic-related CSS.

 new HtmlwebpackPlugin({
   ...
+  excludeChunks: ['themes']
 })

Finally, after running the Webpack command, multiple sets of CSS will be generated, and corresponding CSS will be introduced in different theme environments according to their own business requirements, thus implementing multi-topic switching. For detailed implementation, please refer to the example project multiple-themes

├── theme-default.css
├── theme-green.css
└── theme-yellow.css

FAQ

How to configure font files locally?

The icon font files used in Rsuite are deployed in jsDelivr CDN, If you want to deploy locally, you need to modify the path to the icon font:

@icon-font-path: './fonts';

In addition, you will also need to configure url-loader in webpack to load icon font files, webpack 4 configuration example:

{
  test: /\.(woff|woff2|eot|ttf|svg)($|\?)/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 1,
        size: 16,
        hash: 'sha512',
        digest: 'hex',
        name: '[hash].[ext]',
        publicPath: '/'
      }
    }
  ]
}

How to globally modify the component's className prefix, `rs-` ?

First, define @ns in your less file to override the default configuration.

@ns: custom-;

Then, the constant __RSUITE_CLASSNAME_PREFIX__ is injected via webpack , and the className prefix of all components overrides the default rs- by the injected constant.

plugins: [
  //...
  new webpack.DefinePlugin({
    __RSUITE_CLASSNAME_PREFIX__: JSON.stringify('custom-')
  })
];

If it is rendered through the server, add the following code in server.js:

global.__RSUITE_CLASSNAME_PREFIX__ = 'custom-';

If you use create-react-app to create a project, you can modify it with react-app-rewire-less and react-app-rewire-define-plugin. For more details, see Use in create-react-app.