Themes

Remix CSS abstracts all the basic styling into a theme file, which is basically a set a variables that populates values throughout the rest of the stylesheets. Using the theme file makes it very easy to swap out values across your stylesheet.

Using the Default Theme

To use the default theme, follow the instructions on the Installation page.

Using a Custom Local Theme

To use a custom local Remix CSS theme, copy the contents of the default.theme.less file found in the root directory of the remix-css NPM module to a new local .less file. Change the variables to your liking and add any custom global styling to the bottom of the theme file (or as an import). Make sure to update the path to the remix-css styles at the bottom of the theme file.

With the Less Resolver

If you're using the less resolver, you will need to add the path to the remix-css NPM package in the node_modules folder to the paths option of the less-loader.

{
    ...
    paths : path.resolve(__dirname, 'node_modules/remix-css/src/less');
}

Then in your theme file, just import the styles.less file.

@import 'styles.less';

With the Webpack Resolver

If you're using the Webpack resolver, you can import the styles file directly from the node_modules folder using the following...

@import '~remix-css/src/less/styles.less';

Using a Custom Third-Party Theme

To use a custom third-party Remix CSS theme, simply install the theme via NPM and import it into your main stylesheet file. Any styles that come after the import will have access to the variables in the theme.

Using the Less Resolver

If you're using the less resolver, you will need to add the path to the remix-css NPM package in the node_modules folder to the paths option of the less-loader.

{
    ...
    paths : path.resolve(__dirname, 'node_modules/remix-css-theme-module');
}

Then in your theme file, just import the theme.less file.

@import 'theme.less';

With the Webpack Resolver

If you're using the Webpack resolver, you can import the theme file directly from the node_modules folder using the following...

@import '~remix-css-theme-module/theme.less';

External Stylesheets

If you're creating any stylesheets that are not attached to your main stylesheet file, you can use the theme variables by importing the theme file as a reference.

@import (reference) 'path/to/the/theme.less';

Creating Your Own Theme

If you love your theme so much you want to share it, simply fork the ronniesan/remix-css-theme repo and publish your own theme to NPM using the following naming convention:

remix-css-theme-<my-theme-name>

Using this naming convention makes it easy for people using Remix CSS to discover your theme.