Original discussion: val-town/val-town-product#88
It would be useful if the vt-playground web component styles could be customized via CSS custom properties. Customization efforts can be reduced by using color-mix() to adjust unspecified colors as needed (e.g., make borders slightly lighter/darker than background color based on prefers-color-scheme).
Here is a basic example:
/* Defaults */
:root {
--vt-background-color: #eee;
--vt-border-color: color-mix(in srgb, var(--vt-background-color) 93%, black);
}
/* Custom styles */
:root {
--vt-background-color: #222;
}
Original discussion: val-town/val-town-product#88
It would be useful if the
vt-playgroundweb component styles could be customized via CSS custom properties. Customization efforts can be reduced by usingcolor-mix()to adjust unspecified colors as needed (e.g., make borders slightly lighter/darker than background color based onprefers-color-scheme).Here is a basic example: