DarkModeToggle Component
Overview
The DarkModeToggle
component provides users with the ability to switch between light, dark, and system themes.
Location
The source code for the DarkModeToggle
component is located in the /modules/shadcn/DarkModeToggle.js
file.
Usage
To use the DarkModeToggle
component, follow these steps:
1. Import the Component
First, import the DarkModeToggle
component from the correct module:
import DarkModeToggle from "@/modules/shadcn/DarkModeToggle";
2. Integrate the Component
You can include the DarkModeToggle
component in your page or layout component as follows:
export default function HomePage() {
return (
<div>
<DarkModeToggle />
{/* Other page content */}
</div>
);
}
This will add a toggle button that allows users to switch between light, dark, and system themes.
Additional Notes
- This module will only work when dark mode is enabled. For more information, refer to the documentation: Dark Mode Support
- Place the
DarkModeToggle
component in a consistent location across your application, such as in the header or navigation bar. - The
NavBar
module in StartupBolt, which serves as the navigation bar, supports theDarkModeToggle
component. You can enable or disable this feature as needed. For more information, refer to the documentation: NavBar Module.
Conclusion
By following the steps above, you can easily add a dark mode toggle feature to your Next.js application using the pre-built DarkModeToggle
component in StartupBolt.