Skip to content

feat(ui): enable windows mica effect #13476

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.

Sign up for GitHub

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

Merged
EurFelux merged 5 commits into from
Mar 15, 2026
+96 −1
Merged

feat(ui): enable windows mica effect #13476

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f766e31
feat: add mica background effect on windows
lacser Mar 14, 2026
f01616f
Merge remote-tracking branch 'origin/main' into feat/windows-mica
lacser Mar 14, 2026
a45f13f
fix: removed unnecessary export
lacser Mar 15, 2026
c44d5e9
test: add test cases for getWindowsBackgroundMaterial
lacser Mar 15, 2026
92ec3c7
fix: code style
lacser Mar 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/main/services/WindowService.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { is } from '@electron-toolkit/utils'
import { loggerService } from '@logger'
import { isDev, isLinux, isMac, isWin } from '@main/constant'
import { getFilesDir } from '@main/utils/file'
import { getWindowsBackgroundMaterial } from '@main/utils/windowUtil'
import { MIN_WINDOW_HEIGHT, MIN_WINDOW_WIDTH } from '@shared/config/constant'
import { IpcChannel } from '@shared/IpcChannel'
import { app, BrowserWindow, nativeImage, nativeTheme, screen, shell } from 'electron'
Expand Down Expand Up @@ -56,6 +57,12 @@ export class WindowService {
fullScreen: false,
maximize: false
})
const windowsBackgroundMaterial = getWindowsBackgroundMaterial()
let mainWindowBackgroundColor: string | undefined

if (!isMac && !windowsBackgroundMaterial) {
mainWindowBackgroundColor = nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF'
}

this.mainWindow = new BrowserWindow({
x: mainWindowState.x,
Expand All @@ -81,7 +88,8 @@ export class WindowService {
// On Linux, allow using system title bar if setting is enabled
frame: isLinux && configManager.getUseSystemTitleBar() ? true : false
}),
backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF',
...(windowsBackgroundMaterial ? { backgroundMaterial: windowsBackgroundMaterial } : {}),
backgroundColor: mainWindowBackgroundColor,
Copy link
Collaborator

@EurFelux EurFelux Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should use consistent pattern like L91

Copy link
Contributor Author

@lacser lacser Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There will be 3 nested ternary operator if we choose to use it. Three conditions are !isMac, !windowsBackgroundMaterial, nativeTheme.shouldUseDarkColors.
Which is bad readability.

Or maybe you want to use an inline defined function?

backgroundColor: (() => {
  if (!isMac && !windowsBackgroundMaterial) {
    return nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF'
  }
  return undefined
})(),

Copy link
Collaborator

@EurFelux EurFelux Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
backgroundColor: mainWindowBackgroundColor,
backgroundColor: ...(mainWindowBackgroundColor ? { backgroundColor: mainWindowBackgroundColor }),

Copy link
Contributor Author

@lacser lacser Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before this PR, it was

backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF',

I didn't intend to change this. But sure, fixed now.

darkTheme: nativeTheme.shouldUseDarkColors,
...(isLinux ? { icon: linuxIcon } : {}),
webPreferences: {
Expand Down
18 changes: 18 additions & 0 deletions src/main/utils/windowUtil.ts
View file
Open in desktop
Copy link
Collaborator

@EurFelux EurFelux Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you add some test cases for getWindowsBackgroundMaterial?

isWindowsMicaSupported is never used by external module, so it should not be exported.

Copy link
Contributor Author

@lacser lacser Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed unnecessary export

Copy link
Contributor Author

@lacser lacser Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added some tests, not sure if they are necessary tho. I feel the main problem with current implementation is the way we get buildNumber is not very robust as @kangfenmao pointed out. But I didn't find a better way.

With that saying, worst case scenario, you simply lose Mica effect, nothing will break. Because:

...(windowsBackgroundMaterial ? { backgroundMaterial: windowsBackgroundMaterial } : {}),
      backgroundColor: mainWindowBackgroundColor,

Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@ import type { BrowserWindow } from 'electron'

import { isDev, isWin } from '../constant'

// see: https://www.electronjs.org/zh/docs/latest/api/base-window#winsetbackgroundmaterialmaterial-windows
const WINDOWS_11_22H2_BUILD = 22621

function isTilingWindowManager() {
if (process.platform === 'darwin') {
return false
Expand Down Expand Up @@ -74,4 +77,19 @@ export const replaceDevtoolsFont = (browserWindow: BrowserWindow) => {
}
}

export const isWindowsMicaSupported = () => {
if (!isWin) {
return false
}

const systemVersion = process.getSystemVersion()
const buildNumber = Number.parseInt(systemVersion.split('.')[2] ?? '', 10)

return Number.isFinite(buildNumber) && buildNumber >= WINDOWS_11_22H2_BUILD
Comment on lines +85 to +88
Copy link
Collaborator

@EurFelux EurFelux Mar 15, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Only checking the build number while ignoring major.minor is not fully future-proof. Currently all Windows 11 versions use 10.0.xxxxx so this works fine in practice, but if a future Windows version ever changes the major version and decrease build number, this check would incorrectly disable Mica.

A more defensive approach would be to compare the full version tuple:

Suggested change
const systemVersion = process.getSystemVersion()
const buildNumber = Number.parseInt(systemVersion.split('.')[2] ?? '', 10)
return Number.isFinite(buildNumber) && buildNumber >= WINDOWS_11_22H2_BUILD
const systemVersion = process.getSystemVersion()
const [major, minor, build] = systemVersion.split('.').map(Number)
if ([major, minor, build].some((n) => !Number.isFinite(n))) return false
// Windows 10.0.22621+ supports Mica; future major versions (11.x+) are assumed to support it too
return major > 10 || (major === 10 && minor > 0) || (major === 10 && minor === 0 && build >= WINDOWS_11_22H2_BUILD)

Not blocking — totally fine to keep as-is given Microsoft's current versioning.

}

export const getWindowsBackgroundMaterial = () => {
return isWindowsMicaSupported() ? 'mica' : undefined
}

export { isTilingWindowManager }
Loading