Skip to main content
Announcements
[WEBINAR] Accenture & Qlik: Accelerating BI Migration to SaaS with Qlik on Dec 13th: REGISTER
cancel
Showing results for 
Search instead for 
Did you mean: 
Kellerassel
Contributor III
Contributor III

Custom Theme with json and css is being ignored.

I try to create my own custom theme and I am an absolute beginner in this topic.  

My problem is that only some configurations are implemented, and most are ignored. 

This is my json (theme.json): 

 

{
    "_inherit": true,
    "_variables": {
        "@Orange": "#F98128",
        "@Blue": "#1b2953",
        "@White": "#ffffff"
    },
    "color": "@White",           /* ignored */
    "fontSize": "12px",
    "backgroundColor": "@Blue",  /* works */
    "object": {
        "title": {
            "main": {
                "fontSize": "20px"
            }
        },
        "label": {
            "name": {
                "color": "@White". /* ignored */
            },
            "value": {
                "color": "@White"  /* ignored */
            }

        }
    },
    "dataColors": {
        "primaryColor": "@Orange". /* ignored - data at least isn't orange */
    }
}

 

 This is my CSS (theme.css; note that all of them work in the Styles field of a Multi KPI object. 

 

.qv-panel-sheet {
    background: #1b2953;  /* ignored */
}

.qv-object * {
    color: #ffffff;  /* only applied to axes of charts */
}

.qv-listbox {
    background-color: #1b2953;  /* works */
}

.lui-button.lui-active {
    background-color: #F98128; /* ignored */
}



 

 

I am a little overwhelmed right now. My App has now blue background, white axes, but the rest is inherited (see attached image)

Why does my CSS work in injected CSS but not in a theme.css file?

Why are most configurations from the JSON ignored?
(For some reason backgroundColor was ignored, too, before I specified label in the JSON). 

Why does it seem so erratic? 

Any help would be greatly appreciated. 🙂 

Labels (1)
2 Replies
ester_pr
Partner - Contributor II
Partner - Contributor II

You need to put in the code:

"_inherit": false

 

I'm now trying to deal with it because right now my background color when selection is being made, do not match

vighneshg
Contributor II
Contributor II

You need  referenced your CSS file in json file like this: 

 "customStyles":[
{
"cssRef":"theme.css",
"classRef":"sense-theme"
}
]

Add above code after dataColors Object. Not sure why variables are not working in your case I guess try with direct hex values instead of varibles.

Regards,
Vighnesh Gawad