I’m using Floorplan in a custom panel, and now that theming has come along it’s annoying that the background of the floorplan page is always white. I’d settle for being able to fix the colour to something not white (I could them simply blend it with the background of my floorplan).
I suspect I’m missing something obvious, so if somebody could point out the error of my ways, I’d appreciate it 
Modify the floorplan.css variable:
background-color: var(--primary-background-color);
Enjoy!
Hmmm, if I put that in floorplan.css, that doesn’t work. I’m guessing it needs to go somewhere in the theme, but using as is in a theme doesn’t work either.
What’m I missing?
can you post your floorplan.css?
Here’s mine:
/* Animation */
@keyframes rotate90 {
100% {
transform: rotate(90deg);
}
}
@keyframes rotateReset90 {
0% {
transform: rotate(90deg);
}
100% {
transform: none;
}
}
@keyframes fadeIn {
0% {
transform: rotateX(90deg);
}
100% {
transform: rotateX(0deg);
}
}
@keyframes fadeOut {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(90deg);
}
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
/* SVG shapes */
svg, svg * {
/* vector-effect: non-scaling-stroke !important; */
pointer-events: all !important;
background-color: var(--primary-background-color);
}
/**************/
/* Groundplan */
/**************/
/* Light */
.light-off {
fill: #333300 !important;
}
.light-on {
fill: #e6e600 !important;
}
/* Temperature sensor */
.temp-very-low-background {
fill: #d9edf7 !important;
fill-opacity: 1 !important;
}
.temp-below-average-background {
fill: #dcefe8 !important;
fill-opacity: 1 !important;
}
.temp-average-background {
fill: #dff0d8 !important;
fill-opacity: 1 !important;
}
.temp-very-high-background {
fill: #f2dede !important;
fill-opacity: 1 !important;
}
/* Cameras */
.camera-idle {
fill: #0099ff !important;
}
/* Door Bell */
.doorbell-no-motion {
fill: #009933 !important;
}
.doorbell-motion {
fill: #ff3300 !important;
}
/* Garage Door */
.garage_door-closed {
fill: #009933 !important;
}
.garage_door-open {
fill: #ff3300 !important;
}
/* Sun */
.sun-up {
fill: #ffff00 !important;
}
.sun-down {
fill: #333300 !important;
}
/* Media player */
.mediaplayer-off {
fill: #3d3b3f !important;
}
.mediaplayer-on {
fill: #1db2ad !important;
}
/* Doors */
/* Doors that open to the top left */
#binary_sensor\.door_window_sensor_158d00011c8066 {
transform-origin: top left;
}
/* Doors that open to the bottom right */
#binary_sensor\.door_window_sensor_158d000154b7c0 {
transform-origin: bottom right;
}
.door_closed {
fill: #008000 !important;
animation-duration: 4s;
animation-name: rotateReset90;
}
.door_open {
fill: #ff0000 !important;
animation-duration: 4s;
animation-name: rotate90;
animation-fill-mode: forwards;
}
/* Rooms */
.room-no-motion {
fill: #fff !important;
fill-opacity: 0.5 !important;
}
.room-motion {
fill: #f00 !important;
fill-opacity: 0.5 !important;
}
/* Fans */
#fan\.living_room_fan_level, #fan\.master_bedroom_fan_level {
transform-origin: center;
}
.fan-on {
fill: #ff8a65 !important;
-webkit-animation: rotation 2s infinite linear;
}
.fan-off {
fill: #424242 !important;
}
/**************/
/* Info Panel */
/**************/
/* Date & Time */
.static-text
{
font-family : Helvetica;
font-weight : bold;
fill : #FFFFA6;
}
/* Alarm Panel */
.alarm-disarmed {
fill: #3c763d !important;
}
.alarm-armed {
fill: #8a6d3b !important;
}
.alarm-triggered {
fill: #ff0000 !important;
}
.alarm-pending {
fill: #00cc99 !important;
}
.layer-visible {
animation-duration: 0.5s;
animation-name: fadeIn;
animation-fill-mode: forwards;
transform-origin: left
}
.layer-hidden {
animation-duration: 0.5s;
animation-name: fadeOut;
animation-fill-mode: forwards;
transform-origin: left
}
.hidden_boolean_on {
fill: #69946f !important;
}
.hidden_boolean_off {
fill: #d5643f !important;
}
It uses the background color of the frontend theme selected.
Thanks, that did it. I didn’t know to put it in the svg section as I’ve never really used CSS before 
I was talking to pkozul last night on discord and he came up with this
#floorplan {
background: #000 !important;
}
added to floorplan.css will also work
While that will work it will not change with your frontend theme.
I have the same code as yours in my floorplan.css but it won’t change colours with the front end theme, any ideas?
you have exactly these lines?
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
Yep
/* SVG shapes */
svg, svg * {
/*vector-effect: non-scaling-stroke !important;*/
pointer-events: all !important;
background-color: var(--primary-background-color);
}What browser? I cannot duplicate or issue.
I’ve tried Chrome and Edge on my laptop, and the browser on my phone but the floorplan stays as default on all of them regardless of the theme selected.
Only thing i can suggest is trying to empty the cache and do a hard reload of the page. In Chrome do this by doing CTRL+SHIFT+I then right click the reload button and hit “Empty Cache and Hard Reload” see if that helps at all. Also make sure floorplan.css you are editing is in the correct directory.