How can I set the ThemeSwitcher (Next-Themes) in NextJS 14 (Typescript) to system settings, but also change the mode onClick

Question

I'm currently facing the issue that I want to create a theme switcher (with next-themes).Until know my code works so far that I have a switcher that switches between whitemode and darkmode.However, I would also like to take the system preference into account. That means if the user visites the website the first time, the switcher should be automatically enable the prefered theme. If the user then clicks the switcher by himself it should change the theme no matter the system preference.I would still describe myself as a beginner. So forgive me if I have forgotten to mention anything important. Thanks for your help!

ThemeToggler:

import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import { MoonIcon, SunIcon } from "@heroicons/react/16/solid";

const ThemeToggler = () => {
  const [mounted, setMounted] = useState(false);
  const [isActive, setIsActive] = useState(false);
  const { resolvedTheme, setTheme } = useTheme();

  const toggleTheme = () => {
    setTheme(resolvedTheme === "light" ? "dark" : "light");
    setIsActive(!isActive);
  };

  // useEffect only runs on the client, so now we can safely show the UI
  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    
      
      
      
    
  );
};

export default ThemeToggler;

Theme Provider:

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return {children};
}

Header

"use client";
import React, { useEffect, useState, useCallback } from "react";
import { Bars3Icon } from "@heroicons/react/16/solid";
import Image from "next/image";
import Link from "next/link";
import DropdownMenu from "./LanguageDropdown";
import ThemeToggler from "./ThemeToggler";

// Typ für einen einzelnen Menüpunkt
interface MenuItem {
  href: string;
  label: string;
}

// Liste von Menüpunkten
const menuItems: MenuItem[] = [
  { href: "/", label: "Home" },
  { href: "/how-it-works", label: "How it Works" },
  { href: "/help", label: "Help" },
  { href: "/about-us", label: "About Us" },
];

// Header-Komponente
const Header: React.FC = () => {
  // Zustand für das Menü
  const [menuActive, setMenuActive] = useState(false);
  // Zustand für die Fensterbreite
  const [windowWidth, setWindowWidth] = useState(0);

  // Funktion zum Umschalten des Menüs
  const toggleNavbar = useCallback(() => {
    setMenuActive((prevMenuActive) => !prevMenuActive);
  }, []);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    // Füge den Event Listener nur im Client hinzu
    if (typeof window !== "undefined") {
      setWindowWidth(window.innerWidth);
      window.addEventListener("resize", handleResize);
      return () => {
        window.removeEventListener("resize", handleResize);
      };
    }
  }, []);

  useEffect(() => {
    if (windowWidth > 1200) {
      setMenuActive(false);
    }
  }, [windowWidth]);

  return (
    // Header-Element
    
      {/* Hintergrund für das aufklappbare Menü */}
      
      
        
          {/* Menüschalter */}
          
            
          
          
            {/* Logo mit Link zur Startseite */}
            
              
            
          
          {/* Hauptmenü */}
          
            
              
                {/* Menüpunkte */}
                {menuItems.map((menuItem, index) => (
                  
                ))}
                {/* Dropdown-Menü */}
                
                  
                
              
            
          
          {/* Zusätzliche Optionen wie Anmeldung und Themenschalter */}
          
            
              
            
            
              
            
          
        
      

      {/* Aufklappbares Menü */}
      
        
          
            {/* Dropdown-Menü */}
            
              
            
            {/* Menüpunkte */}
            {menuItems.map((menuItem, index) => (
              
            ))}
          
        
      
    
  );
};

// Einzelner Menüpunkt
const MenuItem: React.FC = ({ href, label }) => {
  return (
    
      {label}
    
  );
};

export default Header;

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-rgb: 8, 8, 8;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

Layout.tsx

import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "./components/theme-provider";
import Header from "./components/Header";

const roboto = Roboto({
  weight: ["400", "700"],
  style: ["normal", "italic"],
  subsets: ["latin"],
  display: "swap",
});

export const metadata: Metadata = {
  title: "Unlock the Power",
  description: "The number one PC-Configurator",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    
      
        
          
          {children}
          {/*  */}
        
      
    
  );
}

Switch: Dakmode, system: light Switch: Darkmode, system: dark Switch: Lightmode, system: dark

How can I set the ThemeSwitcher (Next-Themes) in NextJS 14 (Typescript) to system settings, but also change the mode onClick

Answers (1)

Related Questions