Gain insights into practical CSS theming methods, delve into problem-solving, and discover the css-theming package to create highly customizable, dark mode-friendly apps in this course.

CSS isn’t what it used to be. Today, you’ll be hard-pressed to find a strong, straightforward, and expressive UI language that can beat modern CSS. As the tech world moves more and more towards web-based frameworks for UI, we start to see a bigger emphasis on highly customized looks for apps.

In this course, you'll learn how to properly develop apps that are theme aware. This course is split into two sections: in the first section, you will learn the practical methods and patterns around theming and discover common problems and their solutions. In the second section, you will get hands-on experience with the css-theming package and through it you'll learn how to customize every facet of your app. Most importantly, no matter the kind of app you're developing, users have come to expect dark mode support nowadays as a given.

By the end of this course you’ll be able to create stunning apps that are highly customizable by either applying what you learned in your own way or using the css-theming package.

CSS Theming for Professionals

# Customizing main colors

By default, `css-theming` will fall back to the following pre-defined colors map for each brightness:

```scss
// Colors used in light themes.
$ct-colors-light: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f48701,
  'red': #ff1d25,
  'pink': #ff39f6,
  'purple': #952ff7,
  'violet': #c600ff,
  'indigo': #5700ff,
  'blue': #448aff,
  'green': #43b581,
) !default;

// Colors used in dark themes.
$ct-colors-dark: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f69f34,
  'red': #ff3948,
  'pink': #ff61f8,
  'purple': #d835ff,
  'violet': #aa59f9,
  'indigo': #7933ff,
  'blue': #69a1ff,
  'green': #43b581,
) !default;
```

As you can tell, the defined color only mentions the _main_ color. The _main_ color refers to the **500** swatch of the color: `--{color}-500`, so in the case of `red` for example, it'll be `--red-500`. All other swatches are computed dynamically by `css-theming`.

If you want to override the color map in the theme, you can provide a similar map. You're free to define any number of colors from above, `css-theming` will fall back to the default for the other colors.

If you want to override the default for all themes, you can set `$ct-colors-light` or `$ct-colors-dark` to a new map of colors as long as they follow the same syntax. For example:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',
    'colors': (
      'red': #323232,
       ...
    )
  ),
  ...
);
```

# Customizing semantic colors

Overriding semantic color targets is very similar, you'll have to provide a similar map to the following default:

```scss
$ct-semantic-colors: (
  'primary': 'purple',
  'success': 'green',
  'info': 'blue',
  'warning': 'orange',
  'danger': 'red',
) !default;
```

`$ct-semantic-colors` maps a _semantic color_ to a _target color_ from the color map in the same theme. For example: `primary` to `purple`, `success` to `green`, and so on.

The map assigns a semantic color name (i.e `primary`) to a color target name from the color map in the same theme (i.e `purple`).

# Customizing swatches

This is the default definition of the swatches in `css-theming`:

```scss
$ct-swatches: (
  50: 15%,
  75: 30%,
  100: 40%,
  200: 50%,
  300: 60%,
  400: 80%,
  500: 100%,
  600: 120%,
  700: 140%,
  800: 160%,
  900: 180%,
) !default;
```

`css-theming` uses this map to compute color swatches. You're free to override this to anything you like. The **key** (i.e `50`, `75`, etc.) in the map will act as the _swatch's name_. For example, from this map, the following variables will be produced for each color:

```css
--{color}-50: ...
--{color}-75: ...
--{color}-100: ...
...
```

The **value** in the map will be used as the percentage of the mixing between the color and the whitish/blackish color `css-theming` chooses, depending on the theme's brightness.

---

The same method follows for the rest of the props, you can always check the defaults in the src SCSS to figure out what you're supposed to override.

# Customizing main colors

By default, `css-theming` will fall back to the following pre-defined colors map for each brightness:

```scss
// Colors used in light themes.
$ct-colors-light: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f48701,
  'red': #ff1d25,
  'pink': #ff39f6,
  'purple': #952ff7,
  'violet': #c600ff,
  'indigo': #5700ff,
  'blue': #448aff,
  'green': #43b581,
) !default;

// Colors used in dark themes.
$ct-colors-dark: (
  'grey': #697c93,
  'brown': #96663c,
  'yellow': #f1c40f,
  'orange': #f69f34,
  'red': #ff3948,
  'pink': #ff61f8,
  'purple': #d835ff,
  'violet': #aa59f9,
  'indigo': #7933ff,
  'blue': #69a1ff,
  'green': #43b581,
) !default;
```

As you can tell, the defined color only mentions the _main_ color. The _main_ color refers to the **500** swatch of the color: `--{color}-500`, so in the case of `red` for example, it'll be `--red-500`. All other swatches are computed dynamically by `css-theming`.

If you want to override the color map in the theme, you can provide a similar map. You're free to define any number of colors from above, `css-theming` will fall back to the default for the other colors.

If you want to override the default for all themes, you can set `＄ct-colors-light` or `＄ct-colors-dark` to a new map of colors as long as they follow the same syntax. For example:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',
    'colors': (
      'red': #323232,
       ...
    )
  ),
  ...
);
```

# Customizing semantic colors

Overriding semantic color targets is very similar, you'll have to provide a similar map to the following default:

```scss
$ct-semantic-colors: (
  'primary': 'purple',
  'success': 'green',
  'info': 'blue',
  'warning': 'orange',
  'danger': 'red',
) !default;
```

`＄ct-semantic-colors` maps a _semantic color_ to a _target color_ from the color map in the same theme. For example: `primary` to `purple`, `success` to `green`, and so on.

The map assigns a semantic color name (i.e `primary`) to a color target name from the color map in the same theme (i.e `purple`).

# Customizing swatches

This is the default definition of the swatches in `css-theming`:

```scss
$ct-swatches: (
  50: 15%,
  75: 30%,
  100: 40%,
  200: 50%,
  300: 60%,
  400: 80%,
  500: 100%,
  600: 120%,
  700: 140%,
  800: 160%,
  900: 180%,
) !default;
```

`css-theming` uses this map to compute color swatches. You're free to override this to anything you like. The **key** (i.e `50`, `75`, etc.) in the map will act as the _swatch's name_. For example, from this map, the following variables will be produced for each color:

```css
--{color}-50: ...
--{color}-75: ...
--{color}-100: ...
...
```

The **value** in the map will be used as the percentage of the mixing between the color and the whitish/blackish color `css-theming` chooses, depending on the theme's brightness.

---

The same method follows for the rest of the props, you can always check the defaults in the src SCSS to figure out what you're supposed to override.

This lesson discusses how to customize and override colors and their swatches.

Before Getting Started

Theory

Using css-theming

Samples

Customizing Colors

Customizing main colors