score:0

Accepted answer

you can provide a callback function to your navbar component and the function will get the app.tsx context

        <navbar toggletheme={toggletheme} />

then in your component

            <button variant="light" onclick={this.props.toggletheme}>
              <img src={lightmode} alt="darkmode/lightmode change" />
            </button>

score:0

a good use case for provider pattern. basically, you would create a so-called "provider" component with an internal state to encapsulate your current theme and a function for toggling the theme:

import react, { usecontext, createcontext, usestate, usememo } from 'react'

const selectthemecontext = createcontext()

const selectthemeprovider = ({ children }) => {
    const [theme, settheme] = usestate('light');

    const toggletheme = () => if (theme === "light") {
      settheme("dark");
    } else {
      settheme("light");
    }

    const value = usememo(() => [theme, toggletheme], [theme, toggletheme]);

    return <selectthemecontext.provider value={value}>{children}</selectthemecontext.provider>
}

const useselectthemecontext = () => usecontext(wordscontext);

export { useselectthemecontext, selectthemeprovider }

fix your app.tsx to something like this (wrap the content with selectthemeprovider):

import { useselectthemecontext } from './selectthemeprovider';

const app = () => {
  
  const [theme] = useselectthemecontext();

  return (
    <selectthemeprovider>
      <themeprovider theme={theme}>
        <globalstyles />
        <div classname="app">
          <navbar/>
          <button onclick={toggletheme}></button>
          <div classname="app-header">
            <img src={logo} classname="app-logo" alt="logo" />
            <h1>linusromland.com</h1>
          </div>
        </div>
    </themeprovider>
    </selectthemeprovider>
  );
}

to switch theme in navbar:

import { useselectthemecontext } from './selectthemeprovider';

class navbar extends react.component {
  const [,toggletheme] = useselectthemecontext();
  render() {
    return (
      <div classname="navbar" data-testid="navbar">
        <bsnavbar bg="light" expand="lg">
          <container classname="col-5">
            <bsnavbar.brand href="/">linus romland</bsnavbar.brand>
            <bsnavbar.toggle />
            <bsnavbar.collapse classname="justify-content-end">
              <nav>
                <nav.link href="/" classname="text-dark">
                  home
                </nav.link>
                <nav.link
                  href="https://github.com/linusromland/"
                  classname="text-dark"
                >
                  github
                </nav.link>
                <nav.link href="/about" classname="text-dark">
                  about
                </nav.link>
                // here! just pass toggletheme function to onclick
                <button variant="light" onclick={toggletheme}>
                  <img src={lightmode} alt="darkmode/lightmode change" />
                </button>
              </nav>
            </bsnavbar.collapse>
          </container>
        </bsnavbar>
      </div>
    );
  }
}

point of the story: you don't have to pass your function for theme toggling down the component tree. simply import useselectthemecontext in any component which is wrapped by selectthemeprovider and use toggletheme function to toggle the theme.


Related Query

More Query from same tag