CSS variables for common colors.

[crhallberg]

By setting some LESS variables to CSS variables, we can adjust those values throughout the system from the outside. See the top of variables.less for the current list of variables.

For example, you can make a very ugly (but useful for debugging) UV by adding this to src/index.html.

.uv {
	--uv-color-canvas: #0a3622;
	--uv-color-panel-bg: #031633;
	--uv-color-text: #ffe69c;
	
	--uv-color-accent-bg: #984c0c;
	--uv-color-accent-text: #fd9843;
}

And here is an example Light Theme (note the icons):

.uv {
	--uv-color-canvas: white;
	--uv-color-text: black;
	--uv-color-text-muted: oklch(0.446 0.03 256.802); /* Tailwind gray-600 */
	
	--uv-color-panel-bg: oklch(0.967 0.003 264.542); /* Tailwind gray-100 */
	--uv-color-panel-border: oklch(0.872 0.01 258.338); /* Tailwind gray-300 */
	
	--uv-color-accent-bg: oklch(0.902 0.063 306.703); /* Tailwind purple-200 */
	--uv-color-accent-text: oklch(0.438 0.218 303.724); /* Tailwind purple-800 */
	--uv-color-btn-primary-bg: var(--color-accent-text);
	--uv-color-btn-primary-border: black;
}

TODO:

• Ensure all appropriate static colors have been converted to LESS or CSS variables.
• Offer SVG or black icon images for lighter themes.
• After PR: Create a page of snippets of these mini themes.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
universalviewer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 14, 2025 8:14pm

[crhallberg]

Variables prefixed to match #1320.

[demiankatz]

Looks like this needs conflict resolution when time permits.