Change css panel body theme at runtime?

[dabeda]

Hello!

Is it possible to change the CSS Panels body theme at runtime with css?
We have created two themes, a light theme and a dark theme, so our users can switch between those two.
This is done by removing our custom_light.css and loading the custom_dark.css
For Windowformats we use a CSS Panel with the body theme C - Gray, but for the dark theme A - Black would be best.
Is there any way to use css to switch to A - Black?

Thanks

Peter

[Scott Klement]

You can't switch the theme with CSS. But, you could switch it with Javascript, or you could change what a given theme looks like with CSS

[dabeda]

Hello Scott,

thanks for your reply.
But how do I change the C - Gray theme with css?
Am not a pro when it comes to css yet.

[Scott Klement]

Create a new CSS file for your new theme. This file should be used to override the the defaults.

If you want to apply this only some of the time (is what it sounds like from your post) then you'll probably want to put it in the IFS in our own area, such as /www/INSTANCE-NAME/htdocs/profoundui/userdata/css. You can load it with the pui.loadCSS API that is documented hjere:
http://www.profoundlogic.com/docs/pages ... d=11206693

You can load that from any JavaScript code... a good way might be to write an event that runs on every screen (such as pui.onload) and put some conditional logic in there... if the user has selected the light theme, keep the default, otherwise load the dark css, etc.

To change the theme... well, it depends on what you want to change. Take a look at the profoundui.css file (but please do not modify it) in the IFS under /www/INSTANCE-NAME/htdocs/profoundui/proddata/css and you'll see what we have set for both theme A and theme C. Search the file for "Swatches", and you'll see the settings for "A" (they all end in -a, like ui-bar-a, ui-body-a, etc) scroll down and you'll see the same settings for the other themes, B, C, etc. Copy the ones you want to change to your new CSS file and modify them there.

When your CSS file is loaded, it's settings will override those in profoundui.css

Also, I STRONGLY suggest that you become familiar with your browser's built-in developer tools, they will help you see how the styles are loaded, how they apply to the elements, etc. This is invaluable for debugging.

[dabeda]

Thank you very much Scott!

That's what I've been looking for.