Implement auto switch of color theme based on browser API `prefers-color-scheme` (WIP) #86600

muuvmuuv · 2019-12-09T16:00:45Z

This PR implements the functionality to auto switch the Code color theme based on the users preferred OS appearance setting. It makes use of the browser matchMedia API, which makes it compatible with the VS Code Browser version as well.

What has changed?

The colorTheme prop is as before the place where the current theme is set, but now there are three new props:

colorThemeAutoSwitch: this enables/disables the auto switch functionality
colorThemeDark: holds the theme for "dark mode"
colorThemeLight: holds the theme for "light mode"

VS Code will now listen on the match media event to respond to OS appearance changes. I have tested it in the browser and it works good and very smooth.

To make the code more readable and to not repeat myself, I have created some extra functions inside WorkbenchThemeService, I hope this is okay. The changes also include listening on VS Code settings changes to disable the feature if someone changes the theme manually to prevent loops or flickering. Also, I don't think someone wants this feature if he's doing it manually.

It is enabled by default, I think this is good, to force developers to take more care about their eyes in dark environments.

How to test?

Download my branch
yarn install
yarn watch-client
Open another terminal window
yarn web
Wait for compilation
Open browser at http://localhost:8080/
Open your OS appearance settings (macOS: System → General)
Change the appearance

Next?

Here are the things that are still needed to finish up before a merge can be done. I also would need some help on some points. Would appreciate anyone that can comment to some of them.

