topic Re: Custom Theme with json and css is being ignored. in Integration, Extension & APIs

Custom Theme with json and css is being ignored.

Kellerassel — Wed, 16 Feb 2022 07:25:39 GMT

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

Re: Custom Theme with json and css is being ignored.

ester_pr — Tue, 05 Jul 2022 07:24:49 GMT

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

Re: Custom Theme with json and css is being ignored.

vighneshg — Wed, 03 Aug 2022 12:03:04 GMT

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.

Re: Custom Theme with json and css is being ignored.

firoz24 — Thu, 14 Dec 2023 04:08:33 GMT

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.