Dynamic Theme and It's an implementation in frontend

Learn the essential skills and steps to become a full stack developer. Start your journey today with this comprehensive guide for beginners!

Last Update: 11 Oct 2024

Dynamic Theme and It's an implementation in frontend image

Managing Client Requirements: The Challenge of Evolving Preferences

In front-end development, our primary responsibility is to create user-friendly and interactive interfaces. However, working with clients often means dealing with shifting requirements. A common scenario is when a client, after months of development, decides to change a design aspect they had previously approved. What complicates matters further is when the client isn’t sure of what they want, resulting in constant back-and-forth.

For example, one of our clients decided midway through development that she wanted to change the theme color of her website. Initially, she had approved a design and color combination provided by our UI/UX team, but her preferences changed. Moreover, she wasn’t sure which new colors she liked and even hinted that her choice might change again. To address this, we proposed a Dynamic Color Theme solution.

The Power of a Dynamic Color Theme

To solve the problem of fluctuating color preferences, we introduced a feature allowing the client to easily set colors for various UI elements. This covered everything from background and primary colors to text, button styles, shadows, hover states, and more. Essentially, the client could customize the color theme dynamically, removing her dependence on developers for future changes.

In our Next.js project, we implemented this by introducing a ThemeProvider in the root layout. Here’s an example of how we structured the main layout page:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${poppins.className} ${ppEiko.variable}`}>
        <SessionWrapper>
          <ReduxProvider>
            <ToastProvider>
              <ThemeProvider>
                <Header />
                <main>{children}</main>
                <Footer />
              </ThemeProvider>
            </ToastProvider>
          </ReduxProvider>
        </SessionWrapper>
      </body>
    </html>
  );
}

The ThemeProvider component manages the color theme across the entire website, making the experience seamless for both the client and the users.

Fetching Dynamic Theme Data with RTK Query

Inside the ThemeProvider, I fetched all the color theme data from the backend using RTK Query. However, you could easily use Axios or any other API tool for the same purpose. Here’s the implementation:

"use client";
import { useGetColorsThemeQuery } from "@/features/general/generalSlice";
import { updateColorVariables } from "@/utils/colors/updateColorVariables";
import { useEffect } from "react";

const ThemeProvider = ({ children }) => {
  const { data, error, isLoading } = useGetColorsThemeQuery();

  useEffect(() => {
    if (data) {
      const colors = data.data?.colors; // Adjust according to your API response structure
      updateColorVariables(colors); // This updates the CSS variables dynamically
    }
  }, [data]);

  return <div>{children}</div>;
};

export default ThemeProvider;

The useGetColorsThemeQuery hook fetches the color data, which is then passed to a utility function called updateColorVariables. This function updates the CSS variables at runtime, ensuring the theme is applied dynamically.

export const updateColorVariables = (colors) => {
  Object.keys(colors).forEach((key) => {
    document.documentElement.style.setProperty(--${key}, colors[key]);
  });
};

Integrating Tailwind CSS with Dynamic Variables

The final step in implementing a dynamic color theme involves integrating these dynamic variables into Tailwind CSS. By defining the colors in the tailwind.config.js file as CSS variables, Tailwind automatically picks up and applies the client’s chosen colors throughout the UI. Here’s an example of how it works:

colors: {
  background: "var(--background_color)",
  primary: "var(--primary_color)",
  secondary: "var(--secondary_color)",
  secondary_text: "var(--secondary_text_color)",
  buttonBg: "var(--button_bg_color)",
  buttonText: "var(--button_text_color)",
  hover: "var(--hover_color)",
  text: "var(--text_color)",
  shadow: "var(--shadow_color)",
  sidebarBg: "var(--sidebar_bg)",
  sidebarHover: "var(--sidebar_hover)",
}

With this setup, the client can modify the theme directly through the backend, without relying on developers for every update. This flexibility not only improves the client’s experience but also saves valuable development time. Ultimately, the client was thrilled with the solution, as it gave her complete control over her website’s look and feel.

The Benefits of a Dynamic Theme: Empowering Clients and Enhancing Project Flexibility

By implementing a dynamic theme, you empower your clients to make real-time design adjustments, enhance project scalability, and ensure that your application can adapt to changing requirements effortlessly. Whether you’re building a simple site or a complex web application, the dynamic theme approach is a valuable addition to your front-end toolkit.

Frequently Asked Questions

A dynamic theme in front-end development refers to the ability of users or clients to change the appearance of the website or application by modifying colors, styles, or other UI elements without requiring further development. This includes customizable elements like background color, text color, button styles, hover effects, etc., that can be dynamically altered even after the initial design is locked in.

By Mediusware Editorial Team

Content Team at Mediusware

We are the Mediusware Editorial Team, passionate about crafting insightful content on technology, software development, and industry trends. Our mission is to inform, inspire, and engage our audience with well-researched articles and thought leadership pieces. With a deep understanding of the tech landscape, we aim to be a trusted source of knowledge for professionals and enthusiasts alike.