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 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 the DarkModeToggle 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.