schemascii_example.css

svg.schemascii {
    background: black;

    & .wire polyline  {
        stroke: var(--sch-color, blue);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition-duration: 0.2s;
        fill: transparent;
    }
    & .wire circle {
        fill: var(--sch-color, blue);
        transition-duration: 0.2s;
    }
    & :is(.wire, .component):hover {
        --sch-color: lime;
    }
    & .component :is(polyline, path, line, polygon, rect, circle):not(.filled) {
        stroke: var(--sch-color, red);
        stroke-width: 2;
        stroke-linecap: round;
        transition-duration: 0.2s;
        fill: transparent;
    }
    & .component :is(polyline, path, line, polygon, rect, circle).filled {
        fill: var(--sch-color, red);
        stroke: none;
        transition-duration: 0.2s;
    }
    & .component .plus :is(polyline, path, line) {
        stroke-width: 1;
    }
    & .component polygon {
        fill: var(--sch-color, red);
    }
    & .component text {
        fill: white;
        transition-duration: 0.2s;
    }
    & .component:hover text {
        font-weight: bold;
    }
    & .component tspan:is(.cmp-value, .part-num) {
        opacity: 50%;
    }
}

@media all and (prefers-color-scheme: light) {
    svg.schemascii {
        background: white;
        & .component text {
            fill: black;
        }
        & :is(.wire, .component):hover {
            --sch-color: lime;
        }
    }
}