-
Notifications
You must be signed in to change notification settings - Fork 16.5k
feat: support customizing window accent color on Windows #47285
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
a6367a0
to
ebe30c3
Compare
@codebytere curious, is this behind an option that can be selectively enabled or disabled? I can imagine that an app might want to decide to have it and/or even control the accent color if possible? |
@bpasero sure, i think that's possible here! I can rework this to allow for a bit more control. |
da5bb3b
to
2557a8f
Compare
93aee94
to
1dc363b
Compare
@bpasero tweaked it a bit to allow disabling border or setting to a custom color. |
@codebytere great, eager to give it a try |
Release Notes Persisted
|
I have automatically backported this PR to "37-x-y", please check out #47537 |
I have automatically backported this PR to "36-x-y", please check out #47538 |
I have automatically backported this PR to "35-x-y", please check out #47539 |
@codebytere this works really well: Quick question: is there any way we could force this color, even if the user has disabled accent colors in Window settings? ![]() |
@codebytere also curious if this color could be set after the window has opened, so that we could set the color differently per workspace that is opened (a popular request actually: https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) |
@codebytere also, this does not seem to override the accent color when frameless window is not used (i.e. native window frame is used) so I would make that clear in the settings description. |
@bpasero hmm, do you have a sample? Running the following: const { app, BrowserWindow } = require('electron')
const path = require('node:path')
function createWindow () {
const mainWindow = new BrowserWindow({
accentColor: 'green',
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
}) Produced: ![]() As expected for a framed window. I'll look into #47285 (comment). As for forcing it when it's user-disabled - probably, i'll take a look at that too. |
@codebytere yes disregard, that seems to work. What does not seem to work is to disable the accent color when it is set in Windows, but that seems fine to me. So to summarise:
|
@bpasero could you please open a follow-up issue for updating the color after the window is created? |
opened: #47584 |
Description of Change
Closes #35289
Closes #7172
Enables customizing system accent color and highlighting of active window border. By default, the accent color will default to what's been set in Personalization settings, but can be explicitly disabled or set to a custom color in Hex, RGB, RGBA, HSL, HSLA, or named CSS color format.
Frameless window example with
accentColor: true
:Before
After
Frameless window example with
accentColor: '#123524'
:Screenshot
Checklist
npm test
passesRelease Notes
Notes: Added support for customizing system accent color and highlighting of active window border.