前言
公司最近配的一台螢幕，沒辦法調整亮度，亮得要命，眼睛要瞎掉了
所以只好自立自強搞一個螢幕遮罩
第一章：顯示 Electron 視窗，可調整透明度
第二章：參數維護移植到
main/js本章節內容
增加調整顏色功能
第一步： overlaySettings 維護 color
- 開啟
src/main.js overlaySettings，增加設定color
// src/main.js
const { app, BrowserWindow, screen } = require('electron');
const path = require('path');
// 維護 opacity
let overlaySettings = {
opacity: 0.5, // 調回 0.5
color: "0,0,0" // 👈 這裡設定
}
function createWindow() {
...
index.html增加 顏色輸入控制
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="h-screen w-screen overflow-hidden">
...
<label class="block">
透明度
<input
type="range"
id="opacityInput"
min="0"
max="1"
step="0.1"
value="0.5"
class="w-full"
/>
</label>
<!-- 👇 增加顏色輸入控制 -->
<label class="block">
顏色
<input type="color" id="colorInput" class="w-full" />
</label>
</div>
<script>
...
</script>
</body>
</html>
執行 npm start
✅ 確認右上面板出現 顏色輸入，可以設定顏色但沒啥作用
第二步：增加 顏色輸入事件綁定
- 開啟
src/index.html - 編輯
<script>：// 1. 取得 colorInput 元件
const colorInput = document.getElementById('colorInput')
// 2. 綁定 colorInput 輸入事件
colorInput.oninput = handleUpdate
// 3. handleUpdate 擴充 color 設定 (需要先轉換 color #HHHHHH 為 (r,g,b))
function handleUpdate() {
const hex = colorInput.value
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
const rgbString = `${r}, ${g}, ${b}`
const newSettings = {
opacity: opacityInput.value,
color: rgbString,
}
applyStyle(newSettings)
ipcRenderer.send('upload-settings', newSettings)
}
// 4. applyStyle 增加 --overlay-color 最新color值綁定
function applyStyle({ opacity, color }) {
document.body.style.setProperty('--overlay-opacity', opacity)
document.body.style.setProperty('--overlay-color', color) // 👈 擴充
}
// 5. 'init-settings' 擴充 color
ipcRenderer.on('init-settings', (event, settings) => {
const [r, g, b] = settings.color
.split(',')
.map((num) => parseInt(num.trim()))
const toHex = (n) => n.toString(16).padStart(2, '0')
const hexResult = `#${toHex(r)}${toHex(g)}${toHex(b)}`
opacityInput.value = settings.opacity
colorInput.value = hexResult
applyStyle(settings)
})
完整<script> ：
<script>
const { ipcRenderer } = require('electron')
const overlay = document.getElementById('overlay')
const opacityInput = document.getElementById('opacityInput')
const colorInput = document.getElementById('colorInput')
// 接收來自 main.js 的初始設定
ipcRenderer.on('init-settings', (event, settings) => {
const [r, g, b] = settings.color
.split(',')
.map((num) => parseInt(num.trim()))
const toHex = (n) => n.toString(16).padStart(2, '0')
const hexResult = `#${toHex(r)}${toHex(g)}${toHex(b)}`
opacityInput.value = settings.opacity
colorInput.value = hexResult
applyStyle(settings)
})
function applyStyle({ opacity, color }) {
document.body.style.setProperty('--overlay-opacity', opacity)
document.body.style.setProperty('--overlay-color', color)
}
function handleUpdate() {
const hex = colorInput.value
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
const rgbString = `${r}, ${g}, ${b}`
const newSettings = {
opacity: opacityInput.value,
color: rgbString,
}
applyStyle(newSettings)
ipcRenderer.send('upload-settings', newSettings)
}
opacityInput.oninput = handleUpdate
colorInput.oninput = handleUpdate
</script>
執行 npm start
✅ 確認右上面板出現 顏色輸入，可以設定顏色
