how to make colors work with theme switching

[rzach]

I couldn't figure out how I'd have to provide color information in the LaTeX source and/or added/custom CSS to make sure they work properly in night mode. Two examples:

1. Make a shaded box using framed.sty's environment shaded with a light background shade. In night mode the text inverts but the shade stays the same.
2. A black frame around something done with \fbox stays black in night mode.

[xworld21]

Those are virtually impossible to handle in BookML, because LaTeXML uses inline CSS for those colours. I'll try to intercept some of the inline CSS in XSLT and replace it with classes, but only in fairly generic cases (e.g. recognise black/white colour, border, background).

Best I can suggest is to attach an extra class to your frame using \lxAddClass, then use !important in CSS to override the inline style.

[rzach]

That's what I though to to (ie don't set the color in LaTeX but attach a class to the right thing) but I was wondering if it's documented somewhere (maybe in bookdown?) what the CSS should look like so it will properly invert. Say, if I say in CSS background-color: #xyz !important will the filter in the bookdown CSS take care of it or do I have to do something more fancy like provide explicit colors for all three color schemes? I suppose I could just try it out and if the first thing works it's done.... Anyway, perhaps something to mention in the documentation.

[xworld21]

Say, if I say in CSS background-color: #xyz !important will the filter in the bookdown CSS take care of it or do I have to do something more fancy like provide explicit colors for all three color schemes?

You'll have to provide additional styles for when the .book wrapper has additional classes, see for instance

bookml/CSS/style.gitbook.scss

Lines 100 to 108 in 38c6174

	/* <h6> is used for theorems, avoid the default faint gitbook colour */
	.book-body .page-wrapper .page-inner section.normal h6 {
	.book &, .book.color-theme-1 & {
	color: inherit;
	}
	.book.color-theme-2 & {
	color: #fffffa;
	}
	}

BookML applies filters only to images and to elements that have an explicit color: ... inline style.