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. 🙂
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
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.