Publish dark mode variables.css

[bollwyvl]

Problem

I would like to embed widgets in light/dark aware applications, such as the pydata-sphinx-theme for ipywidgets on ReadTheDocs.

Proposed Solution

• Ship a variableslight.css and variablesdark.css
• re-enable the theme switcher in conf.py
• add some documentation about general integration strategies
  • as well as that specific theme

Additional context

• noted as follow-on work in #3673

[flying-sheep]

Ship a variableslight.css and variablesdark.css

what does that mean? dark mode should follow the theme’s setting. a way to do this is this:

--jp-layout-color0: var(--light, white) var(--dark, black);

which is enabled by defining the switch variables depending on the theme colors:

@media (prefers-color-scheme: dark) {
	:root {
		--light: ;
		--dark: initial;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--dark: ;
		--light: initial;
	}
}

:is(html, body)[data-theme="dark"] {
	--light: ;
	--dark: initial;
}

:is(html, body)[data-theme="light"] {
	--dark: ;
	--light: initial;
}