Light and Dark Mode

[MayaGans]

Leaving this note for myself for a half baked idea that you could prob beat me to executing but let the user add a little button to the top right of their slides so the viewer can toggle between light and dark mode which would invert their color palettes (and obviously with a cute little sun icon to toggle to light and moon for dark)

[gadenbuie]

Cool idea! Have you seen colinfay/darkmode, that's probably a good place to start (and it doesn't work out of the box with remarkjs).

The other way to go is to take advantage of the fact that the slide theme is powered entirely by CSS variables. With this route, you can use the prefers-color-scheme: dark media query and change key CSS custom properties for dark slides.

@media (prefers-color-scheme: dark) {
  :root {
    /* invert foreground/background colors for "dark mode" */
    --text-color: #FFFFFF;
    --background-color: #000000;
    /* ... etc ... */
  }
}

This happens passively based on OS settings, so it isn't as fancy as a JavaScript implementation... but it works pretty well. I guess we'd only need a helper function for appending the media query, something like style_prefers_dark_scheme() or style_darkmode().

[gadenbuie]

Oh also here's the full list of CSS variables

xaringanthemer/inst/resources/template.css

Lines 26 to 59 in c375a3d

	:root {
	/* Fonts */
	--text-font-family: {{text_font_family}};
	--text-font-is-google: {{text_font_is_google}};
	--text-font-family-fallback: {{text_font_family_fallback}};
	--text-font-base: {{text_font_base}};
	--header-font-family: {{header_font_family}};
	--header-font-is-google: {{header_font_is_google}};
	--code-font-family: {{code_font_family}};
	--code-font-is-google: {{code_font_is_google}};
	--base-font-size: {{base_font_size}};
	--text-font-size: {{text_font_size}};
	--code-font-size: {{code_font_size}};
	--code-inline-font-size: {{code_inline_font_size}};
	--header-h1-font-size: {{header_h1_font_size}};
	--header-h2-font-size: {{header_h2_font_size}};
	--header-h3-font-size: {{header_h3_font_size}};
	/* Colors */
	--text-color: {{text_color}};
	--header-color: {{header_color}};
	--background-color: {{background_color}};
	--link-color: {{link_color}};{{#text_bold_color}}
	--text-bold-color: {{text_bold_color}};{{/text_bold_color}}
	--code-highlight-color: {{code_highlight_color}};
	--inverse-text-color: {{inverse_text_color}};
	--inverse-background-color: {{inverse_background_color}};
	--inverse-header-color: {{inverse_header_color}};
	--title-slide-background-color: {{title_slide_background_color}};
	--title-slide-text-color: {{title_slide_text_color}};
	--header-background-color: {{header_background_color}};
	--header-background-text-color: {{header_background_text_color}};{{#colors}}
	--{{color_name}}: {{value}};{{/colors}}
	}

[MayaGans]

Kind of related - do I need to use JavaScript to inject font-awesome into the head of the slide/markdown doc? I tried using htmltools::htmlDependency for it (I have the functionality almost but I want to make the button a cute icon 😊 )

[gadenbuie]

Nope, you can throw rmarkdown::html_dependency_font_awesome() inside the htmltools::tagList() that implements your feature. Check out xaringanExtra::use_slide_tone() for an example. Actually -- now that I mention it -- xaringanExtra might be a better place for this (unless it requires the xaringanthemer CSS variables)?

That said... FontAwesome is a huge dependency and I highly recommend avoiding depending on the whole thing if you can. Two options: you can download the SVG for the icon you're using and then embed the SVG inline. Or you can similarly pick out the SVG for icons from other packs, like Feather or Tabler icons. Both of those projects use an MIT license. Also definitely check out mitchelloharawild/icon, it's an awesome R package that also embeds icons from FA as SVGs directly.

[MayaGans]

Oh love that SVG idea! I'll keep working on my little reprex and if you like it we can decide if its a better fit here or GExtra :) thanks!