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 the default system themes involves defining the `$ct-themes` map in your **variables** file. Here's the _default_ definition inside `css-theming`:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',
    // 'colors': overrides $colors-[light|dark]
    // 'use-colors': if given, specifies which colors from the default palette to include
    // 'colors-text-scale': overrides $colors-text-scale-[light|dark]
    // 'semantic-colors': overrides $semantic-colors
    // 'font': overrides $font
    // 'text-color': overrides $text-color-[light|dark]
    // 'bg-main': overrides $bg-main-[light|dark]
    // 'bg-input': overrides $bg-input-[light|dark]
    // 'swatches': overrides $swatches
    // 'fg-target': overrides auto computed fg targets
    // 'fg-swatches': overrides $fg-swatches-[light|dark]
    // 'bg': overrides $bg-[light|dark]
    // 'bg-focus': overrides $bg-focus-[light|dark]
    // 'bd': overrides $bd-[light|dark]
    // 'bd-focus': overrides $bd-focus-[light|dark]
  ),
  'default-dark': (
    'brightness': 'dark',
  ),
) !default;
```

Some of the theme props are well known by `css-theming` and it'll try to fall back to defaults when you don't override them. All those props are mentioned in the code snippet above as comments. The only required prop is `brightness`.

---

In addition to those well-known props, you can add whatever prop you want to change between themes. We’ll discuss this [later](https://www.educative.io/courses/css-theming-for-professionals/adding-more-theme-props/draft). Next, let's focus on customizing colors.

Customizing the default system themes involves defining the `＄ct-themes` map in your **variables** file. Here's the _default_ definition inside `css-theming`:

```scss
$ct-themes: (
  'default': (
    'brightness': 'light',
    // 'colors': overrides $colors-[light|dark]
    // 'use-colors': if given, specifies which colors from the default palette to include
    // 'colors-text-scale': overrides $colors-text-scale-[light|dark]
    // 'semantic-colors': overrides $semantic-colors
    // 'font': overrides $font
    // 'text-color': overrides $text-color-[light|dark]
    // 'bg-main': overrides $bg-main-[light|dark]
    // 'bg-input': overrides $bg-input-[light|dark]
    // 'swatches': overrides $swatches
    // 'fg-target': overrides auto computed fg targets
    // 'fg-swatches': overrides $fg-swatches-[light|dark]
    // 'bg': overrides $bg-[light|dark]
    // 'bg-focus': overrides $bg-focus-[light|dark]
    // 'bd': overrides $bd-[light|dark]
    // 'bd-focus': overrides $bd-focus-[light|dark]
  ),
  'default-dark': (
    'brightness': 'dark',
  ),
) !default;
```

Some of the theme props are well known by `css-theming` and it'll try to fall back to defaults when you don't override them. All those props are mentioned in the code snippet above as comments. The only required prop is `brightness`.

---

In addition to those well-known props, you can add whatever prop you want to change between themes. We’ll discuss this [later](https://www.educative.io/courses/css-theming-for-professionals/adding-more-theme-props/draft). Next, let's focus on customizing colors.

This lesson shows how to override the default system themes definition.

Before Getting Started

Theory

Using css-theming

Samples

Customizing System Themes