Equations in colored box with light/dark mode

[willymcallister]

I posted this question in #2531.
"With \colorbox the color specification appears to be hard coded. The allowable arguments are #hexcodes and standard HTML color names. Can you think of a way to make the color responsive to dark/light mode?"

@edemaine made this suggestion,
... \htmlClass is probably what you're looking for. See https://katex.org/docs/supported.html#html

\htmlClass seemed over my head. I worked out a different way, using a new class in main.scss,

 .colorbox {  
  background: var(--box-color);   
  display: inline-block;  
}

The background color, --box-color, is sensitive to dark/light mode, as defined at the top of the same main.scss file,

html {  
  --box-color: #94fff5;  

@media (prefers-color-scheme: dark) {  
  html {  
  --box-color: #144f44;                 
  }  
}  

And the last step is to reference the new class by appending {: .colorbox :} on the line after the equation in a markdown file,

$\boxed{v_{tot} = (\text V_0 - \text V_\text S)\,e^{-t/\text{RC}} + \text V_\text S}$
{: .colorbox :}

The result,

[edemaine]

Glad you got it working! Something like the following should also work with your setup (instead of using the {: .colorbox :} magic), if you have the trust setting enabled (but maybe that's what you were saying is difficult):

$\htmlClass{colorbox}{\boxed{v_{tot} = (\text V_0 - \text V_\text S)\,e^{-t/\text{RC}} + \text V_\text S}}$

[willymcallister]

I read through \htmlClass and it guided me to trust. I did not come across an example of where/how to set trust. I use auto-render. My mind clouds when the docs talk about options. Not obvious where to put them. The idea of setting "trust" set off caution bells, since it indicates I'm entering a situation I don't fully appreciate. So I fell back on a method I'm more adept at. Thanks for everything you do for KaTeX. I used it a ton while at KA doing the electrical engineering subject, and continue to exploit its wonderfulness at https://spinningnumbers.org.