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
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.
Get the best of our content straight to your inbox!
By submitting, you agree to our privacy policy.
