"Dashboard-level theme + CSS template causes infinite load in Superset 6.0"

[me814]

What I tried: theme JSON + CSS template at dashboard level

What I expected: dashboard loads with custom theme + CSS applied

What actually happened: infinite loading + console errors

superset-logo-horiz.png:1 Failed to load resource: the server responded with a status of 404 (NOT FOUND) vendors.077cc2e3066bd62c36ac.entry.js:2 ReactAce: editor option enableLiveAutocompletion was activated but not found. Did you need to import a related tool or did you possibly mispell the option? (anonymous) @ vendors.077cc2e3066bd62c36ac.entry.js:2 :8088/api/v1/theme/14:1 Failed to load resource: the server responded with a status of 404 (NOT FOUND) 8289.ce3ad7f4f0910d347c51.entry.js:27 Failed to create dashboard theme provider: Error: HTTP 404: NOT FOUND at u.createDashboardThemeProvider (8289.ce3ad7f4f0910d347c51.entry.js:27:9333) at async 85c7c935e14d9a1bd295.chunk.js:1:7591

[dosubot[bot]]

Hi @me814! I'm Dosu and I’m helping the superset team.

The infinite loading and 404 errors you’re seeing are likely caused by the dashboard’s json_metadata referencing a theme by ID (like /api/v1/theme/14) that doesn’t exist, or by malformed theme JSON. Superset expects dashboard-level themes to be stored as raw, valid Ant Design theme JSON directly in the json_metadata field, and custom CSS as raw CSS in the css field—without referencing external theme resources or IDs. There’s no backend validation for these fields, so any incorrect references or invalid JSON can break the dashboard load and trigger frontend errors like you described (source).

Recent updates have improved theme loading logic to prevent infinite loading when a theme isn’t found (source), so if possible, update to a version that includes this fix.

To resolve the issue:

• Make sure your dashboard’s json_metadata contains valid theme JSON, not a theme ID or reference.
• Confirm your CSS is valid and doesn’t rely on unavailable templates.
• Remove any references to missing resources or theme IDs in json_metadata.

For best practices and examples, check out the official guides on customizing Superset dashboards with CSS and theming Superset.

If you still see errors after these checks, share your json_metadata and CSS content for a more targeted review.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[me814]

Hi @dosu
.ant-tabs-nav-list {
display: flex;
justify-content: flex-start; /* instead of center */
align-items: center;
margin: 0;
width: auto;
}

.ant-tabs-tab.ant-tabs-tab-active {
background-color: #66ccff !important; /* color of active tab /
font-weight: bold !important;
font-color: #3E484D !important;
/ reset other borders /
border: none !important;
/ apply only top border and its rounding /
border-top: 0px solid #66ccff !important; / adjust thickness as needed /
border-left: 16px solid #66ccff !important;
border-right: 16px solid #66ccff !important;
border-top-left-radius: 16px !important;
border-top-right-radius: 16px !important;
/ ensure bottom corners are square / not rounded */
border-bottom-left-radius: 0px !important;
border-bottom-right-radius: 0px !important;
}

/* Dashboard Background /
.dashboard {
background-color: #F4F2F4 !important; / Soft White background */
padding-left: 24px !important;
padding-top: 12px;
padding-bottom: 12px;
}

/* Filters / Inputs /
input, select, .ant-select-selector {
border-radius: 1px !important;
border-color: #B3B8C7 !important; / Fresh Mint border */
background-color: #FFFFFF !important;
padding: 4px 8px !important;
}

/* Chart Container /
.dashboard-component-chart-holder {
border: 2px !important; / Neutral Grey border /
border-radius: 16px !important;
padding: 8px !important;
background-color: #FFFFFF !important; / White chart card */
box-shadow: 0px 2px 6px rgba(0,0,0,0.05) !important;
}

/* Tabs content area /
.dashboard-component-tabs-content {
background-color: #F4F2F4 !important; / White background for tab content */
padding-left: 0px;
padding-right: 0px;
padding-top: 12px;
padding-bottom: 10px;
}

/* Table Header Styling /
.table thead th {
#background-color: #D9D9D9 !important; / Mint Green header /
color: #1A1B1D !important; / Deep Purple text */
font-weight: bold !important;
}

.dashboard-component .header-title {
font-family: 'Open Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 100% !important;
letter-spacing: 1.5% !important;
color: #3E484D !important;
padding-left: 8px !important;
padding-right: 16px !important;
padding-top: 8px !important;
padding-bottom: 2px !important;
}
/* chart subline */

/* KPI value styling */
.dashboard-chart .header-line {
font-family: 'Open Sans', sans-serif !important;
font-style: Bold !important;
font-weight: 700 !important;
font-size: 40px !important;
line-height: 100% !important;
letter-spacing: 0 !important;
vertical-align: middle !important;
text-align: center;
margin-top: 4px;
margin-bottom: 4px;
color: #1A1B1D !important;
padding-left: 8px !important;
padding-right: 16px !important;

}

.dashboard-component .subheader-line {
font-family: 'Open Sans', sans-serif !important;
font-style: Regular !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 100% !important;
letter-spacing: 0% !important;
color: #3E484D !important;
padding-left: 8px !important;
padding-right: 16px !important;
padding-top: 6px !important; /* ✅ Top spacing */
padding-bottom: 8px !important;
}

this is my css template which I am applying on my dashboard
and below is my theme
{
"token": {
"sizeStep": 4,
"colorPrimary": "#38a832",
"colorInfo": "#3c75c6",
"colorBgBase": "#f5f5f5",
"colorText": "#1f2a44",
"borderRadius": 8,
"chartColors": ["#38a832", "#3c75c6", "#ff7f0e", "#d62728", "#9467bd"],
"typography": {"fontFamily": "Open Sans, sans-serif"}
}
}
say me what is wrong with this code

[dosubot[bot]]

There are a couple of issues in your CSS and theme JSON:

• In your CSS, font-color is not a valid property—use color instead. Also, in .table thead th, #background-color is commented out with #, which is not valid CSS syntax (use /* ... */ for comments).
• Your theme JSON mostly matches the expected structure, but chartColors is not a standard Ant Design token and isn't listed among the allowed tokens in Superset's theme system. It may be ignored, but it shouldn't cause infinite loading by itself if the rest of the JSON is valid. All other keys (like colorPrimary, colorInfo, colorBgBase, colorText, borderRadius, sizeStep, typography) are valid tokens and should work as expected. reference

CSS syntax issues or unsupported properties can prevent styles from applying, but they typically don't cause infinite loading. Infinite loading is more likely if your dashboard's json_metadata references a theme by ID or contains malformed JSON. Make sure your json_metadata contains only raw, valid theme JSON and not a reference to a theme resource or ID.

For more on why custom CSS might not take effect, see this discussion.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}