# 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](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.

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

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

```css
@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...

```css
@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.

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

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

```css
@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...

```css
@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.

```css
@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.
