Colors Not Accurate in Dark Mode

[MCDELTAT]

Environment

• Python version: Unknown. Demo sandbox, not specified in nautobot-lab container image.
• Nautobot version: 2.0.5
• nautobot-floor-plan version: 2.0.0

Observed Behavior

On the Nautobot demo deployment, in dark mode, colors on the floor plan page do not always match the original Organization –> Statuses object.

Expected Behavior

The Floor Plan page should display the same color as selected in the Organization –> Statuses object.

I began by following the introduction to the Floor Plan Plugin here: https://blog.networktocode.com/post/nautobot-floor-plan-app/

Steps to Reproduce

1. Create two new Statuses under Organization –> Statuses. Names can be anything, Colors should be Yellow and Amber.
2. Add a tile object to a Location Floor Plan using the new statuses.
3. Export the SVG of the Floorplan.
4. Compare the colors in the live, Dark Mode view and the exported SVG. They will be different.

Two images included to show the difference: Light Mode:

Dark Mode:

[djhoward12]

Confirmed this issue.

When in dark mode filter: invert(1) hue-rotate(180deg); needs to be added to .tile-status, l.abel-text and .label-text-primary

.tile-status {
    stroke: black;
    fill: #f7f7f7;
    opacity: .6;
    filter: invert(1) hue-rotate(180deg);
}

.label-text {
    fill: white;
    filter: invert(1) hue-rotate(180deg);
}
.label-text-primary {
    fill: white;
    font-weight: bold;
    filter: invert(1) hue-rotate(180deg);
}

A custom css file is being loaded on line 70 in svg.py

[djhoward12]

I was able to get this mostly working using the below code in svg.css.

.tile-status {
    stroke: black;
    fill: #f7f7f7;
    opacity: .6;

}

@media (prefers-color-scheme:dark) {
    .tile-status {
        stroke: black;
        fill: #f7f7f7;
        opacity: .6;
        filter: invert(1) hue-rotate(180deg);
    }
}

This works fine if the the system theme setting is used in Nautobot. If the browser setting is dark and the user selects light mode manually, the prefers-color-scheme still defaults to dark in the css.