Dark Mode

The ThemeChanger component allows users to toggle between light, dark, and system themes in a web application. Offers a seamless way to manage theme preferences, ensuring that users can personalize their experience according to their visual comfort or system settings.

Features

🎨 Conditional Styling: Leverages CSS modules and the CLSX library for dynamic class assignment based on the current theme.

📱 Responsive UI: Provides a user-friendly interface for theme selection with visual feedback on the active theme.

🖥️ Modal Integration: Incorporates a modal system for displaying the theme changer interface.

What's Included

< ThemeChanger />

The ThemeChanger component provides a user interface for switching between different display themes (light, dark, and system default) within the web application.

< useModal />

The useModal hook provides an easy way to manage modals by calling methods that controls the display of modal dialogs. This hook simplifies the process of triggering modal actions, making it seamless to integrate modal functionality into toggling theme settings in the ThemeChanger component.

< CustomSwitch />

The CustomSwitch component is used in the ThemeChanger to handle the toggle switch.

Style Variables

The ThemeChanger component utilizes CSS variables to define and apply theme-specific styles for both light and dark modes, toggles between these themes, dynamically updating the CSS variables to reflect the user's preference. These variables are defined within the following selectors:

.light,
:root,
[data-theme='light'] {
  --black: #fff;
  --white: #000;
  --background: var(--black);
  --background-image: url('/bg-light.png');
}
 
.dark,
[data-theme='dark'] {
  --black: #000;
  --white: #fff;
  --background: var(--black);
  --background-image: url('/bg-dark.png');
}

Set Up Component's Needs

To use the ThemeChanger component effectively, you need to set up a ThemeProvider in your Next.js application. This provider will manage the theme state across your application.

  1. Install Required Packages: Ensure you have next-themes installed by running the following command: npm install next-themes
  2. Create a ThemeProvider Component: Set up a ThemeProvider in your application. Create a file named providers.js and include the following code:
import { ThemeProvider } from 'next-themes';
 
const Provider = ({ children }) => {
  return <ThemeProvider> {children} </ThemeProvider>;
};
 
export default Provider;
  1. Wrap Your Application: Ensure that your entire application is wrapped with the ThemeProvider. Edit your _app.js or app/layout.js file (depending on your Next.js version) to include the provider:
  2. To use the ThemeChanger component in your application, import it into a parent component or page where you want users to manage their theme preferences.