How to enable dark mode in Shinylive in line with the website?

[kv9898]

Description

Currently, both the Quarto website and Shinylive support dark mode. But when the website switches to dark mode, the Shinylive is not automatically switched. Are there any suggestions?

Link to my Shinylive app hosted on Quarto website: https://rubuky.com/tool/2024-09-23-SwitchChallenge/

[cderv]

I think this would be a shinylive question so that CSS for shinylive does respect the dark / light mode in Quarto.

Does shinlylive include a light / dark CSS ? I don't know enough about this extension. Did you ask the question on shinylive side ?

@schloerke @gadenbuie do you have some insight on how dark mode works for shinylive component ?

[kv9898]

I think this would be a shinylive question so that CSS for shinylive does respect the dark / light mode in Quarto.

Does shinlylive include a light / dark CSS ? I don't know enough about this extension. Did you ask the question on shinylive side ?

@schloerke @gadenbuie do you have some insight on how dark mode works for shinylive component ?

Thank you so much for bringing the two teams together for my issue!

[kv9898]

Does Quarto follow prefers-color-scheme? If it doesn't, at some point I imagine Quarto will support Bootstrap's color modes feature. In general, my preference would be to follow the system color scheme (this is what input_dark_mode() does by default).

Alternatively, does Quarto trigger a browser event when changing from light to dark mode? In theory, shinylive could set up an event listener to pass this message to Shiny apps inside iframes, but this would take some coordinated logic in shinylive and Shiny for R and Python.

Maybe this is a separate issue, but it is possible for shinylive to inherit certain theme settings (e.g. background and text colors) from quarto page? Because currently shinylive requires that the code chunk is 'standalone' it is quite hard to include chunks of css in quarto-shinylive. I can open a issue in the extension repo if needed, but I'm not sure if it's the right place to go...

[gadenbuie]

@kv9898 Good timing, I'm actually working on unified theming that will span Quarto and Shiny with a single configuration file. We're working on having a single config file that both Quarto and Shiny will know about that can control a variety of core theme properties. That said, it'll likely take a bit before Shinylive can automatically pick this up. In the mean time, you can use ui.Theme() in Shiny to create a custom theme that matches your Quarto pages.

[kv9898]

@kv9898 Good timing, I'm actually working on unified theming that will span Quarto and Shiny with a single configuration file. We're working on having a single config file that both Quarto and Shiny will know about that can control a variety of core theme properties. That said, it'll likely take a bit before Shinylive can automatically pick this up. In the mean time, you can use ui.Theme() in Shiny to create a custom theme that matches your Quarto pages.

Thank you so much! That's super helpful!

[cderv]

I also noticed #8054 is open, which seems to indicate that Quarto currently doesn't emit an event upon changing from light to dark mode. That would be necessary for the intermediate steps where we manually hook things up.

@gadenbuie yes this is the right issue. Thanks !

[kv9898]

For anyone who is interested, here is how I solved them problem (an interactive guide is available in my blog post):

(Updated following @gadenbuie's suggestions)

First, in the Quarto Website Page, we need to add a JavaScript (script?) to communicate with the ShinyLive app, which is in iframe. The adding is done by:

include-after-body:
  text: |
    <script type="application/javascript" src="js/light-dark.js"></script>

The actual light-dark.js file is inspired by @mcanouil 's code from his blog and needs to contain:

const DarkEvent = new CustomEvent("quarto-color-mode", { detail: { mode: "dark" }}); // add new events
const LightEvent = new CustomEvent("quarto-color-mode", { detail: { mode: "light" }});

function updateAppTheme() { // dispatch events when theme needs updating
    var bodyClass = window.document.body.classList;
    if (bodyClass.contains('quarto-light')) {
        window.dispatchEvent(LightEvent);
    } else if (bodyClass.contains('quarto-dark')) {
        window.dispatchEvent(DarkEvent);
    }
  }
  
var observer = new MutationObserver(function(mutations) { // listen for theme changes
    mutations.forEach(function(mutation) {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        updateAppTheme();
      }
    });
  });
  
observer.observe(window.document.body, { // enable observer
    attributes: true
});

