React Toggle Dark mode button works under App but not under Navbar component

I am trying to make a simple website in React

components are NavBar, Content, Footer and for Content I will have Home, Contact, About pages

I have a hook/toggle button for my React App, the button works and stores theme value to local whhen its added to the main App.js file but when I add the button to my Navbar index.js file it simply changes its style from sun to moon without actually changing the theme of the React app.

React App


import { useEffect, useState } from 'react';
export const useDarkMode = () => {
  const [theme, setTheme] = useState('light');
  const [componentMounted, setComponentMounted] = useState(false);

  const setMode = mode => {
    window.localStorage.setItem('theme', mode)

  const toggleTheme = () => {
    if (theme === 'light') {
    } else {

  useEffect(() => {
    const localTheme = window.localStorage.getItem('theme');
    if (localTheme) {
    } else {
  }, []);

  return [theme, toggleTheme, componentMounted]


import React from 'react'
import { func, string } from 'prop-types';
import styled from 'styled-components';
import {FaSun, FaMoon} from "react-icons/fa";

const Toggle = ({ theme, toggleTheme }) => {
const isLight = theme === 'light';
  return (
    <button onClick={toggleTheme}>{theme === 'light' ? <FaSun/> : <FaMoon/> }</button>

Toggle.propTypes = {
  theme: string.isRequired,
  toggleTheme: func.isRequired,

export default Toggle;


// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { useDarkMode } from './hooks/useDarkMode';
import { lightTheme, darkTheme } from './theme';
import { GlobalStyles } from './global';
import Toggle from './components/Toggle';
import Navbar from './components/Navbar';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  const [theme, toggleTheme] = useDarkMode();
  const themeMode = theme === 'light' ? lightTheme : darkTheme;

  return (
    <ThemeProvider theme={themeMode}>    <Navbar />
        <GlobalStyles />
        <Toggle theme={theme} toggleTheme={toggleTheme} />
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero</p></>

export default App;


import React from 'react';
import { Nav, NavLink, Bars, NavMenu, NavBtn, NavBtnLink} from '../../theme';
import Toggle from '../Toggle';
import { ThemeProvider } from 'styled-components';
import { useDarkMode } from '../../hooks/useDarkMode';
import { lightTheme, darkTheme } from '../../theme';
import { GlobalStyles } from '../../global';
const Navbar = () => {
const [theme, toggleTheme, componentMounted] = useDarkMode();
const themeMode = theme === 'light' ? lightTheme : darkTheme;
return (
      <NavLink to="/">
     <Bars />
         <NavLink to="/home" activeStyle>
         <NavLink to="/portfolio" activeStyle>
         <NavLink to="/about" activeStyle>
         <NavLink to="/contact" activeStyle>
     <Toggle theme={theme} toggleTheme={toggleTheme} />
      </Nav>   Testing Text in navbar  

export default Navbar;

Even though the button works and changes icons, it does not set the theme onclick, what could I be doing wrong for the button not to set the theme? if you have any suggestions to better implement themes / dark mode I am also interested thank you.

Source: React – Stack Overflow

November 28, 2021
Category : News
Tags: darkmode | react-navigation | reactjs | styled-components

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.