Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Conversation

codebytere
Copy link
Member

@codebytere codebytere commented May 28, 2025

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

Screenshot 2025-05-28 at 10 38 29 AM

After

Screenshot 2025-05-28 at 10 38 17 AM

Frameless window example with accentColor: '#123524':

Screenshot

Screenshot 2025-05-30 at 4 25 46 PM

Checklist

Release Notes

Notes: Added support for customizing system accent color and highlighting of active window border.

@codebytere codebytere requested a review from deepak1556 May 28, 2025 08:44
@codebytere codebytere added semver/patch backwards-compatible bug fixes target/35-x-y PR should also be added to the "35-x-y" branch. target/36-x-y PR should also be added to the "36-x-y" branch. target/37-x-y PR should also be added to the "37-x-y" branch. labels May 28, 2025
@electron-cation electron-cation bot added the new-pr 🌱 PR opened recently label May 28, 2025
@codebytere codebytere changed the title fix: support window accent color in frameless windows fix: support window accent color on Windows May 28, 2025
@codebytere codebytere force-pushed the support-window-a11y-border branch 3 times, most recently from a6367a0 to ebe30c3 Compare May 28, 2025 11:55
@bpasero
Copy link
Contributor

bpasero commented May 28, 2025

@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?

shell/browser/native_window_views_win.cc Outdated Show resolved Hide resolved
@codebytere
Copy link
Member Author

@bpasero sure, i think that's possible here! I can rework this to allow for a bit more control.

@electron-cation electron-cation bot removed the new-pr 🌱 PR opened recently label May 29, 2025
@codebytere codebytere force-pushed the support-window-a11y-border branch 3 times, most recently from da5bb3b to 2557a8f Compare May 30, 2025 08:53
@codebytere codebytere changed the title fix: support window accent color on Windows feat: support customizing window accent color on Windows May 30, 2025
@codebytere codebytere requested a review from dsanders11 May 30, 2025 08:54
@codebytere codebytere added semver/minor backwards-compatible functionality and removed semver/patch backwards-compatible bug fixes labels May 30, 2025
@electron-cation electron-cation bot added api-review/requested 🗳 new-pr 🌱 PR opened recently and removed new-pr 🌱 PR opened recently labels May 30, 2025
@codebytere codebytere force-pushed the support-window-a11y-border branch 2 times, most recently from 93aee94 to 1dc363b Compare May 30, 2025 08:56
@codebytere
Copy link
Member Author

@bpasero tweaked it a bit to allow disabling border or setting to a custom color.

@codebytere codebytere requested a review from ckerr May 31, 2025 07:48
@bpasero
Copy link
Contributor

bpasero commented Jun 1, 2025

@codebytere great, eager to give it a try

@release-clerk
Copy link

release-clerk bot commented Jun 24, 2025

Release Notes Persisted

Added support for customizing system accent color and highlighting of active window border.

@trop
Copy link
Contributor

trop bot commented Jun 24, 2025

I have automatically backported this PR to "37-x-y", please check out #47537

@trop trop bot removed the target/37-x-y PR should also be added to the "37-x-y" branch. label Jun 24, 2025
@trop
Copy link
Contributor

trop bot commented Jun 24, 2025

I have automatically backported this PR to "36-x-y", please check out #47538

@trop
Copy link
Contributor

trop bot commented Jun 24, 2025

I have automatically backported this PR to "35-x-y", please check out #47539

@trop trop bot added in-flight/36-x-y in-flight/35-x-y merged/37-x-y PR was merged to the "37-x-y" branch. merged/35-x-y PR was merged to the "35-x-y" branch. merged/36-x-y PR was merged to the "36-x-y" branch. and removed target/36-x-y PR should also be added to the "36-x-y" branch. target/35-x-y PR should also be added to the "35-x-y" branch. in-flight/37-x-y in-flight/35-x-y in-flight/36-x-y labels Jun 24, 2025
@bpasero
Copy link
Contributor

bpasero commented Jun 26, 2025

@codebytere this works really well:

image

Quick question: is there any way we could force this color, even if the user has disabled accent colors in Window settings?

image

@bpasero
Copy link
Contributor

bpasero commented Jun 26, 2025

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

@bpasero
Copy link
Contributor

bpasero commented Jun 26, 2025

@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.

@codebytere
Copy link
Member Author

codebytere commented Jun 27, 2025

@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:

Screenshot 2025-06-27 at 11 25 44 AM

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.

@bpasero
Copy link
Contributor

bpasero commented Jun 27, 2025

@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:

  • a way to force the color even if the windows setting is off
  • a way to update this after a window has been opened

@codebytere
Copy link
Member Author

@bpasero could you please open a follow-up issue for updating the color after the window is created?

@bpasero
Copy link
Contributor

bpasero commented Jun 27, 2025

opened: #47584

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

api-review/approved ✅ merged/35-x-y PR was merged to the "35-x-y" branch. merged/36-x-y PR was merged to the "36-x-y" branch. merged/37-x-y PR was merged to the "37-x-y" branch. semver/minor backwards-compatible functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: Respect windows window border color Add option to apply WS_BORDER style for frameless window

8 participants

Morty Proxy This is a proxified and sanitized view of the page, visit original site.