Allow switching into dark mode theme (#181)

* Enable switching editor into dark mode

* Allow light and dark themes on docs and test websites

* Add release note

* Add conditioning on whether `quarto-light` or `quarto-dark` is specified on the body HTML element.

* Add themeing doc note

* Add theme test document note

Author: coatless

_extensions/webr/qwebr-monaco-editor-element.js

@@ -1,5 +1,5 @@
-// Global dictionary to store Monaco Editor instances
-globalThis.qwebrEditorInstances = {};
+// Global array to store Monaco Editor instances
+globalThis.qwebrEditorInstances = [];
 
 // Function that builds and registers a Monaco Editor instance    
 globalThis.qwebrCreateMonacoEditorInstance = function (cellData) {

_extensions/webr/qwebr-styling.css

@@ -35,45 +35,74 @@
   color: #0d9c29
 }
 
-.qwebr-output-code-stdout {
+body.quarto-light .qwebr-output-code-stdout {
   color: #111;
 }
 
+body.quarto-dark .qwebr-output-code-stdout {
+  color: #EEE;
+}
+
 .qwebr-output-code-stderr {
   color: #db4133;
 }
 
-.qwebr-editor {
+body.quarto-light .qwebr-editor {
   border: 1px solid #EEEEEE;
 }
 
-.qwebr-editor-toolbar {
+body.quarto-light .qwebr-editor-toolbar {
   background-color: #EEEEEE;
   padding: 0.2rem 0.5rem;
 }
 
+body.quarto-dark .qwebr-editor {
+  border: 1px solid #111;
+}
+
+body.quarto-dark .qwebr-editor-toolbar {
+  background-color: #111;
+  padding: 0.2rem 0.5rem;
+}
+
 .qwebr-button {
-  background-color: #EEEEEE;
   display: inline-block;
   font-weight: 400;
   line-height: 1;
   text-decoration: none;
   text-align: center;
-  color: #000;
-  border-color: #dee2e6;
-  border: 1px solid rgba(0,0,0,0);
   padding: 0.375rem 0.75rem;
   font-size: .9rem;
   border-radius: 0.25rem;
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
-.qwebr-button:hover {
+body.quarto-light .qwebr-button {
+  background-color: #EEEEEE;
+  color: #000;
+  border-color: #dee2e6;
+  border: 1px solid rgba(0,0,0,0);
+}
+
+body.quarto-dark .qwebr-button {
+  background-color: #111;
+  color: #EEE;
+  border-color: #dee2e6;
+  border: 1px solid rgba(0,0,0,0);
+}
+
+body.quarto-light .qwebr-button:hover {
   color: #000;
   background-color: #d9dce0;
   border-color: #c8ccd0;
 }
 
+body.quarto-dark .qwebr-button:hover {
+  color: #d9dce0;
+  background-color: #323232;
+  border-color: #d9dce0;
+}
+
 .qwebr-button:disabled,.qwebr-button.disabled,fieldset:disabled .qwebr-button {
   pointer-events: none;
   opacity: .65
@@ -111,10 +140,14 @@
   display: contents;
 }
 
-.reveal pre div code.qwebr-output-code-stdout {
+body.reveal.quarto-light pre div code.qwebr-output-code-stdout {
   color: #111;
 }
 
+body.reveal.quarto-dark pre div code.qwebr-output-code-stdout {
+  color: #EEEEEE;
+}
+
 .reveal pre div code.qwebr-output-code-stderr {
   color: #db4133;
 }

_extensions/webr/qwebr-theme-switch.js

@@ -0,0 +1,42 @@
+// Function to update Monaco Editors when body class changes
+function updateMonacoEditorsOnBodyClassChange() {
+    // Select the body element
+    const body = document.querySelector('body');
+
+    // Options for the observer (which mutations to observe)
+    const observerOptions = {
+        attributes: true,  // Observe changes to attributes
+        attributeFilter: ['class'] // Only observe changes to the 'class' attribute
+    };
+
+    // Callback function to execute when mutations are observed
+    const bodyClassChangeCallback = function(mutationsList, observer) {
+        for(let mutation of mutationsList) {
+            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                // Class attribute has changed
+                // Update all Monaco Editors on the page
+                updateMonacoEditorTheme();
+            }
+        }
+    };
+
+    // Create an observer instance linked to the callback function
+    const observer = new MutationObserver(bodyClassChangeCallback);
+
+    // Start observing the target node for configured mutations
+    observer.observe(body, observerOptions);
+}
+
+// Function to update all instances of Monaco Editors on the page
+function updateMonacoEditorTheme() {
+    // Determine what VS Theme to use
+    const vsThemeToUse = document.body.classList.contains("quarto-dark") ? 'vs-dark' : 'vs' ;
+
+    // Iterate through all initialized Monaco Editors
+    qwebrEditorInstances.forEach( function(editorInstance) { 
+        editorInstance.updateOptions({ theme: vsThemeToUse }); 
+    });
+}
+
+// Call the function to start observing changes to body class
+updateMonacoEditorsOnBodyClassChange();

_extensions/webr/webr.lua

@@ -438,6 +438,8 @@ local function ensureWebRSetup()
   -- Insert the monaco editor initialization
   quarto.doc.include_file("before-body", "qwebr-monaco-editor-init.html")
 
+  includeFileInHTMLTag("before-body", "qwebr-theme-switch.js", "js")
+
   -- Insert the extension styling for defined elements
   includeFileInHTMLTag("before-body", "qwebr-monaco-editor-element.js", "js")
 

docs/_quarto.yml

@@ -74,5 +74,9 @@ website:
 
 format:
   html:
-    theme: cosmo
     toc: true
+
+# Allow quarto to switch between light and dark themes.
+theme:
+  light: flatly
+  dark: darkly

docs/qwebr-release-notes.qmd

@@ -20,6 +20,7 @@ Features listed under the `-dev` version have not yet been solidified and may ch
 
 - Added `editor-max-height` cell option to limit growth of the editor window. ([#177](https://github.com/coatless/quarto-webr/pulls/173), thanks [ute](https://github.com/ute)!)
 
+- Added the ability to have the monaco editor switch between Quarto's light and dark theme modes. ([#176](https://github.com/coatless/quarto-webr/issues/176))
 
 ## Bug fixes
 

docs/qwebr-theming.qmd

@@ -133,4 +133,20 @@ format:
       - cosmo
       - custom.scss
 ---
-```
+```
+
+## Light and Dark Mode
+
+The Monaco editor used by `{quarto-webr}` to power interactive code cells respects [Quarto's light and dark theme modes](https://quarto.org/docs/output-formats/html-themes.html#dark-mode). To apply light and dark themes on a Quarto website, specify the following settings in the `_quarto.yml` configuration file:
+
+```yaml
+theme:
+  light: flatly
+  dark: darkly
+```
+
+Once set, a clickable toggle will appear on the page that can switch between these modes. This toggle modifies CSS classes on the `body` HTML element, adding `.quarto-light` for light mode and `.quarto-dark` for dark mode.
+
+:::{.callout-note}
+The Monaco editor's theme automatically adjusts based on the document's theme. It uses a light theme (`vs`) in light mode and a dark theme (`vs-dark`) in dark mode.
+:::

tests/_quarto.yml

@@ -23,6 +23,11 @@ website:
       - icon: github
         href: https://github.com/coatless/quarto-webr
 
+# Allow quarto to switch between light and dark themes.
+theme:
+  light: flatly
+  dark: darkly
+
 # Set the language that should be used for Quarto websites
 # https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/language
 # lang: en

tests/qwebr-test-theme-switch.qmd

@@ -0,0 +1,25 @@
+---
+title: "Test: Light and Dark Mode"
+format: html
+engine: knitr
+filters:
+  - webr
+---
+
+Test classes for Quarto's light and dark mode.
+
+Toggle the switch to see: editor change from `vs` to `vs-dark` and standard output.
+
+## Interactive
+
+```{webr-r}
+#| autorun: true
+cat("Display letters: ")
+print(letters[1:5])
+
+plot(1:5)
+
+warning("This is a warning message!")
+
+stop("This is a hard error message!")
+```