From ff3618b67d021358d7da6abd96b9f8b5ee170b24 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Sun, 28 Jan 2024 19:09:41 -0500 Subject: [PATCH] Add dark mode support for the editor. --- src/Editor.module.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Editor.module.css b/src/Editor.module.css index b5aa502..c195c16 100644 --- a/src/Editor.module.css +++ b/src/Editor.module.css @@ -1,6 +1,19 @@ +.EditorTextWrapper { + --editor-background-color: #000000; + --editor-font-color: #ffffff; + --editor-highlight-color: #0000ff; +} +@media (prefers-color-scheme: light) { + .EditorTextWrapper { + --editor-background-color: #ffffff; + --editor-font-color: #000000; + --editor-highlight-color: #ffff00; + } +} + .EditorTextWrapper { position: relative; - background: white; + background: var(--editor-background-color); font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; font-weight: normal; @@ -10,6 +23,7 @@ .EditorTextArea, .EditorUnderlay { + color: var(--editor-font-color); font-family: inherit; font-weight: inherit; font-size: inherit; @@ -44,6 +58,6 @@ overflow-y: scroll; .EditorHighlighted { - background: #ffff00; + background: var(--editor-highlight-color); } }