From 9cd4d11517a5214ff063040f4cc97680918fb5d6 Mon Sep 17 00:00:00 2001 From: Remco Haszing Date: Sun, 14 Dec 2025 13:57:45 +0100 Subject: [PATCH] Add automatic dark mode to the Monaco playground This makes the playground more accessible for me due to my eye condition. This also adds some additional metadata in the page head. --- build/vite/index.html | 6 ++++++ build/vite/index.ts | 8 ++++++++ 2 files changed, 14 insertions(+) diff --git a/build/vite/index.html b/build/vite/index.html index c3a0e36b8ef5c..3b05ff64c35da 100644 --- a/build/vite/index.html +++ b/build/vite/index.html @@ -1,6 +1,12 @@ + + + + + Monaco Playground +

Use the Playground Launch Config for a better dev experience

diff --git a/build/vite/index.ts b/build/vite/index.ts index b852612bc66ef..377033f2c7abe 100644 --- a/build/vite/index.ts +++ b/build/vite/index.ts @@ -11,6 +11,14 @@ import './style.css'; import * as monaco from '../../src/vs/editor/editor.main'; globalThis.monaco = monaco; + +// Enable automatic dark mode for accessibility. +const dark = matchMedia('(prefers-color-scheme: dark)'); +monaco.editor.setTheme(dark.matches ? 'vs-dark' : 'vs-light'); +dark.addEventListener('change', () => { + monaco.editor.setTheme(dark.matches ? 'vs-dark' : 'vs-light'); +}); + const root = document.getElementById('sampleContent'); if (root) { const d = monaco.editor.createDiffEditor(root);