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

hook:

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)
    setTheme(mode)
  };

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

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

  return [theme, toggleTheme, componentMounted]
};

Toggle

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

// 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 (
<Router>
    <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></>
    </ThemeProvider></Router>
  );
}

export default App;

Navbar

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 (
  
        <>
    <Nav>
      <NavLink to="/">
          <h1>Logo</h1>
      </NavLink>
     <Bars />
     <NavMenu>
         <NavLink to="/home" activeStyle>
             Home
         </NavLink>
         <NavLink to="/portfolio" activeStyle>
             Portfolio
         </NavLink>
         <NavLink to="/about" activeStyle>
             About
         </NavLink>
         <NavLink to="/contact" activeStyle>
             Contact
         </NavLink>
     </NavMenu>
     <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.