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

## Preface

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, seen in the embrace of electronics for modern sleek looking desktop apps, we start to see a bigger emphasis on highly customized looks for apps. Everyone's racing to create that _dark theme_, right?

The goal of this course is two-fold:
- Devise practical methods and patterns around theming and outline some common problems and their solutions.
- Learn how to use `css-theming`. We wouldn't want to repeat the theming plumbing each time we build a new app, so `css-theming` is a publicly distributed package that implements all patterns discussed.

While discussing problems and solutions in the first part, we'll be building our _theoretical_ system, the system that is implemented in `css-theming`.

As such, this course is not a documentation of CSS features! It's rather the practical results of my experience over years developing highly customized complex UIs using CSS. I will express some opinionated views, but you can use the knowledge obtained to develop any variation if you so desire.

Some of our discussions will be around colors, as this is the most important part of a theme. Something I want to emphasize here is that developing a consistent system that can also understand different **brightness** levels is hard and requires intricate planning. For example, Slack has had support for themes since the start but only introduced a true _dark_ theme not long ago. There's an inherit complexity in designing a well thought out _dark_ theme as we'll see.

<img src="/udata/1kVePp8yBYP/niai.gif" loading="lazy" />
from <a src="http://niai.mrahhal.net">niai.mrahhal.net</a>

But a _dark_ theme is all the rage today and it's being embraced more and more as time goes on, so our system will definitely have to support this. In addition, the system we create must make it easy to reason about what color/shade/swatch to use when and where.

Finally, we're going to use SCSS on top of CSS to make our life a bit easier. [SCSS](https://sass-lang.com/guide) is a superset of CSS that gives us more control than CSS. It won't be an essential piece here, and you're welcome to use LESS or any other framework, but `css-theming` is implemented using SCSS.

## GitHub

This course comes with the [css-theming github repo](https://github.com/mrahhal/css-theming). You'll use the `css-theming` package to access the SCSS and JS/TS tools in your project.

## How we'll do this

I like to hammer out the theory before implementation. In the first part, we'll learn multiple different patterns and solve problems around theming. The second part is [Using css-theming](https://www.educative.io/courses/css-theming-for-professionals/installation); this will act as a full guide to using and customizing `css-theming` to suit every app’s needs.

---

Now that you’re familiar with what we'll be learning throughout this course, let's dig deep into the main concepts for mastering CSS theming.

# Preface

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, seen in the embrace of electronics for modern sleek looking desktop apps, we start to see a bigger emphasis on highly customized looks for apps. Everyone's racing to create that _dark theme_, right?

The goal of this course is two-fold:
- Devise practical methods and patterns around theming and outline some common problems and their solutions.
- Learn how to use `css-theming`. We wouldn't want to repeat the theming plumbing each time we build a new app, so `css-theming` is a publicly distributed package that implements all patterns discussed.

While discussing problems and solutions in the first part, we'll be building our _theoretical_ system, the system that is implemented in `css-theming`.

As such, this course is not a documentation of CSS features! It's rather the practical results of my experience over years developing highly customized complex UIs using CSS. I will express some opinionated views, but you can use the knowledge obtained to develop any variation if you so desire.

Some of our discussions will be around colors, as this is the most important part of a theme. Something I want to emphasize here is that developing a consistent system that can also understand different **brightness** levels is hard and requires intricate planning. For example, Slack has had support for themes since the start but only introduced a true _dark_ theme not long ago. There's an inherit complexity in designing a well thought out _dark_ theme as we'll see.

<img src="/udata/1kVePp8yBYP/niai.gif" loading="lazy" />
from <a src="http://niai.mrahhal.net">niai.mrahhal.net</a>

But a _dark_ theme is all the rage today and it's being embraced more and more as time goes on, so our system will definitely have to support this. In addition, the system we create must make it easy to reason about what color/shade/swatch to use when and where.

Finally, we're going to use SCSS on top of CSS to make our life a bit easier. [SCSS](https://sass-lang.com/guide) is a superset of CSS that gives us more control than CSS. It won't be an essential piece here, and you're welcome to use LESS or any other framework, but `css-theming` is implemented using SCSS.

# GitHub

This course comes with the [css-theming github repo](https://github.com/mrahhal/css-theming). You'll use the `css-theming` package to access the SCSS and JS/TS tools in your project.

# How we'll do this

I like to hammer out the theory before implementation. In the first part, we'll learn multiple different patterns and solve problems around theming. The second part is [Using css-theming](https://www.educative.io/courses/css-theming-for-professionals/installation); this will act as a full guide to using and customizing `css-theming` to suit every app’s needs.

---

Now that you’re familiar with what we'll be learning throughout this course, let's dig deep into the main concepts for mastering CSS theming.

Before jumping in, let's talk about what we're actually learning in this course.

Before Getting Started

Theory

Using css-theming

Samples

Introduction

Preface #

GitHub #

How we’ll do this #