window.onmessage = function(e) { // update theme when receives querry
  if (e.data == 'ShinyColorQuery') {
    updateAppTheme();
  }
};

Back to the ShinyLive app, it also needs to add a JS script to communicate with the parent page. A minimal working ShinyLive app code looks like this:

#| standalone: true
## file: app.py
from shiny import *
from pathlib import Path

app_ui = ui.page_fluid(
    "This is a Shinylive app with dark theme synced with Quarto", # other ui inputs that you like
    ui.head_content(ui.include_js(Path(__file__).parent / "light-dark.js")),
)

app = App(app_ui, None)

## file: requirements.txt
## file: light-dark.js
window.parent.addEventListener("quarto-color-mode", function(event) {
    // Shiny.setInputValue('quarto_mode', event.detail.mode);
    document.documentElement.dataset.bsTheme = event.detail.mode;
    if (event.detail.mode === "dark") {
        document.documentElement.style.setProperty('--bs-body-bg', "#16242f"); // custom dark background color
    }  else if (event.detail.mode === "light") {
        document.documentElement.style.setProperty('--bs-body-bg', "#f9fffe"); // custom light background color
    }
})
window.parent.postMessage('ShinyColorQuery', '*'); // request Quarto theme color when Shinyapp is loaded

[gadenbuie]

Thanks for working this all out @kv9898! I have two tips that will improve the situation a bit:

1. You can use a single custom event to report the color mode change and you can attach the new color mode as custom data in the event: new CustomEvent("quarto-color-mode", { detail: { mode: "light" }}). This means that you don't need to listen to two different events

2. On the Shiny side you can considerably simplify the logic by setting the theme directly in the browser.

   window.parent.addEventListener("quarto-color-mode", function(event) {
     document.documentElement.dataset.bsTheme = event.detail.mode
   })

   With this approach, you don't even need to include input_dark_mode() in your app unless you want to either create an input carrying the current color mode for your server logic or if you want to give the user a way to change the color mode from inside the app.

3. Finally, instead of relying on the Shiny server to send a custom message, you can use the same mutation observer logic in the Shiny portion to watch the document.documentElement.dataset.bsTheme attribute for changes and then report those up to the parent via the post message.

[kv9898]

Thank you for your advice @gadenbuie! Now I have merged the two events, it's now neater.

However, I'm not quite sure with the implementation of the second and third points you made. For the second point, I hesitated to use the document.documentElement.dataset.bsTheme = event.detail.mode because I want to change the background color for the dark theme, but I struggled to find out a way to do it without messing with the light theme, probably because I'm unfamiliar with JavaScript and Bootstrap themes.

With regard to the final point, the custom message is actually an ugly fix for the Shinyapp to respect the Quarto theme when the page is first loaded. Without the fix, it could be the case that the page is loaded in the dark theme while the shiny app is still in the light theme, until the user manually toggles the dark mode switch in the parent page. I tried inserting the window.parent.postMessage('TellMeColor', '*'); command as the last line of ui but it didn't work. I guess it's because when the line was executed, the Shiny app was not ready to update the theme (probably because the server was not yet loaded)? Please let me know if there is a more elegant solution!

[gadenbuie]

Oh I see, in that case, if you use the direct setting of data-bs-theme, could have the JavaScript in the Shiny app just submit the post message and handle the response directly.

If you need input.theme_mode() in your Shiny server logic, you can include ui.input_dark_mode(id="theme_mode") in your UI and this will watch for changes in that data attribute and report those updates back to Shiny. (If you go this route, you might need to delay asking the parent page for the theme until after the Shiny app is ready, probably even a short setTimeout() would be fine.)

[kv9898]

Hi @gadenbuie, I'm glad to tell you that I made some final changes. Now everything is done via JavaScript and in the python part we only insert the script, very neat! I also made an interactive version in my blog post (i.e. with a shinylive editor).

However, I note that currently the shinylive's editor does not support dark mode properly. In my blog post I made some effort setting the dark theme colors for the editor in the JavaScript of the Quarto page, because I noted that the editor is not part of the iframe and therefore any JS embedded in Shinyapp cannot change the CSS of the editor. I opened an issue in the extension repo: quarto-ext/shinylive#63