Skip to content
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

Sync theia dark/light theme with electron nativeTheme setting #15037

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+20 −3
Open

Sync theia dark/light theme with electron nativeTheme setting #15037

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions packages/core/src/common/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ export function isHighContrast(scheme: ThemeType): boolean {
return scheme === 'hc' || scheme === 'hcLight';
}

export function isLightOrDark(type: ThemeType): 'light' | 'dark' {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we create a type for the 'light' | 'dark'? We use it quite a lot and it is originally a subtype of the ThemeType.
Additionally, the name isLightOrDark implies a boolean function imho. Can we either change this into:

  • isLightTheme (which returns true for hcLight and light) (or the other way around, but i believe this makes the method more readable).
  • getThemeMode(), if we choose this variant i believe we should wrap type === 'hc' || type === 'dark' in () to make it easier to understand.

return type === 'hc' || type === 'dark' ? 'dark' : 'light';
}

export interface ThemeChangeEvent {
readonly newTheme: Theme;
readonly oldTheme?: Theme;
Expand Down
3 changes: 2 additions & 1 deletion packages/core/src/electron-browser/menu/electron-menu-contribution.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { WindowTitleService } from '../../browser/window/window-title-service';

import '../../../src/electron-browser/menu/electron-menu-style.css';
import { ThemeService } from '../../browser/theming';
import { ThemeChangeEvent } from '../../common/theme';
import { isLightOrDark, ThemeChangeEvent } from '../../common/theme';

export namespace ElectronCommands {
export const TOGGLE_DEVELOPER_TOOLS = Command.toDefaultLocalizedCommand({
Expand Down Expand Up @@ -424,6 +424,7 @@ export class ElectronMenuContribution extends BrowserMenuBarContribution impleme
protected handleThemeChange(e: ThemeChangeEvent): void {
const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
window.electronTheiaCore.setBackgroundColor(backgroundColor);
window.electronTheiaCore.setTheme(isLightOrDark(e.newTheme.type));
}

}
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/electron-browser/preload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import {
CHANNEL_REQUEST_RELOAD, CHANNEL_APP_STATE_CHANGED, CHANNEL_SHOW_ITEM_IN_FOLDER, CHANNEL_READ_CLIPBOARD, CHANNEL_WRITE_CLIPBOARD,
CHANNEL_KEYBOARD_LAYOUT_CHANGED, CHANNEL_IPC_CONNECTION, InternalMenuDto, CHANNEL_REQUEST_SECONDARY_CLOSE, CHANNEL_SET_BACKGROUND_COLOR,
CHANNEL_WC_METADATA, CHANNEL_ABOUT_TO_CLOSE, CHANNEL_OPEN_WITH_SYSTEM_APP,
CHANNEL_OPEN_URL
CHANNEL_OPEN_URL, CHANNEL_SET_THEME
} from '../electron-common/electron-api';

// eslint-disable-next-line import/no-extraneous-dependencies
Expand Down Expand Up @@ -120,6 +120,9 @@ const api: TheiaCoreAPI = {
setBackgroundColor: function (backgroundColor): void {
ipcRenderer.send(CHANNEL_SET_BACKGROUND_COLOR, backgroundColor);
},
setTheme: function (theme): void {
ipcRenderer.send(CHANNEL_SET_THEME, theme);
},
minimize: function (): void {
ipcRenderer.send(CHANNEL_MINIMIZE);
},
Expand Down
2 changes: 2 additions & 0 deletions packages/core/src/electron-common/electron-api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export interface TheiaCoreAPI {
getTitleBarStyleAtStartup(): Promise<string>;
setTitleBarStyle(style: string): void;
setBackgroundColor(backgroundColor: string): void;
setTheme(theme: 'dark' | 'light'): void;
minimize(): void;
isMaximized(): boolean; // TODO: this should really be async, since it blocks the renderer process
maximize(): void;
Expand Down Expand Up @@ -125,6 +126,7 @@ export const CHANNEL_ATTACH_SECURITY_TOKEN = 'AttachSecurityToken';
export const CHANNEL_GET_TITLE_STYLE_AT_STARTUP = 'GetTitleStyleAtStartup';
export const CHANNEL_SET_TITLE_STYLE = 'SetTitleStyle';
export const CHANNEL_SET_BACKGROUND_COLOR = 'SetBackgroundColor';
export const CHANNEL_SET_THEME = 'SetTheme';
export const CHANNEL_CLOSE = 'Close';
export const CHANNEL_MINIMIZE = 'Minimize';
export const CHANNEL_MAXIMIZE = 'Maximize';
Expand Down
5 changes: 4 additions & 1 deletion packages/core/src/electron-main/electron-api-main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ import {
CHANNEL_WC_METADATA,
CHANNEL_ABOUT_TO_CLOSE,
CHANNEL_OPEN_WITH_SYSTEM_APP,
CHANNEL_OPEN_URL
CHANNEL_OPEN_URL,
CHANNEL_SET_THEME
} from '../electron-common/electron-api';
import { ElectronMainApplication, ElectronMainApplicationContribution } from './electron-main-application';
import { Disposable, DisposableCollection, isOSX, MaybePromise } from '../common';
Expand Down Expand Up @@ -176,6 +177,8 @@ export class TheiaMainApi implements ElectronMainApplicationContribution {

ipcMain.on(CHANNEL_SET_BACKGROUND_COLOR, (event, backgroundColor) => application.setBackgroundColor(event.sender, backgroundColor));

ipcMain.on(CHANNEL_SET_THEME, (event, theme) => application.setTheme(theme));

ipcMain.on(CHANNEL_MINIMIZE, event => {
BrowserWindow.fromWebContents(event.sender)?.minimize();
});
Expand Down
4 changes: 4 additions & 0 deletions packages/core/src/electron-main/electron-main-application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,10 @@ export class ElectronMainApplication {
this.saveState(webContents);
}

public setTheme(theme: 'light' | 'dark'): void {
nativeTheme.themeSource = theme;
}

protected saveState(webContents: Electron.WebContents): void {
const browserWindow = BrowserWindow.fromWebContents(webContents);
if (browserWindow) {
Expand Down
Loading