PDA

View Full Version : Best way to integrate two different styles inside a single theme?



stefan.lotties
19 May 2014, 1:55 AM
Hi,

we have an own, flat and dark, theme for our application. We want to implement a so-called specific area having an (almost) inverted color style.

Spontanously I'd create a new theme based on the current one and change all the colors. Since it's in the same application I would set a different $prefix and, of course, a different $theme-name. But this would result in a second complete theme and therefore a second CSS file with about 240 KB. And the client would have to load both.

And alternative is to use CSS directly and override all the CSS definitions that use colors (for the corresponding $prefix). This would mean a lot of more work for me, but result in a very small CSS file for the light area.

A third way is the ui flag. I think this might be exactly what I search. But I don't get how this would be different from the first plan.

Are there any best practice experiences on this topic?

Thanks and regards,
Stefan

jsakalos
19 May 2014, 2:04 AM
UI is best IMO, it should be lightweight and it does only adds css for a couple of components. BTW 240KB is nothing on desktops, especially if it is cached. For UI, see this video:



https://www.youtube.com/watch?v=sqEkFQ2W0aM

stefan.lotties
19 May 2014, 3:03 AM
Thanks for the video.

I just dig deeper into the UI property. One thing I've noticed is that not all components provide mixins for specific UIs, e.g. the datepicker. A second thing is the inheritance of the UI property in the component hierarchy. I just added this in the theme viewer example on the root component:


defaults: {
ui: 'light'
}

and some components such as the form fields don't receive any information about the UI.

Both problems can easily be solved since this is just CSS. But this means I would have a mixed approach of UI property and a UI CSS class on the root component that I use to apply specific colors on sub-components.

I guess I'll try both approaches and see what brings me (hopefully) less work on ExtJS updates.

jsakalos
19 May 2014, 3:17 AM
Yeah, unfortunately, only a couple of components uses UI.

stefan.lotties
19 May 2014, 3:20 AM
Yeah, no problem. I just hoped to have overseen something. Now I'll hope that it becomes better on the next update :)