Introduction:

In my previous blog, I talked about the advantages of using a theme to enhance coding efficiency, maintainability, and ease of customization. This blog explores additional techniques that have proven invaluable in React styling.

The Anatomy of a Theme

Introducing Variable Maps for Comprehensive Theming in React

Let’s revisit the concept of variable mapping within themes. Variable maps in SCSS offer a robust solution to encapsulate multiple styling attributes within a single variable. This approach enhances organization and readability and provides a scalable and flexible foundation for theming in your React projects.

In the earlier blog, I showcased the use of styling variables to store singular values like colors or font sizes. However, the need for a more structured and versatile approach becomes apparent as applications grow in complexity. Variable maps allow us to group related styling properties, creating a coherent and easily manageable theme for various components. Instead of scattering these properties across the codebase, we can encapsulate them in a single variable map, significantly improving organization:

// _variables.scss

$text-theme: (
  font-family: 'Arial, sans-serif',
  font-size: 16px,
  color: #333,
  line-height: 1.5,
);

Flexibility and Extensibility

By grouping related properties, we can create a unified source of truth for a specific design aspect. Variable maps provide flexibility and extensibility. Let’s extend our theme concept to include heading styles:

// _variables.scss

$heading-theme: (
  font-size: (
    h1: 2em,
    h2: 1.8em,
    h3: 1.6em,
  ),
  color: #1a1a1a,
);

This enhances readability and makes it effortless to introduce new attributes or modify existing ones. Need to adjust heading sizes or add a new heading level? Simply update the variable map, and the changes will propagate seamlessly throughout the project.

Examples: Text, Heading, and Box Themes

Let’s bring it all together with examples. In the main SCSS file:

// styles.scss

@import 'variables';

body {
  // Apply the entire text theme
  @each $property, $value in $text-theme {
    #{$property}: $value;
  }
}

h1,
h2,
h3 {
  // Apply the entire heading theme
  @each $property, $value in $heading-theme {
    #{$property}: $value;
  }
}

.example-box {
  // Apply the entire box theme
  @each $property, $value in $box-theme {
    #{$property}: $value;
  }
}

We maintain a clean and concise code structure by referencing the entire theme variable. The flexibility to update and extend these themes makes them invaluable tools for creating maintainable React applications.

Applying Themes to Components

Now that we understand the power of theme variables encapsulating multiple attributes, let’s explore how to directly apply these themes to React components.

Let’s create a reusable React component, such as a Card. Instead of scattering styling properties within the component’s styles, we can directly apply a comprehensive theme variable to achieve a unified and visually coherent design.

Here, I am defining a card-theme variable that includes attributes like border, background color, padding, and any other styling specifics:

// _variables.scss

$card-theme: (
  border: 1px solid #ccc,
  background-color: #f5f5f5,
  padding: 15px,
);

Now, in your component styles, directly apply the entire card-theme to create a visually consistent Card component:

// Card.js

import React from 'react';
import './styles.scss'; // Import your main styles that reference variables

const Card = () => {
  return (
    <div className='card'>
      <h2>Title</h2>
      <p>Card content goes here...</p>
    </div>
  );
};

In your main SCSS file (styles.scss), apply the entire theme to the card class:

// styles.scss

@import 'variables';

.card {
  // Apply the entire card theme
  @each $property, $value in $card-theme {
    #{$property}: $value;
  }

  // Additional styling specific to the card component can go here
  // ...
}

Theming Customization

Beyond global changes, dynamic theming also allows for component-specific customization. Suppose you have a particular card that requires a different background color. Rather than creating an entirely new theme variable, you can override specific attributes for that instance:

// styles.scss

.card.special-card {
  @each $property, $value in $card-theme {
    #{$property}: $value;
  }
  background-color: #ffcc00; // Custom background color for a special card
}

Directly applying theme variables to React components streamlines the styling process and fosters a design system that is both cohesive and adaptable. From a development perspective, the dynamic nature of theming simplifies the maintenance process. Changes are centralized, reducing the risk of oversights, and the codebase remains agile, adapting swiftly to design iterations. By leveraging the power of theming customization, you’ll enhance the user experience and streamline your development workflow.