Introducing a Color Theme
The video explains the importance of implementing a standardized color theme to improve UI presentation. A consistent theme ensures intuitive color usage, visual hierarchy, and cohesive design across components.
Using CSS Variables with Tailwind
A theme.css file is created to define CSS variables for theme colors. These variables extend Tailwind’s existing utility classes, enabling semantic class names like bg-primary and text-primary instead of fixed color values.
Integrating the Theme into the Project
The theme file is imported into the project and verified by applying a primary background color. Restarting the development server confirms that the new color classes are available and functioning.
Benefits of Consistent Naming
Semantic color naming allows easy theme updates, including switching between light and dark modes. This abstraction simplifies maintenance and improves reasoning about color usage in the UI.
Influence of DayZUI
The naming convention is inspired by DayZUI, a Tailwind CSS extension that provides pre-built components and consistent theme structures. By keeping naming consistent while changing underlying values, themes can be swapped efficiently without modifying markup.
Let's tackle the look and feel of this block because this is not looking presentable for actual users. Before we start actually applying proper colors to the block, I want to introduce a color theme. And what a color theme does for us is to standardize the colors we use across the different UI elements so that we always have, let's say, common ground, or we have something that's more
intuitive to use and also colors that work well together. So we have some background colors and then some what is known as primary or secondary colors that fits well on top of these base colors. And having this in place makes it a lot easier to create visual hierarchy in our UI, but it also makes it a lot easier to update our theme or change the theme or
or go from a dark version to a light version because the naming stays consistent. And to do this, we are going into a CSS directory. We will create a file here called theme.css. And I'm just going to copy and paste some code in here. I will make this available in the episode notes, so you can also copy and paste it.
But simply we use this add theme to tailwind to take these, what is literally CSS variables and then extend all of the classes that currently exist with these colors. And what that does is that we can, instead of using something like a BG gray 600, we can say BG primary.
BG base, text primary. So we literally just extending what is already in place from the Tailwind library. And this makes it super easy just to jump in and use these colors when we want to and we can still rely on all the basic things that we get from Tailwind. So to make Tailwind aware, we need to tell it about it. So we're gonna say import.
I think we just provide a path to theme.css. I am gonna jump out and I'm gonna start the development server. Okay, let's jump into the browser. Did something happen? Nothing happened. Okay. Then let me just add something that should be very clear if this theme has been applied or not.
So we're going to take the primary color and say that the main element of the homepage would have this background color as primary. Let's jump in and start one more time. Give it a refresh. And you can see we have a very extinct color here. This is obviously not the background color we're going to be using, but we can see that our primary color has been added to the classes available to us. And we can start to apply these colors where it makes sense.
This will be the focus of the next episode where we're going to go through all of the views and all of the components and make them actually look good with this new color theme. And I quickly want to touch upon where these colors come from. And they come from, or at least the naming where I have taken them from is from this library here called DayZUI, which is an extension of Tailwind CSS. It's an open source library you can add and use.
in your UI, so it has pre-made components that simply just takes a bunch of tailoring classes and combine them together, so that instead of adding a bunch of different ones, we can just say this is a button at our BTN class, for example. And they have this color theme that they use across, or this naming that they use across different kinds of themes. So for example, if you wanted to have a retro theme,
the colors or the naming here stays consistent in the markup but the value simply changes and then you can quickly change it to whatever you feel like looks best for your block. So this is the real power of having a consistent naming that we use throughout the markup so that we can quickly switch our themes if we want to but also for our own sake that it becomes a lot easier to reason about what goes where.
in terms of colors in the UI on the elements that we expose.
