Skip to content

Add color scheme configuration and follow VS Code's theme by default - #87

Merged
axelboc merged 1 commit into
mainfrom
color-scheme
Oct 1, 2026
Merged

axelboc merged 1 commit into
mainfrom
color-scheme

Conversation

@axelboc

@axelboc axelboc commented Sep 21, 2026 •

Copy link
Copy Markdown
Contributor

Fix #78

Add configuration option h5web.colorScheme with four possible values:

  • "vscode": follow VS Code's theme — the new default behaviour
  • "system": follow the operating system's color scheme — the old behaviour
  • "light": force the light color scheme
  • "dark": force the dark color scheme

Implementation-wise, the idea is to set this configuration value in a data-color-scheme attribute on the body of the webview, next to VS Code's own data-vscode-theme-kind attribute.

  • If the scheme is set to system, we let H5Web apply the OS' scheme
  • Otherwise, we disable H5Web's built-in dark mode mechanism (with the disableDarkMode prop) and apply the dark scheme ourselves with CSS:
    • when data-color-scheme="dark", or
    • when data-color-scheme="vscode" and data-vscode-theme-kind="vscode-dark"

For simplicity, changes to the h5web.colorScheme option are only applied after reloading the editor.

Screenshot from 2026-09-21 11-22-49
Screencast.from.2026-09-21.11-02-03.webm

@loichuder loichuder left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Great stuff!

Could we add somewhere a warning telling that the theme change will be applied only after reloading?

Comment thread src/App.tsx
@axelboc
axelboc merged commit 010ec6a into main Oct 1, 2026
7 checks passed
@axelboc
axelboc deleted the color-scheme branch October 1, 2026 12:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Sync theme with VS Code's active theme or add a manual Light/Dark setting

2 participants