Four Js Development Tools Forum

I am trying to create a night-time theme for our application.  The one thing we are having trouble with is trying to style the buttons and the folder tabs (see attached).  Does anyone know how to style these elements?  Or is it even possible?

Hi Huy,

Unfortunately, for some items, it's not possible to override the default system style (it may also depend on the OS). For example, on Windows 10, if you specify a background color for Pages of a Folder....

<Style name="Page">
     <StyleAttribute name="backgroundColor" value="yellow" />
 </Style>
 

....the color will be applied inside the Page but not on the header (because the Qt library we're using doesn't allow it). It's the same for buttons : if you apply a background-color, you'll only see a small border of the color you applied around the button. The same case can be also observed for Topmenus, Toolbars or for Group titles....unfortunately we cannot make all elements fully customizable if we want to stay in concordance with the system style.

Best Regards,
Lionel

Hi Huy, normally if you switch your desktop to a "night theme" (high contrast) GDC will follow that theme and buttons. foldertabs should follow too.
Did you try that ?
Regards, Leo

Leo's advice will work best if you don't have any generic or RGB colour definitions in your .4st.  To be theme proof you should restrict yourself to System Colour Names http://4js.com/online_documentation/fjs-fgl-manual-html/#c_fgl_presentation_styles_015.html.  (too often in my travels I see generic or RGB colour definitions in .4st's, when system colours will make your .4st more robust in different themes/front-ends)

I'll throw two more suggestions at you.  For BUTTONS, use IMAGE with ACTION attributes as introduced in 3.00, then your "BUTTON" can look like anything you want.  You can use two different images to represent the button being pressed/unpressed. 

The second I'm not sure I should mention as it was an experimental feature in 2.20 that I don't think went far, and I'm not sure if the code is still in the more recent GDC's, and if it is I would not guarantee it staying,  but have a look at http://4js.com/online_documentation/fjs-gdc-manual-html/#c_gdc_NewFeatures220_experimental_features_look_and_feel.html.

Reuben