NextJS Admin Dashboard

I created this dummy platform with the assistance of a course provided by Next.js. The platform incorporates essential concepts such as app routing, dynamic routes, protected routes, server actions, and authentication with NextAuth.

Later, I extended the course content by integrating dynamic theming using Tailwind CSS. The dynamic theming feature serves the purpose of demonstrating how arbitrary color theme values can be utilized in a project.

For more information, see the course curriculum on the Next.js Website.

Checkout Demo using these creds - (Email - user@nextmail.com, Pass - 123456)

So What's Dynamic Themeing?

Dynamic Theming is employed to manage distinct aesthetics for various users, user groups, or business groups. There are two approaches to achieve this:

1. Static Theming

   • Themes and colors are directly specified in the code.

   • Changes are made based on some predefined logic.

2. Dynamic Theming

   • Themes and colors are specified on the server side.

   • Your application receives these values through APIs.

With the consideration that theme values (colors) will be stored on server. I have implemented this -

First, I have created a CSS variable with some default value, and I am using that variable in my style (tailwind.config) to define my primary color. Later I am using the document object from javascript to update the value of CSS variable to change my primary color thorughout the app

Checkout repository for details - https://github.com/Prasad-Katkade/nextjs-admin-dashboard (Give ⭐ if you liked explanation)