Skip to content

Enhancement: Custom styling #1

@jhildenbiddle

Description

@jhildenbiddle

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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions