_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

DISEÑO.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> ) }

lo que quiero hacer es, cuando alguien activa esa función onClick en navbar.js, la primaria y la secundaria en _app.js

Estilo de archivo: Navbar.js está dentro de Layout.js y Layout.js se usa en _app.js