Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content
Announcements
Qlik Connect 2025! Where innovative solutions turn your data visions into reality: REGISTER TODAY
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)
3 Replies
ester_pr
Partner - Creator
Partner - Creator

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
firoz24
Creator
Creator

Hi Kellerassel,

I am new to coding just like you I want to know which tool you are using to code & how do you preview a file without importing it to qmc and Is only json, css and qext file enough to code or create a theme ?

When I create the css file and json file with notepad and saved it than I imported the zip file via qmc but only name reflects but the script not works I mean I gave background color to blue & text color everything but it does not worked It was same like before.

Please guide me where I am doing the mistake ?

Thank you.