Created
May 21, 2021 18:59
-
-
Save erickzhao/debb5dfaab458a4ae3b5428461521101 to your computer and use it in GitHub Desktop.
Dark Mode (old) test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World!</title> | |
| <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /> | |
| <link rel="stylesheet" type="text/css" href="./styles.css"> | |
| </head> | |
| <body> | |
| <h1>Hello World!</h1> | |
| <p>Current theme source: <strong id="theme-source">System</strong></p> | |
| <button id="toggle-dark-mode">Toggle Dark Mode</button> | |
| <button id="reset-to-system">Reset to System Theme</button> | |
| <script src="renderer.js"></script> | |
| </body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron') | |
| function createWindow () { | |
| const win = new BrowserWindow({ | |
| width: 800, | |
| height: 600, | |
| webPreferences: { | |
| nodeIntegration: true, | |
| contextIsolation: false | |
| } | |
| }) | |
| win.loadFile('index.html') | |
| ipcMain.handle('dark-mode:toggle', () => { | |
| if (nativeTheme.shouldUseDarkColors) { | |
| nativeTheme.themeSource = 'light' | |
| } else { | |
| nativeTheme.themeSource = 'dark' | |
| } | |
| return nativeTheme.shouldUseDarkColors | |
| }) | |
| ipcMain.handle('dark-mode:system', () => { | |
| nativeTheme.themeSource = 'system' | |
| }) | |
| } | |
| app.whenReady().then(createWindow) | |
| app.on('window-all-closed', () => { | |
| if (process.platform !== 'darwin') { | |
| app.quit() | |
| } | |
| }) | |
| app.on('activate', () => { | |
| if (BrowserWindow.getAllWindows().length === 0) { | |
| createWindow() | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Empty |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { ipcRenderer } = require('electron') | |
| document.getElementById('toggle-dark-mode').addEventListener('click', async () => { | |
| const isDarkMode = await ipcRenderer.invoke('dark-mode:toggle') | |
| document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light' | |
| }) | |
| document.getElementById('reset-to-system').addEventListener('click', async () => { | |
| await ipcRenderer.invoke('dark-mode:system') | |
| document.getElementById('theme-source').innerHTML = 'System' | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (prefers-color-scheme: dark) { | |
| body { background: #333; color: white; } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| body { background: #ddd; color: black; } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment