Can I have a theme selector in revealjs menu?

[TLouf]

Description

I have tried several things but could not utilize reveal.js-menu's theme switching functionality. I have set:

menu:
      themes: true

in my config file, of course, but also tried including custom css in a folder, tweaking themesPath so that the plugin could reach it. But in the end, I couldn't manage to have the Themes tab appear in the menu.

Would anyone have a solution to propose? The way may be a bit hacky but I would say that there should be one, right?

Thanks for the help! :)

[cderv]

I don't think we allow for configuring the built in menu plugin with YAML option.

A current workaround would be to set menu: false to not include the default menu, and then add another tweaked menu plugin packaged as an extension (https://quarto.org/docs/extensions/revealjs.html) but with other default.

This would be a Feature request to allow changing some settings for the built in plugins

[TLouf]

The thing is, setting transitions: true does have the expected effect, for instance. So I have the feeling that I can somehow make the theme selector work, albeit with some hack to make it find the CSS files.

But thanks, disabling the already-packaged one to use one I include myself surely works too, although not ideal.

[mcanouil]

In theory, you can, but it's likely to mess up all Quarto (S)CSS and you need to have the (S)CSS locally.

---
title: "Presentation"
format:
 revealjs:
   theme: dark
   menu: {
     themes: [
       {
         name: 'Black',
         theme: 'dist/theme/beige.css'
       }
     ]
   }
---

See https://github.com/denehyg/reveal.js-menu.

[ArthurData]

Hello,

The solution "works" but not quite as planned, I think.

However, I get an error when I pass the JSON as a value :

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
    menu: |
      {
        themes: [
          { 
            name: 'Red',
            theme: 'dist/theme/red.css'
          }
        ]
      }
---

# ...

ERROR: Render failed due to invalid YAML.

[cderv]

Thanks for testing !

As @mcanouil said, using a theme file as css with this extension will probably break things as other configuration for Quarto are not merged probably. When the red.css is applied, it must be replacing some global rules. 🤔

[mcanouil]

@cderv @ArthurData is the one who told be about breaking things and showing me the possibility of theme menu in "raw" Reveal.js 😜

[cderv]

😆 ok ! I am still puzzled by this raw content pass to YAML field.... 🤔 I believe this is working as a side effect, and not exactly as we think it is.

YAML has a Flow style availble, including Flow mapping, which allow to use { } instead of indentation. Search FLow Styles in spec: https://yaml.org/spec/1.2.2

YAML also has flow styles, using explicit indicators rather than indentation to denote scope. The flow sequence is written as a comma separated list within square brackets. In a similar manner, the flow mapping uses curly braces.

This means that

format:
 revealjs:
   theme: dark
   menu: {
     themes: [
       {
         name: 'Black',
         theme: 'dist/theme/beige.css'
       }
     ]
   }

is the same as

format:
 revealjs:
   theme: dark
   menu:
     themes:
      - name: 'Black'
         theme: 'dist/theme/beige.css'

It seems we are correctly merging the config by formatting internally to the right JSON for Revealjs conf.

This solves for me the puzzle, and why using menu: | does not work, because passing Raw JSON is not permitted.

Thanks for the question and answer, as I learnt about YAML flow styles

[TLouf]

Thanks a lot for the investigations everyone! @ArthurData I can't make your solution work, I had tried something similar already, but can't figure out where the dist folder should be located in my working directory, as I don't know how quarto resolves the path dist/theme/red.css. I basically copied the CSS all over the place, but to no avail, there must be something dumb I'm missing.