React Theming

Introduction to React Theming

React theming is an interesting and important topic today because many people prefer adding light and dark modes to their websites and organizations alter the theme of the whole or a portion of their websites to celebrate holidays like Christmas or on special occasions. There are many other common use cases as well.

A web application needs themes to maintain a unified tone throughout the entire application, which is very important. It is used to manage and modify the values for the color, background, font attributes, shadow levels, opacity, etc.

Styled-components, lets you write actual CSS codes to style your components by combining the power of tagged template literals with CSS. Additionally, it eliminates the mapping between components and styles, making it a whole lot simpler to use components as a low-level styling construct.

Ways to Theme React Components

CSS Variables or CSS Custom Properties

CSS variables, also known as CSS custom properties, are a way to assign values to variables and then refer to them using simple vanilla CSS.

The :root pseudo-selector is typically used to declare a CSS variable globally (Remember that variables can also be defined within any other CSS selectors, but only that particular group of elements will have access to them.)

The CSS variable's name is css-variable, and its value is, as you would have guessed its value.

A double -- is added before the variable name to specify a CSS variable.

Here, we've chosen white as the primary color for our app. Anywhere within our style codes, we can use the main-color variable as a value.

The syntax for using a CSS variable is var(—css-variable-name). The var function receives the CSS variable name along with the --, which will get the value of the variable and assign the value to the mentioned property name.

Explanation:

The colors #837ee6 (a shade of purple color) and #e67e8e (a shade of pink color) are what we've set for the variables --main-color and --background-color, respectively. The background color of the button, header, and body will then resolve to a value of the --background-color,  #837ee6, and the value of the --main-color,  #e67e8e.

When run, the style code will result in the following:

Styled-components

To construct a styled React component, styled-components utilizes CSS-in-JS. The Tagged Template Literals feature in JS makes style-components simple and easy to use.

styled-components will provide a button component with style integrated as:

To modify the colors of the styled components, we can now construct a variable to store the background-color, border-color, etc.

Explanation:

The backgroundColor variable controls the button's background color. The button's background color is currently red; if we change it to "blue," the button's background color will change to — blue.

A ThemeProvider is provided to us by styled components. With the help of this ThemeProvider, we can supply themes to the React components as objects to just any hierarchy in the component tree.

Here's an example:

Now that the props theme has been introduced, our button would be expecting an object with the property bgColor, which sets the button's background color.

Code:

Descendant Combinator

Based on the relationship between the selectors, CSS combinators are used to modify certain HTML elements. In general, the relationship is one of a parent and child, parent and grandchild, parent and greatgrandchild, or parent and greatgreat-child.

The descendent combinator is one of them. We can style child elements nested within a parent element using this combinator.

No matter how deeply a child element is nested within its parent element, a descendant combinator can apply the styles. The child, grandchild, great-grandchild, and other components within the parent element would be impacted by the style. Therefore, it would be perfect to apply this concept to theming.

Example:

This will set the color of all h4 elements within a div element to red.

Class selectors and other acceptable CSS selector types are all acceptable. Here's an example of a class selector:

This rule will apply to all the buttons included within class outer.

Explanation:

We have two themes:

• theme-red
• theme-black.

All child elements with the .theme class name will be given a red background if we apply the .theme-red to an element's class name. All elements with the class name ".theme" will be given a black background if the property ".theme-black" is applied to an element.

All child elements with the class ".theme" will update their background color from red to black if the name of a parent element is changed from ".theme-red" to ".theme-black".

When we click the "Set Theme(black)" button, the class ".theme-red" in the div is removed and the class "theme-black" is applied. This will alter the background color of the two buttons to black.

The current theme used is managed by the local state. When the buttons are clicked to alter the component's theming, the state will be updated with the theme name.

Example

Although it's nice to have a standard set of React components you can reuse, there are a few issues with this approach, not the least of which is how to modify the styling of these components to fit a new theme. This issue has certainly come up frequently for you. You wish to use a button component you have in another project. It should function exactly as before, but you want to add a border radius and a new color scheme for each state of the button (active, hover, focus, etc.). We, therefore, need the means to be able to update these kinds of styling properties for just any number of components when building a new set of components.

Let's start by considering how our theme might link to the styles of our components. To maintain consistency between projects, we probably don't want to allow the theme to modify every aspect of the component's style. We would like to modify the border color, background color, and so on.

Example:

We have a technique for figuring out our final style at runtime, and we can continue to work on our fundamental button styles in the knowledge that the button theme will be used the same way.