I say weird, but it is probably just that I do not understand what is going on. I am using the code-fold option for some code. I want to change the color of the Code button that appears above the code (the clickable button to reveal the code). I can change the color of its background without any problem, but the color of the text itself is acting strangely.
The code for the code block is quite straightforward. It looks something like this:
code-fold: show
getwd() # this command will show you your current working directory
I want to change the color of the button, which I am attempting to do using a custom css file. The two commands that seem to matter here are as follows:
$primarycolor #006334;
$accent2: #633400;
$body-color: $primarycolor !default;
// change color of details button (code fold)
details {
background-color: mix($primarycolor, white, 25%);
color: $accent2;
padding: 5px;
}
This changes the background color for the code button without any problem. However, the text itself is a strange green color that, as far as I can tell, is not in the css anywhere. If I remove the body color argument, the color of the button changes to accent2. In other words, this works:
$primarycolor #006334;
$accent2: #633400;
// Remove this and it works
// $body-color: $primarycolor !default;
// change color of details button (code fold)
details {
background-color: mix($primarycolor, white, 25%);
color: $accent2;
padding: 5px;
}
But then the text of my slides is not the color I want.
Any ideas what is going on? What am I missing?
When I try your second example it does not work either.
Your $accent2 color is overriden by the color of the summary element from Bootstrap, which has a color: rgba(0,99,52,.75); (green) value.
Try adding this to your scss file:
details > summary {
color: $accent2;
}