From b8499384ea4a0350dd1427a7ac4934ae6b649b72 Mon Sep 17 00:00:00 2001
From: James J Balamuta <james.balamuta@gmail.com>
Date: Thu, 4 Apr 2024 15:47:03 -0700
Subject: [PATCH] Specify theme directly in RevealJS.

---
 _extensions/webr/qwebr-styling.css                   |  8 +++++++-
 docs/_quarto.yml                                     |  2 +-
 docs/qwebr-theming.qmd                               | 12 +++++++++++-
 tests/_quarto.yml                                    |  2 +-
 tests/qwebr-test-revealjs.qmd                        |  4 +++-
 .../qwebr-test-status-header-suppressed-revealjs.qmd |  4 +++-
 6 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/_extensions/webr/qwebr-styling.css b/_extensions/webr/qwebr-styling.css
index f8ba884c..2ee49bd8 100644
--- a/_extensions/webr/qwebr-styling.css
+++ b/_extensions/webr/qwebr-styling.css
@@ -154,11 +154,17 @@ body.reveal.quarto-dark pre div code.qwebr-output-code-stdout {
 
 
 /* Create a border around console and output (does not effect graphs) */
-.reveal div.qwebr-console-area {
+body.reveal.quarto-light div.qwebr-console-area {
   border: 1px solid #EEEEEE;
   box-shadow: 2px 2px 10px #EEEEEE;
 }
 
+body.reveal.quarto-dark div.qwebr-console-area {
+  border: 1px solid #111;
+  box-shadow: 2px 2px 10px #111;
+}
+
+
 /* Cap output height and allow text to scroll */
 /* TODO: Is there a better way to fit contents/max it parallel to the monaco editor size? */
 .reveal div.qwebr-output-code-area pre {
diff --git a/docs/_quarto.yml b/docs/_quarto.yml
index c4c2f141..261c5376 100644
--- a/docs/_quarto.yml
+++ b/docs/_quarto.yml
@@ -78,5 +78,5 @@ format:
 
 # Allow quarto to switch between light and dark themes.
 theme:
-  light: flatly
+  light: cosmo
   dark: darkly
\ No newline at end of file
diff --git a/docs/qwebr-theming.qmd b/docs/qwebr-theming.qmd
index 178df335..3a1c59e9 100644
--- a/docs/qwebr-theming.qmd
+++ b/docs/qwebr-theming.qmd
@@ -141,7 +141,7 @@ The Monaco editor used by `{quarto-webr}` to power interactive code cells respec
 
 ```yaml
 theme:
-  light: flatly
+  light: cosmo
   dark: darkly
 ```
 
@@ -150,3 +150,13 @@ Once set, a clickable toggle will appear on the page that can switch between the
 :::{.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.
 :::
+
+### RevealJS
+
+For RevealJS, please note you may only specify [a single RevealJS theme](https://quarto.org/docs/presentations/revealjs/themes.html#using-themes) at a time. We recommend specifying either `default` (for light mode) or `dark` (for dark mode). 
+
+```yaml
+format:
+  revealjs:
+    theme: default
+```
diff --git a/tests/_quarto.yml b/tests/_quarto.yml
index 5d4624bd..a6d5ad71 100644
--- a/tests/_quarto.yml
+++ b/tests/_quarto.yml
@@ -25,7 +25,7 @@ website:
 
 # Allow quarto to switch between light and dark themes.
 theme:
-  light: flatly
+  light: cosmo
   dark: darkly
 
 # Set the language that should be used for Quarto websites
diff --git a/tests/qwebr-test-revealjs.qmd b/tests/qwebr-test-revealjs.qmd
index fdac379e..97097c52 100644
--- a/tests/qwebr-test-revealjs.qmd
+++ b/tests/qwebr-test-revealjs.qmd
@@ -2,7 +2,9 @@
 title: "Test: webR in RevealJS"
 subtitle: "Examining State"
 authors: "Presentation Lead"
-format: revealjs
+format: 
+  revealjs:
+    theme: dark
 engine: knitr
 filters:
   - webr
diff --git a/tests/qwebr-test-status-header-suppressed-revealjs.qmd b/tests/qwebr-test-status-header-suppressed-revealjs.qmd
index 97619a0f..3fcead9d 100644
--- a/tests/qwebr-test-status-header-suppressed-revealjs.qmd
+++ b/tests/qwebr-test-status-header-suppressed-revealjs.qmd
@@ -2,7 +2,9 @@
 title: "Test: No Startup Status Present in RevealJS Presentations"
 subtitle: "Examining State"
 authors: "Presentation Lead"
-format: revealjs
+format: 
+  revealjs:
+    theme: default
 engine: knitr
 webr: 
   show-startup-message: false