Estoy haciendo una aplicación de escritorio usando electron. Lo que me gustaría hacer es cambiar el color de varios componentes div diferentes en mi archivo index.html, después de hacer clic en un ícono en el archivo bar.html. ¿Hay algo que pueda agregar a las preferencias web de Windows del navegador que me permita acceder fácilmente a todos los elementos dentro del archivo index.html? Por el momento, solo puedo manipular la apariencia de los componentes en mi archivo bar.html, lo cual no es bueno para lo que me gustaría lograr.

A continuación se muestra el código de mi archivo index.JS.

 ipcMain.on('state', (event, arg) => { horizontalWindow(); event.returnValue = "toggle not ready test"; }) function horizontalWindow() { sidebar = new BrowserWindow({height:80, width:2000, transparent:true, frame:false, titleBarStyle: 'none', resizable: false, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true}}) sidebar.loadFile('bar.html') sidebar.setPosition(0, 100, true) //sidebar.setSize(1800, 80, true) sidebar.setMenuBarVisibility(false) sidebar.setAlwaysOnTop(true, 'floating') } function createWindow(){ mainWindow = new BrowserWindow({ height: 10, width: 100, frame: false,titleBarStyle: 'none', parent:mainWindow, backgroundColor: '#283243', resizable: true, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true }}) mainWindow.setAlwaysOnTop(true, 'normal') mainWindow.setVisibleOnAllWorkspaces(true); mainWindow.loadFile('index.html') mainWindow.setMenuBarVisibility(false) mainWindow.setResizable(false) mainWindow.moveTop() mainWindow.setPosition(0,0) } app.on('ready', () => { createWindow(); }) app.on('closed', () => { win = null; }) app.on('window-all-closed', () => { app.quit(); })

Archivo Renderer.js:

 const State = document.getElementById('state') State.addEventListener('click', function(){ ipcRenderer.sendSync("State") });

¡Cualquier consejo sería muy apreciado!, ya que he estado atascado en esto por un tiempo.