在 Windows 深色模式下获取强调色
Get accent color in Windows dark mode
用 electron 编写程序
想法:
我希望我的程序的强调色与 Windows 中的相同。
问题:
对于 Windows 的灯光模式,一切正常,传递的颜色与 Windows 强调色相匹配。但是当切换到深色模式时,我仍然得到浅色模式的强调色。
可能的解决方案:
深色模式强调色的 Windows 选择如何工作?颜色总是增加一定的亮度水平吗?或者是否有预存模式?
这是我当前的代码:
main.js
let color = systemPreferences.getAccentColor()
mainWindow.on('ready-to-show', function() {
mainWindow.webContents.send('accColor', {'Color': color});
})
ipc.js
ipc.on('accColor', (evt, message) => {
let color = message['Color']
const hex2rgb = (hex) => {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
return [ r, g, b ]
}
let baseRGB = hex2rgb('#' + color)
document.querySelector('body').style.setProperty('--accent-default-rgb', baseRGB)
})
虽然我找不到返回深色模式强调色值的函数,但我能够更改颜色的亮度,从而创建一个比较合适的解决方案。
这是我添加的代码:
ipc.js
function adjustDark(color, amount) {
return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}
let darkHEX = adjustDark(color, 96)
let darkRGB = hex2rgb(darkHEX)
document.querySelector('body').style.setProperty('--accent-default-rgb', darkRGB)
Source for adjustDark()
用 electron 编写程序
想法:
我希望我的程序的强调色与 Windows 中的相同。
问题:
对于 Windows 的灯光模式,一切正常,传递的颜色与 Windows 强调色相匹配。但是当切换到深色模式时,我仍然得到浅色模式的强调色。
可能的解决方案:
深色模式强调色的 Windows 选择如何工作?颜色总是增加一定的亮度水平吗?或者是否有预存模式?
这是我当前的代码:
main.js
let color = systemPreferences.getAccentColor()
mainWindow.on('ready-to-show', function() {
mainWindow.webContents.send('accColor', {'Color': color});
})
ipc.js
ipc.on('accColor', (evt, message) => {
let color = message['Color']
const hex2rgb = (hex) => {
const r = parseInt(hex.slice(1, 3), 16)
const g = parseInt(hex.slice(3, 5), 16)
const b = parseInt(hex.slice(5, 7), 16)
return [ r, g, b ]
}
let baseRGB = hex2rgb('#' + color)
document.querySelector('body').style.setProperty('--accent-default-rgb', baseRGB)
})
虽然我找不到返回深色模式强调色值的函数,但我能够更改颜色的亮度,从而创建一个比较合适的解决方案。
这是我添加的代码:
ipc.js
function adjustDark(color, amount) {
return '#' + color.replace(/^#/, '').replace(/../g, color => ('0'+Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
}
let darkHEX = adjustDark(color, 96)
let darkRGB = hex2rgb(darkHEX)
document.querySelector('body').style.setProperty('--accent-default-rgb', darkRGB)
Source for adjustDark()