How can I use the Lumen theme for the dark and the light mode?

[Nodragem]

Description

The bootswatch theme Lumen comes in Dark and Light (you can use the toggle at the top right of the website):
https://bootswatch.com/lumen/

However, I did not find how to use the dark mode in quarto, and hence, how to toggle between the dark and light version of the theme.

[mcanouil]

Currently you can't without providing yourself the whole theme as SCSS with the right modifications in it.

Quarto does not use the same approach to dark/light.

See:

• Make Bootswatch paired light and dark themes available #6741

[Nodragem]

I tried this:

format:
  html:
    theme: 
      dark: [lumen, css/_variables-dark.scss]
      light: [lumen, css/_variables-light.scss]
    css: styles.css

with _variable-dark.scss:

/*-- scss:defaults --*/
$gray-100: #f6f6f6;
$gray-200: #f0f0f0;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-600: #999;
$gray-700: #555;
$gray-800: #333;
$gray-900: #222;
$black: #000;
$blue: #158CBA;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #FF4136;
$orange: #fd7e14;
$yellow: #FF851B;
$green: #28B62C;
$teal: #20c997;
$cyan: #75CAEB;
$primary: $blue;
$gray-500: rgb(158, 168, 179);
$secondary: $gray-500;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-500;
$dark: $gray-700;
$dropdown-link-color: rgba(0,0,0,.5);
$white: rgb(247, 243, 234);
$body-bg: $gray-800;
$body-color: $gray-200;
$card-bg: $gray-500;
$modal-content-bg: $gray-600;
$text-muted: $gray-700;
$blockquote-small-color: $gray-700;
$list-group-bg: $gray-500;
$jumbotron-bg: $gray-500;
$list-group-hover-bg: $gray-300;
$pagination-bg: $gray-300;
$pagination-border-color: $gray-400;
$pagination-disabled-bg: $gray-700;
$pagination-disabled-border-color: $gray-600;
$breadcrumb-bg: $gray-300;
$progress-bg: $gray-500;
$input-bg: $gray-300;

and _variables-light.scss:

/*-- scss:defaults --*/
$gray-100: #f6f6f6;
$gray-200: #f0f0f0;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #999;
$gray-700: #555;
$gray-800: #333;
$gray-900: #222;
$black: #000;
$blue: #158CBA;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #e83e8c;
$red: #FF4136;
$orange: #fd7e14;
$yellow: #FF851B;
$green: #28B62C;
$teal: #20c997;
$cyan: #75CAEB;
$primary: $blue;
$secondary: $gray-200;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-700;
$dropdown-link-color: rgba(0,0,0,.5);
$body-bg: $gray-100;

and I get the error:

Theme file compilation failed:

Error: Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  _maps.scss 55:16                                                          @import

Any idea what is happening?

[mcanouil]

See the documentation (https://quarto.org/docs/output-formats/html-themes.html) about the order of compilation and that's not what I meant.
I meant you provide the whole theme yourself with hardcoded modification to it to force one state or the other.

[Nodragem]

I used the same order as in the official Quarto website (see their _quarto.yaml):

I think my issue might be link to this issue about $primary-text-emphasis-dark being required in Bootstrap 5.3.0:
twbs/bootstrap#38683

[mcanouil]

Then try using pre-release version of Quarto CLI.

But the Bootswatch themes might not be up to date with Bootstrap version in Quarto CLI.