How can I change the text color of the pop up 'Copied!' when the copy code button is clicked?

[aymennasri]

Description

This is the text color in light mode:

And somehow it changes in dark mode with no apparent scss rules changing it:

Using Linux Mint 21.3

quarto --version
1.5.55

[mcanouil]

Use your favourite browser developer/inspect mode to identify the correct (S)CSS selector, then set it to whatever you want.

You should be able to find many other discussions here and elsewhere about this process.

Note that a screenshot does not replace actual code, it only help illustrate.

[aymennasri]

Tried inspecting and there was no styling variables, tried searching through scss variables and rules for Quarto, nothing worked; and yes I'm aware of the fact that the screenshots do not replace actual code, I'm only illustrating the problem in order to get an answer about a variable name or rule that can help me control the copy code button popup text.

[mcanouil]

All variables are listed in https://quarto.org/docs/output-formats/html-themes.html

For instance "code copy", but because you did not share actual code, this might not be the option you are looking for.

[aymennasri]

Which part of the custom theme scss file do I need to share?

[jimjam-slam]

I can't speak to the SCSS side, but on the CSS side, on quarto.org it looks like the tooltip is styled by the CSS property --bs-tooltip-bg:

.tooltip {
  --bs-tooltip-color: #fff;
  --bs-tooltip-bg: #000;
}

If you're looking to change this in dark mode specifically, you could add something like:

body.quarto-dark .tooltip {
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #000;
}

(You might need some extra styling to also change the pointy "tip" of the tooltip, too, but I'm hoping it also uses the custom CSS property!)

[cderv]

Which part of the custom theme scss file do I need to share?

This could be an issue with some themes not correctly adapting to dark mode.

I believe from Bootstrap, tooltip color should be adapted based on $body-bg by default. The SCSS variable from boostrap that controls it is $tooltip-color, which defines in CSS var(--bs-tooltip-color)

But for some dark theme, it will be set to var(--bs-emphasis-color); controlled by $body-emphasis-color.
but I wonder if this should not be $body-emphasis-color-dark 🤔
So as you see this is not easy to track. This is not Quarto SCSS but Bootstrap + Bootswatch theme.

Can you see which theme are you using here ? I would like to see if there an issue to fix. thanks!

Probably tweaking the CSS as shown by @jimjam-slam is a good way without entering SCSS world.

[aymennasri]

Which part of the custom theme scss file do I need to share?

This could be an issue with some themes not correctly adapting to dark mode.

I believe from Bootstrap, tooltip color should be adapted based on $body-bg by default. The SCSS variable from boostrap that controls it is $tooltip-color, which defines in CSS var(--bs-tooltip-color)

But for some dark theme, it will be set to var(--bs-emphasis-color); controlled by $body-emphasis-color.
but I wonder if this should not be $body-emphasis-color-dark 🤔
So as you see this is not easy to track. This is not Quarto SCSS but Bootstrap + Bootswatch theme.

Can you see which theme are you using here ? I would like to see if there an issue to fix. thanks!

Probably tweaking the CSS as shown by @jimjam-slam is a good way without entering SCSS world.

I actually have my own SCSS theme that I built so based on your advice, should I try to tinker around with the variables you mentionned? I'd love to have it all in the same SCSS file without tweaking the CSS.

[aymennasri]

I can't speak to the SCSS side, but on the CSS side, on quarto.org it looks like the tooltip is styled by the CSS property --bs-tooltip-bg:

.tooltip {
  --bs-tooltip-color: #fff;
  --bs-tooltip-bg: #000;
}

If you're looking to change this in dark mode specifically, you could add something like:

body.quarto-dark .tooltip {
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #000;
}

(You might need some extra styling to also change the pointy "tip" of the tooltip, too, but I'm hoping it also uses the custom CSS property!)

Thanks for your answer! The first code block worked inside the SCSS file with no issues.

[cderv]

I actually have my own SCSS theme that I built so based on your advice, should I try to tinker around with the variables you mentionned? I'd love to have it all in the same SCSS file without tweaking the CSS.

Yes please do share your custom theme if you want help on it. Otherwise, you can get inspiration from boostwatch theme. You can see that they do have specific handling for tooltip to get the coloring right
Se for example darkly

quarto-cli/src/resources/formats/html/bootstrap/themes/darkly.scss

Lines 270 to 273 in 88819d5

	.tooltip {
	--bs-tooltip-bg: var(--bs-tertiary-bg);
	--bs-tooltip-color: var(--bs-emphasis-color);
	}

If you have a custom them no inheriting from an existing dark theme you may want to do the same.

Thanks for your answer! The first code block worked inside the SCSS file with no issues.

But this is basically the CSS shared above that you are happy with. It is just a matter of knowing if you want to reuse a sass variable or use specific color for your theme.