Remove console.logs (haven't removed them for debugging ATM)
Remove comments
Make colorThemeDark and colorThemeLight selectable dropdown of theme options (Status: NEEDS HELP)
Update to use both options as replacement if "High contrast" is enabled
Add tests if possible and if needed (Status: NEEDS HELP)
Translation (https://github.com/Microsoft/Localization/wiki/Visual-Studio-Code-Community-Localization-Project)
Expose an API so extension author can make use of something like: (Status: in discussion)
- onThemeSwitch/Change which would return the new theme or 'dark', 'light' or 'no-preference' based on the browser API
- getPreferredScheme which would return 'dark', 'light' or 'no-preference' based on the browser API

This PR fixes #61519

This implements three new options to the workspace scope. One to enable/ disable the auto switch functionality and two others to set the dark and light theme.

msftclas · 2019-12-09T16:00:58Z

All CLA requirements met.

muuvmuuv · 2019-12-09T16:04:00Z

Oh, very sorry for that much line changes... Seems like prettier does something different in my VS Code instance than in the one from the authors I guess. Would love to get some help to fix this, so it won't happen again or more strict rules in .vscode/settings.json.

…red prettier)

aeschli

Thanks for the PR!

aeschli · 2019-12-10T11:22:28Z

src/vs/workbench/services/themes/browser/workbenchThemeService.ts

@@ -72,6 +75,8 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {

 	private colorThemeStore: ColorThemeStore;
 	private currentColorTheme: ColorThemeData;
+	private autoSwitchColorTheme = DEFAULT_THEME_AUTO_SWITCH_SETTING_VALUE;
+	private autoSwitchColorThemeListener: MediaQueryList | undefined = undefined;


If you want to follow the typical way we do this: Make this of type IDisposable | undefined.
dispose would uninstall the listener.

Also, autoSwitchColorTheme and autoSwitchColorThemeListener can be folded into one.

if autoSwitchColorThemeListener is defined-> autoswitch is on. if undefined: off

I think IDisposable does not work here because matchMedia returns a MediaQueryList. I will merge it into one but will leave the MediaQueryList | undefined

aeschli · 2019-12-10T11:22:56Z

src/vs/workbench/services/themes/browser/workbenchThemeService.ts

@@ -114,6 +119,7 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 		this.iconThemeStore = new FileIconThemeStore(extensionService);
 		this.onColorThemeChange = new Emitter<IColorTheme>({ leakWarningThreshold: 400 });

+		this.onPreferColorSchemeChange = this.onPreferColorSchemeChange.bind(this);


unnecessary?

Needed, otherwise the function could not access WorkbenchThemeService but if you know another implementation let me know.

aeschli · 2019-12-10T11:31:21Z

src/vs/workbench/services/themes/common/workbenchThemeService.ts

@@ -18,12 +18,22 @@ export const VS_HC_THEME = 'hc-black';
 export const HC_THEME_ID = 'Default High Contrast';

 export const COLOR_THEME_SETTING = 'workbench.colorTheme';
+export const COLOR_THEME_DARK_SETTING = 'workbench.colorThemeDark';
+export const COLOR_THEME_LIGHT_SETTING = 'workbench.colorThemeLight';
+export const DETECT_AS_SETTING = 'workbench.colorThemeAutoSwitch';


Given we already have'window.autoDetectHighContrast', what about calling it:
'window.autoDetectColorScheme': true | false
and

'workbench.preferredLightColorTheme' 'workbench.preferredDarkColorTheme' 'workbench.preferredHighConstrastColorTheme'

My thought was that even if HC is on, there can also be light and dark HC themes and give it the prefix colorTheme would make it easier to find in settings or more present to the user. Not everyone will know that this feature exists but sure preferred as prefix would make more sense and match to the browser API with prefers-color-scheme.

Would like to hear what a third or fourth person is saying about this here.

src/vs/workbench/services/themes/common/workbenchThemeService.ts

src/vs/workbench/services/themes/browser/workbenchThemeService.ts

src/vs/workbench/services/themes/common/workbenchThemeService.ts

aeschli · 2019-12-10T11:56:20Z

src/vs/workbench/services/themes/browser/workbenchThemeService.ts


-		let colorThemeSetting: string;
+		let detectThemeAutoSwitch = this.configurationService.getValue<boolean>(DETECT_AS_SETTING);
+		this.autoSwitchColorTheme = detectThemeAutoSwitch;


I think we should only switch the theme if the current theme is not of the same mode (dark/light/hc).

Do lets say I have 'Dark+' as my preferredDarkTheme, but at some point switched to use Monokai. When I enable autoSwitch. it is detected that dark is the window theme mode. But Monokai is dark, all is fine, no need to switch.
Same when VSCode is restarted.
So the 'prefferred' themes are only really used when there's a switch from the OS. The switch can be while we are open and we get the event, or while VSCode was closed, so we only see the mismatch when starting up.

Do lets say I have 'Dark+' as my preferredDarkTheme, but at some point switched to use Monokai. When I enable autoSwitch. it is detected that dark is the window theme mode. But Monokai is dark, all is fine, no need to switch.

You mean like this (in: e.affectsConfiguration(COLOR_THEME_SETTING))?

// if "auto switch" and (OS dark == theme dark) => update preferred dark theme // if "auto switch" and (OS light == theme light) => update preferred light theme // set new theme

So the 'prefferred' themes are only really used when there's a switch from the OS. The switch can be while we are open and we get the event, or while VSCode was closed, so we only see the mismatch when starting up.

Isn't this the current case?

I have updated it, please check if this is solved.

First working version of native auto switching workspace theme

256f2e0

This implements three new options to the workspace scope. One to enable/ disable the auto switch functionality and two others to set the dark and light theme.

octref requested a review from aeschli December 9, 2019 16:32

octref assigned aeschli Dec 9, 2019

Marvin Heilemann added 2 commits December 10, 2019 08:44

Rolled back changes to better see my changes (thanks to wrong configu…

fc87775

…red prettier)

Applied changes again

6099ca3

aeschli requested changes Dec 10, 2019

View reviewed changes

Resolved some requested changes

9146c53

aeschli mentioned this pull request Dec 19, 2019

auto switch of color theme based on browser API prefers-color-scheme #87405

Merged

aeschli closed this in #87405 Dec 19, 2019

muuvmuuv deleted the auto-dark-mode branch December 19, 2019 15:58

github-actions bot locked and limited conversation to collaborators Mar 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement auto switch of color theme based on browser API `prefers-color-scheme` (WIP) #86600

Implement auto switch of color theme based on browser API `prefers-color-scheme` (WIP) #86600

muuvmuuv commented Dec 9, 2019

msftclas commented Dec 9, 2019 •

edited

muuvmuuv commented Dec 9, 2019

aeschli left a comment

aeschli Dec 10, 2019

aeschli Dec 10, 2019

muuvmuuv Dec 17, 2019

aeschli Dec 10, 2019

muuvmuuv Dec 17, 2019 •

edited

aeschli Dec 10, 2019

muuvmuuv Dec 17, 2019

aeschli Dec 10, 2019 •

edited

muuvmuuv Dec 17, 2019

Implement auto switch of color theme based on browser API prefers-color-scheme (WIP) #86600

Implement auto switch of color theme based on browser API prefers-color-scheme (WIP) #86600

Conversation

muuvmuuv commented Dec 9, 2019

msftclas commented Dec 9, 2019 • edited

muuvmuuv commented Dec 9, 2019

aeschli left a comment

Choose a reason for hiding this comment

aeschli Dec 10, 2019

Choose a reason for hiding this comment

aeschli Dec 10, 2019

Choose a reason for hiding this comment

muuvmuuv Dec 17, 2019

Choose a reason for hiding this comment

aeschli Dec 10, 2019

Choose a reason for hiding this comment

muuvmuuv Dec 17, 2019 • edited

Choose a reason for hiding this comment

aeschli Dec 10, 2019

Choose a reason for hiding this comment

muuvmuuv Dec 17, 2019

Choose a reason for hiding this comment

aeschli Dec 10, 2019 • edited

Choose a reason for hiding this comment

muuvmuuv Dec 17, 2019

Choose a reason for hiding this comment

Implement auto switch of color theme based on browser API `prefers-color-scheme` (WIP) #86600

Implement auto switch of color theme based on browser API `prefers-color-scheme` (WIP) #86600

msftclas commented Dec 9, 2019 •

edited

muuvmuuv Dec 17, 2019 •

edited

aeschli Dec 10, 2019 •

edited