Setup / Style .nuBreadcrumbHolder

[ricklincs]

Hi All. I have added the following CSS to the Setup and Style:

.nuBreadcrumbHolder {
background-color: var(--header-bg);
border-bottom: thin solid var(--muted);
}

I have a home form for users with an html object (Users Menu/Dashboard) that the user can select a style theme.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ ... ll.min.css">

<style>
:root {
--card-bg-1: #3b82f6;
--card-bg-2: #2563eb;
--card-bg-3: #1d4ed8;
--text: #ffffff;
--muted: #b6c6ff;
--body-bg: linear-gradient(180deg,#041447,#223261);
--sidebar-bg: rgba(255,255,255,0.08);
--header-bg: #223261;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
background: var(--body-bg);
color: var(--text);
}

/* HEADER */
.header {
background: var(--header-bg);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
min-height: 50px; /* taller */
box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* drop shadow */
margin-bottom: 12px; /* push content down */
}
.title { font-weight: 700; font-size: 20px; color: #fff; }
.subtitle { font-size: 12px; color: var(--muted); }
.theme-select {
padding: 6px 12px;
border-radius: 8px;
border: none;
cursor: pointer;
background: rgba(255,255,255,0.1);
color: #fff;
}

/* MAIN LAYOUT */
.layout-wrapper {
width: 100%;
display: flex;
min-height: calc(100vh - 180px);
}
.center {
flex: 1;
padding: 18px;
}

/* SIDEBARS */
.sidebar {
width: 220px;
padding: 12px;
overflow-y: auto;
background: var(--sidebar-bg);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(2,6,23,0.08);
}
.sidebar.left { margin-right: 16px; }
.sidebar.right { margin-left: 16px; }
.buttonbar.vertical { display: flex; flex-direction: column; gap: 10px; }
.buttonbar.vertical button {
display: flex; align-items: center; gap: 10px;
padding: 16px 14px; border-radius: 10px; border: none;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
color: white; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
text-align: left;
}
.buttonbar.vertical button i { width: 18px; text-align: center; }

/* GRID & CARDS */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 16px;
}
@media (max-width: 1300px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 920px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.card {
border-radius: 12px;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
box-shadow: 0 6px 18px rgba(2,6,23,0.12);
padding: 12px;
cursor: pointer;
color: var(--text);
transition: transform .18s ease, box-shadow .18s ease;
min-height: 100px;
display: flex; align-items: center;
}
.card1 {
border-radius: 12px;
background: linear-gradient(145deg,var(--card-bg-1),var(--card-bg-2) 50%,var(--card-bg-3));
box-shadow: 0 6px 18px rgba(2,6,23,0.12);
padding: 12px;
cursor: pointer;
color: var(--text);
transition: transform .18s ease, box-shadow .18s ease;
min-height: 140px;
display: flex; align-items: center;
}


.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.card1:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,0.2); }
.meta { display: flex; align-items: center; gap: 12px; }
.iconwrap {
background: rgba(255,255,255,0.14);
padding: 8px;
border-radius: 10px;
display: grid;
place-items: center;
color: white;
}
.label { font-size: 13px; }
.value { font-weight: 700; font-size: 20px; margin-top: 4px; }

/* FOOTER */
.footer { text-align: center; color: #ccc; margin: 2px; font-size: 13px; }

/* Smaller screens: hide sidebars */
@media (max-width: 900px) {
.sidebar { display: none; }
.layout-wrapper { flex-direction: column; }
}
</style>


<select class="theme-select" onchange="switchTheme(this.value)">
<option value="darkblue">Dark Blue</option>
<option value="blue">Light Blue</option>
<option value="blackwhite">Black & White</option>
<option value="gold">Gold</option>
<option value="green">Green</option>
<option value="sun">Sun</option>
<option value="red">Red</option>
</select>

<script>
const allThemes = {
blue: {
'--card-bg-1': '#3b82f6',
'--card-bg-2': '#2563eb',
'--card-bg-3': '#1d4ed8',
'--text': '#ffffff',
'--muted': '#94a3b8',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(59,130,246,0.1)',
'--header-bg': '#1d4ed8'
},
darkblue: {
'--card-bg-1': '#1e40af',
'--card-bg-2': '#1d4ed8',
'--card-bg-3': '#2563eb',
'--text': '#ffffff',
'--muted': '#64748b',
'--body-bg': 'linear-gradient(180deg,#041447,#223261)',
'--sidebar-bg': 'rgba(2,6,23,0.15)',
'--header-bg': '#223261'
},
gold: {
'--card-bg-1': '#facc15',
'--card-bg-2': '#eab308',
'--card-bg-3': '#b45309',
'--text': '#04121a',
'--muted': '#7c5c00',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(250,204,21,0.1)',
'--header-bg': '#eab308'
},
green: {
'--card-bg-1': '#34d399',
'--card-bg-2': '#059669',
'--card-bg-3': '#065f46',
'--text': '#052014',
'--muted': '#6ee7b7',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(52,211,153,0.1)',
'--header-bg': '#059669'
},
red: {
'--card-bg-1': '#ef4444',
'--card-bg-2': '#dc2626',
'--card-bg-3': '#991b1b',
'--text': '#fffafa',
'--muted': '#fca5a5',
'--body-bg': '#ffffff',
'--sidebar-bg': 'rgba(239,68,68,0.1)',
'--header-bg': '#dc2626'
},
sun: {
'--card-bg-1': '#b45309',
'--card-bg-2': '#b45309',
'--card-bg-3': '#b45309',
'--text': '#080808',
'--muted': '#94a3b8',
'--body-bg': '#fef3c7',
'--sidebar-bg': '#fef3c7',
'--header-bg': '#fef3c7'
},
blackwhite: {
'--card-bg-1': '#444',
'--card-bg-2': '#222',
'--card-bg-3': '#000',
'--text': '#ffffff',
'--muted': '#aaaaaa',
'--body-bg': '#ffffff',
'--sidebar-bg': '#f0f0f0',
'--header-bg': '#000'
}
};

function switchTheme(name){
const theme = allThemes[name] || allThemes.darkblue;
for(const k in theme){
document.documentElement.style.setProperty(k, theme[k]);
}
}

// Default theme
switchTheme('darkblue');

// Show today's date
document.getElementById('today').textContent =
new Date().toLocaleDateString(undefined, {weekday:'long', month:'short', day:'numeric', year:'numeric'});
</script>

This all works great, All forms open and .nuBreadcrumbHolder matches the theme the user has chosen or the Default Dark Blue Theme.
However when I open a form as a popup .nuBreadcrumbHolder doesn't match. This there a way to make popup Forms also match the chosen theme?
Thanks in advance.