How To Setup Multiple Themes In NextJS With React-Bootstrap?

Last Updated : 26 Aug, 2024

Multiple themes mean providing users with different visual styles or color schemes for an application, enhancing user experience and personalization. In this article, we'll explore how to set up multiple themes in a Next.js application using React-Bootstrap. We'll explore through creating a theme context, implementing theme toggling, and applying dynamic styling to Bootstrap components to achieve a modern and user-friendly interface.

Prerequisites

Approach

Create a new Next.js project using create-next-app and install the necessary libraries like react-bootstrap and bootstrap for UI components and styling.
Set up the theme context by creating a ThemeContext using React.createContext to manage the theme state and a ThemeProvider component to wrap the application.
Implement the theme toggle logic by using useState to manage the current theme and localStorage to persist the user's theme preference across sessions.
Customize UI components with Bootstrap classes dynamically based on the selected theme, applying styles to elements like Navbar, Button, and Container.
Add theme-switching functionality using a DropdownButton or similar UI element to allow users to select and switch between different themes in real-time.

Steps to Setup Multiple Themes In NextJS With React-Bootstrap

Step 1: Create a NextJS application by using this command

npx create-next-app multiple-themes

Step 2: Set the following commands

Step 3: Navigate to the project directory

cd multiple-themes

Step 4: Install the necessary packages/libraries in your project using the following commands.

npm install react-bootstrap bootstrap

Project Structure:

Updated dependencies

  "dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.2.6",
    "react": "^18",
    "react-bootstrap": "^2.10.4",
    "react-dom": "^18"
  },

Example: Implementation to setup multiple themes in NextJS with React-Bootstrap.

JavaScript

// layout.js

import 'bootstrap/dist/css/bootstrap.min.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

JavaScript

// theme-context.js

'use client';

import { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

export const ThemeProvider = ({ children }) => {
    const [theme, setTheme] = useState('default');

    useEffect(() => {
        const storedTheme = localStorage.getItem('theme') || 'default';
        setTheme(storedTheme);
    }, []);

    const toggleTheme = (selectedTheme) => {
        setTheme(selectedTheme);
        localStorage.setItem('theme', selectedTheme);
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
};

JavaScript

// page.js

'use client';

import { useTheme, ThemeProvider } from './theme-context';
import { Button, Container, Navbar, DropdownButton, Dropdown, Card } from 'react-bootstrap';
import { useEffect, useState } from 'react';

function PageContent() {
  const { theme, toggleTheme } = useTheme();
  const [selectedTheme, setSelectedTheme] = useState(theme);

  useEffect(() => {
    setSelectedTheme(theme);
  }, [theme]);

  const handleThemeChange = (newTheme) => {
    toggleTheme(newTheme);
  };

  return (
    <Container className={`p-3 bg-${theme}`}>
      <Navbar bg={theme} variant={theme} 
              className="mb-4 justify-content-center">
        <Navbar.Brand className="text-success text-center">
          <h1>GeeksforGeeks</h1>
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse className="justify-content-end">
          <DropdownButton id="dropdown-basic-button" title="Select Theme"
            variant={theme === 'default' ? 'secondary' : theme}>
            <Dropdown.Item onClick={() => handleThemeChange('default')}>
              Default
            </Dropdown.Item>
            <Dropdown.Item onClick={() => handleThemeChange('dark')}>
              Dark
            </Dropdown.Item>
            <Dropdown.Item onClick={() => handleThemeChange('light')}>
              Light
            </Dropdown.Item>
            <Dropdown.Item onClick={() => handleThemeChange('custom')}>
              Custom
            </Dropdown.Item>
          </DropdownButton>
        </Navbar.Collapse>
      </Navbar>
      <h3 className="text-center text-primary">Setup Multiple Themes
        In NextJS With React-Bootstrap
      </h3>
      <div className="text-center mt-5">
        <Button variant="primary" size="lg">Explore GeeksforGeeks</Button>
      </div>
      <div className="mt-5 d-flex justify-content-around">
        <Card bg={selectedTheme} text={selectedTheme === 'light' ? 'dark' : 'light'}
          style={{ width: '18rem' }}>
          <Card.Header>Theme Card</Card.Header>
          <Card.Body>
            <Card.Title>{selectedTheme} Theme</Card.Title>
            <Card.Text>
              This is a card example using the {selectedTheme} theme.
            </Card.Text>
            <Button variant="light" size="sm">More Info</Button>
          </Card.Body>
        </Card>
        <Card bg={theme} text={theme === 'light' ? 'dark' : 'light'}
          style={{ width: '18rem' }}>
          <Card.Header>Current Theme</Card.Header>
          <Card.Body>
            <Card.Title>{theme} Theme</Card.Title>
            <Card.Text>
              This card reflects the current theme.
            </Card.Text>
            <Button variant="light" size="sm">More Info</Button>
          </Card.Body>
        </Card>
      </div>
    </Container>
  );
}

export default function Page() {
  return (
    <ThemeProvider>
      <PageContent />
    </ThemeProvider>
  );
}

Step to Run Application: Run the application using the following command from the root directory of the project