Search code examples
javascriptnode.jswindowselectronaccent-color

Get accent color in Windows dark mode


Program-building with electron

The idea:
I want the accent color of my program to be the same as the one from Windows.

The problem:
For the Light Mode of Windows, everything works, the passed color matches the Windows accent color. But when switching to Dark Mode, I still get the accent color of the Light Mode.

Possible solutions:
How does the Windows selection for the Dark Mode accent color work? Is the color always increased by a certain brightness level? Or are there pre-saved patterns?


Here is my current code:

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)
})

Solution

  • Although I couldn't find a function that returned the value of the dark mode accent color, I was able to change the brightness of the color and thus create a somewhat suitable solution.


    Here is the code I added:

    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()