# Changing Color Scheme

We tried to make the process of color scheme customization as easy as possible.

By default ng2-admin has three built-in color profiles: ng2 (default blue scheme), mint and blur. This article will help you to create your own color profile. Let’s say you want to make ng2-admin dark theme.

First we advise you to take some existing colorscheme file as a starting point. For light themes we suggest taking `src/app/theme/sass/conf/colorScheme/_mint.scss` and for dark `src/app/theme/sass/conf/colorScheme/_blue.scss`. As we want a dark theme, we’re taking `blue`.

1) Copy `src/app/theme/sass/conf/colorScheme/_blue.scss` to `src/app/theme/sass/conf/colorScheme/_dark.scss`:

2) Include your colorscheme file in `src/app/theme/sass/conf/conf.scss`.

To do this, replace

    @import 'colorSchemes/ng2';

with

    @import 'colorSchemes/dark';

3) Change the color scheme enabled:

Open `src/app/theme/theme.config.ts`. Uncomment the following line

      //this._baConfig.changeTheme({name: 'my-theme'});

and put your theme name, in our case it is `dark`

      this._baConfig.changeTheme({name: 'dark'});

Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes’ styles.

For example like this:

    . dark .card-body {
      background-color: white;
    }

4) Change the colors:

Now you can start changing the colors. For example, after playing a bit with different colors, we changed the 2 first main variables in `_dark.scss` file:

    $body-bg: #636363;
    $bootstrap-panel-bg: rgba(#000000, 0.2);

After this is done, you need to setup javascript to use the same colors. These colors are used for javascript charts and other components (maps, etc); Let’s completely change the JS colors to a new set. To do this, add the following code to the configuration block inside `src/app/theme/theme.config.ts`:

      let colorScheme = {
        primary: '#209e91',
        info: '#2dacd1',
        success: '#90b900',
        warning: '#dfb81c',
        danger: '#e85656',
      };
      this._baConfig.changeColors({
        default: '#4e4e55',
        defaultText: '#e2e2e2',
        border: '#dddddd',
        borderDark: '#aaaaaa',

        primary: colorScheme.primary,
        info: colorScheme.info,
        success: colorScheme.success,
        warning: colorScheme.warning,
        danger: colorScheme.danger,

        primaryLight: colorHelper.tint(colorScheme.primary, 30),
        infoLight: colorHelper.tint(colorScheme.info, 30),
        successLight: colorHelper.tint(colorScheme.success, 30),
        warningLight: colorHelper.tint(colorScheme.warning, 30),
        dangerLight: colorHelper.tint(colorScheme.danger, 30),

        primaryDark: colorHelper.shade(colorScheme.primary, 15),
        infoDark: colorHelper.shade(colorScheme.info, 15),
        successDark: colorHelper.shade(colorScheme.success, 15),
        warningDark: colorHelper.shade(colorScheme.warning, 15),
        dangerDark: colorHelper.shade(colorScheme.danger, 15),

        dashboard: {
          blueStone: '#005562',
          surfieGreen: '#0e8174',
          silverTree: '#6eba8c',
          gossip: '#b9f2a1',
          white: '#10c4b5',
        },
      });

Here we defined a list of main colors `colorScheme` and then made light and dark versions of those using `colorHelper` methods. We also defined a couple of custom colors for dashboard charts.

That’s basically it! Right now your admin application should look like this:

For further reference, please look in

- Colorscheme scss file (`src/app/theme/sass/conf/colorScheme/_ng2.scss`, `src/app/theme/sass/conf/colorScheme/_mint.scss` and `src/app/theme/sass/conf/colorScheme/_blur.scss`)
- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
- If you want to know how to change the theme to blur, read the following article