Dark Mode Toggle Example - Electron Typing CST Test
Loading…
Dark Mode Toggle Example — Electron Code
Demonstrates dark mode toggling using CSS and IPC between renderer and main.
// main.js
const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron');
function createWindow() {
const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } });
win.loadFile('index.html');
}
ipcMain.handle('toggle-dark-mode', () => {
nativeTheme.themeSource = nativeTheme.shouldUseDarkColors ? 'light' : 'dark';
return nativeTheme.shouldUseDarkColors;
});
app.whenReady().then(createWindow);
// index.html
<!DOCTYPE html>
<html>
<body>
<h3>Dark Mode Example</h3>
<button id='toggleBtn'>Toggle Dark Mode</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('toggleBtn').onclick = async () => {
const isDark = await ipcRenderer.invoke('toggle-dark-mode');
document.body.style.background = isDark ? '#222' : '#fff';
document.body.style.color = isDark ? '#fff' : '#000';
};
</script>
</body>
</html>Electron Language Guide
Electron is an open-source framework for building cross-platform desktop applications using web technologies (HTML, CSS, JS) with Node.js integration and Chromium-based rendering. It allows developers to create desktop apps for Windows, macOS, and Linux with a single codebase.
Primary Use Cases
- ▸Cross-platform desktop apps for Windows, macOS, and Linux
- ▸Rapid development using web technologies
- ▸Internal enterprise tools
- ▸Consumer desktop apps (Slack, VS Code, Discord)
- ▸Apps requiring integration with Node.js modules
Notable Features
- ▸Cross-platform support with a single codebase
- ▸Full access to Node.js APIs
- ▸Chromium-based rendering for web-like UI
- ▸Automatic updates via electron-updater
- ▸Extensive ecosystem of plugins and libraries
Origin & Creator
Created by GitHub in 2013 (originally as Atom Shell) to power the Atom text editor, Electron has grown into a popular framework for desktop apps.
Industrial Note
Best suited for cross-platform desktop apps where rapid development with web technologies is prioritized over binary size or raw performance.