Currently, the code-copy button for HTML output gets its color from either `$text-muted` or `$link-color` depending on whether it's being hovered over from which an inline SVG is generated (as opposed to just the bi font symbol with color applied, which is totally fine):
https://github.com/quarto-dev/quarto-cli/blob/0a86a26aa9be10147d628c755f70fb889784018b/src/resources/formats/html/_quarto-rules-copy-code.scss#L15-L45

However, in cases where the code chunk syntax highlighting color is different to the background of the main site (e.g. on the mockup site I've been making here, I use `a11y-dark` for code chunks in a theme with a light bg: https://quartoand.me/syntax-highlighting-demo), it's pretty fiddly for the user to change the color, since they have to make the icon SVGs with a contrasting color manually. For example, for the page linked to above, I ended up adding the following to my custom.scss:
```scss
// fill color chosen to contrast with background of syntax-highlighting theme
/* code copy button hover */
pre.sourceCode:hover>.code-copy-button:hover>.bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(177, 183, 188)" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>');
}
/* code copy button CHECK hover */
pre.sourceCode:hover>.code-copy-button-checked:hover>.bi::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(177, 183, 188)"  viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>');
}
```

I certainly could've made/probably should make the above a bit more elegant by using my own variable for the fill color, but I'd still have to duplicate the code for generating the SVG that exists in [_quarto-rules-copy-code.scss](https://github.com/quarto-dev/quarto-cli/blob/0a86a26aa9be10147d628c755f70fb889784018b/src/resources/formats/html/_quarto-rules-copy-code.scss).

If you let me know what variable name I should use, I'd be happy to put in a PR for this. I realize this is quite niche, but, because there's no visible tooltip that indicates that the code has been copied (the icon changes to the check, and the _title_ changes to "Copied"), it's currently difficult to perceive what's happened after the button's been clicked if there's insufficient contrast.
dragonstyle
2022-07-12T10:16:44Z
batpigandme
v1.2
closed
FR: Make code-copy-button colors configurable
https://github.com/quarto-dev/quarto-cli/issues/1359