_APP.JS

function MyApp({ Component, pageProps }) {
  let primary = 'darkMode_Primary';
  let secondary = 'darkMode_Secondary'
  return (
    <Layout primary_super={primary} secondary_super={secondary}>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

LAYOUT.JS

export default function Layout({ children , primary_super, secondary_super}) {

  return (
    <>
      <Navbar  primary={primary_super} secondary={secondary_super}/>
      <main>{children}</main>
      <ModeSwitch primary={primary_super} secondary={secondary_super}/>
    </>
  )
}

NAVBAR.JS

export default function Navbar(props) {

    const click = ()=>{
        console.log('USS')
    }

    const Primary = theme[props.primary]
    const Secondary = theme[props.secondary]
    return (
    <div className="NAV" id="NAV" style={Primary}>
        <div className="NAV_BOX_FULL NAV_LEX" style={Secondary}> 
            <img src="/NAV_img/cat.png" alt="" className="NAV_logo1 NAV_logo"/>
            <h3 className="NAV_head"  onClick={click} >SilenxIka</h3>
        </div>
    </div>
  )
}

what i want to do is, when someone triggers that onClick fuction in navbar.js, the primary and secondary in _app.js

File style: Navbar.js is inside of Layout.js and Layout.js is used in _app.js