Setting Up CSS Variables for Theming | How to Build an Inbox UI Ep. 18

We lay the foundations for light and dark theming with CSS variables, and then add our reset styles, typography specs, and accessibility helper classes.

Series playlist:

CRM Inbox by Alper Tornaci on Dribbble:

View the Figma file for this project:

View the code for this project in GitHub:

Personal website:

Music: “Feeling Great” by Zeeky Beats on Youtube:

[brendanrogers]

Nobody ever explains these things with such beautiful clarity. Thank you so much, and please be proud of your videos.

[AfonsoMaia-]

I learn a new trick every time i watch your videos, keep them coming you are doing great!

[CommunityAllSeasons]

Another absolutely awesome tutorial, the quality of this is so high!

[staybalancedn]

Is this the only channel that shows design to actual coding on youtube. Amazing. Where else can i learn this?

[sohammitra]

Amazing series! Looking forward to the next episode soon 🙌

[JacquesvanWyk]

Your channel is going to be big. Great content.

[isaacmijangos]

where did he go? quality of his videos are very good!

[antischulz]

Friend, Please mooore videos! Absolutly super guy!

[hugoarnoult]

Awesome videos! Why do you use CSS var(--main-bg-color) rather than SCSS $main-bg-color ? Thank you :)

[MrMangkokoo]

which theme your vscode uses? thank you