Specify theme directly in RevealJS.

coatless · Apr 4, 2024 · b849938 · b849938
1 parent 668f554
commit b849938
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -78,5 +78,5 @@ format:
 
 # Allow quarto to switch between light and dark themes.
 theme:
-  light: flatly
+  light: cosmo
   dark: darkly
diff --git 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
@@ -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
@@ -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
@@ -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