Light/dark mode leads to low background/colour contrast tooltip

[mcanouil]

Currently the $tooltip-bg and $tooltip-colour have no contrast or insufficient one in dark mode.

The main case is quarto.org, see:

• https://quarto.org/docs/authoring/code-annotation.html

I think the issue lies in how those two variables are set, take the following example:

---
format: html
theme:
  dark:
    - cosmo
    - brand
brand: 
  color:
    background: "#333333"
    foreground: "#fafafa"
---

```python
print("Hello, World!")
```

[cscheid]

Thank yoU!

[mcanouil]

I've added a more general reprex with brand showing that the tooltip is always wrong in dark mode (dark background)

I've personally redefined the variables as:

$tooltip-color: $background !default;
$tooltip-bg: $foreground !default;

[xx02al]

Hey @mcanouil thanks for inviting me to take a look at this issue, so I do. Honestly, unfortunately I don't understand the point you're trying to make.

I've tweaked the reprex a bit, especially to also include some tooltips. (That's the docs code annotation example). I kept the Cosmo theme as the theme to inherit from in dark mode, because you set it, but just to have reminded: its not a dark mode like theme (but that doesn't stop us from using it as a "preset", so we can do that). Furthermore, I did set a different light theme because I found it illustrates more clear than when we have the same colors in dark and light mode.

---
format: html
theme:
  light: flatly
  dark:
    - cosmo
    - theme-dark.scss
code-annotations: hover
---

This is some text in the `$body-color` color.

```r
library(tidyverse)
library(palmerpenguins)
penguins |>                                      # <1>
  mutate(                                        # <2>
    bill_ratio = bill_depth_mm / bill_length_mm, # <2>
    bill_area  = bill_depth_mm * bill_length_mm  # <2>
  )                                              # <2>
```
1. Take `penguins`, and then,
2. add new columns for the bill ratio and bill area.

This is some text in the `$body-color` color.

theme-dark.scss is then:

/*-- scss:defaults --*/

$deepindigo: #11063e;
$lightpink: #fdf7ff;

$body-bg: $deepindigo;
$body-color: $lightpink;

With theme-dark.scss we inherit from cosmo and then from the default Bootstrap theme.

For me it looks correct and also the tooltip text-background has good contrast values. Also if we would replace our current dark with a more dark mode like Bootswatch theme, Cyborg or Darkly for example.

[mcanouil]

The point was not: "if you tweak everything then it's correct thus users should just tweak everything".
The point was that since Quarto allows any theme to be used as dark theme and sets defaults sometimes different from the original ones, changing background or foreground via brand should not require users to have to create a whole theme.

And that's exactly the same point for the other issue.

[xx02al]

Well, if we want to leave the current example aside, then here is my opinion on the more fundamental point.

I think it would be reasonable for Quarto to make some defaults (tweaks) when a user uses brand for theming in cases where themes have been combined "unhappily". Brand is something of a lightweight/gentle entry point, and as such, such tweaks would be a reasonable expectation from users. When theming is done without brand, however, I find the inheritance principle strong as it is.

[mcanouil]

It's not two different systems, it's two layers.

Changing the defaults, for example, to be conditional on the background or foreground will change the behaviour with and without brand.