Theming wxWidgets components

[JarkkoL]

Hi,

I'm trying to theme-up my application by adjusting colors of various parts of wxWidgets components. For many parts I have found a way to tweak the colors, but there are still few components I haven't yet found a way to do it. Below is a screenshot pointing the components I would like to tweak and I'm hoping someone could tell me how I could possibly change the colors for these parts.

Edit: seems the below image is being cropped from right, so you can right-click and download it to view the full size version /:

Thanks, Jarkko

[doublemax]

wxWidget's strength is that it uses native controls wherever possible, so it's not really a good platform for a skinnable interface.

1) Maybe possible by changing wxPropertyGrid source

2) Check the "statbar" sample, it shows how to put custom content into the statbar. It should be possible with this, but you'll have to manage the content yourself

3) Not possible with wxWidgets methods. AFAIK with native MSW functions it's only possible to change the colors system-wide. If anyone knows otherwise, I'd be interested to know, too.

4) Create a custom slider control, compared to the scale of your application, it should be an easy task

5) MIght be possible by creating a custom wxArtProvider / wxTabArtProvider and/or by changing wxAUI sources

6) Do the bitmaps have transparent background? It should be possible to create the bitmaps with the correct background color already

7) Not sure about this, might be an underlying system setting. Did you try wxWindow::SetForegroundColour()?

[PB]

3) Not possible with wxWidgets methods. AFAIK with native MSW functions it's only possible to change the colors system-wide. If anyone knows otherwise, I'd be interested to know, too.

In the very unlikely case you already didn't know this, AFAIK the window scrollbars can be colored only if you're using flat scrollbars (child scrollbars can be colored, intercepting WM_CTLCOLORSCROLLBAR). I never used flat scrollbars but MSDN also says "Comctl32.dll versions 6.00 and higher do not support flat scroll bars." So, the answer is no.

[JarkkoL]

Thanks for the quick reply! I'll have a look at those suggested solutions.

I have also thought of checking some alternative GUI libs, which might be better suited for this kind of app and have better level of customization. I would actually prefer non-native GUI controls for this app because the interface should be consistent across platforms and shouldn't be affected by the OS theme system. Do you have any suggestions?

Thanks, Jarkko

[doublemax]

I would actually prefer non-native GUI controls for this app because the interface should be consistent across platforms and shouldn't be affected by the OS theme system. Do you have any suggestions?

For projects of a certain size and complexity, QT is probably the only alternative.

On the wxWidgets side, theoretically it could be done with the wxUniversal port, but as it's not so well maintained, you'd probably have to put quite some work into that.

[gadams]

I was about to start a similar thread. I'm fine with native controls but want to enforce a dark grey color scheme similar to yours, Qts, and most modern content centric applications.

What are you doing to get as far as you've gotten?

Are you using sub-classed controls factory methods for each widget, modifying wx source directly? I can't imagine manually setting the color for every attribute of each control.

How far can you get with art providers?

Any help and details would be appreciated.

[PB]

As written above, unlike (AFAIK) Qt, wxWidgets don't draw the controls by themselves but (in non-Universal build) the wxWidgets controls usually rely on the the underlying native ones, what you can do is limited by what they support. So at least in some controls, no tampering with wxWidgets source is going to help you, see e.g. the scrollbar example.

[JarkkoL]

What are you doing to get as far as you've gotten?

I set the colors to controls directly and setup wxAui frame manager art providers according to my theme. This wasn't much work in my case, and it helps to wrap widget creation & provider setup to reusable functions (which in addition to the widget creation also setup its properties according to your theme). I define the theme in XML and parse it to a theme struct, which is accessed by all GUI code. The XML file looks currently like this:

Code: Select all

<general>
  <grid color="64 64 96 255" />
</general>

<icons>
  <small color="200 200 200" toolbar_size="20 20" folder_size="16 16" />
  <large color="210 210 210" toolbar_size="32 32" folder_size="32 32" />
  <disabled color="192 192 192" use_stippling="1" />
</icons>

<main_frame>
  <background color="32 32 32" />
  <gripper size="8" color="48 48 48" />
  <pane_border size="0" />
  <sash size="3" color="64 64 64" />
  <border color="32 32 32" />
  <active_caption text_color="240 240 240" bg_begin_color="90 90 90" bg_end_color="120 120 120" />
  <inactive_caption text_color="140 140 140" bg_begin_color="60 60 60" bg_end_color="50 50 50" />
  <top_toolbar color="64 64 64" text_color="200 200 200" large_icons="1" enable_text="1" />
  <bottom_toolbar color="64 64 64" text_color="200 200 200" />
  <viewport title_text_color="128 128 128" title_bg_color="0 0 0" selected_border_color="220 180 90" />
</main_frame>

<property_sheet>
  <property_text color="216 216 216" read_only_color="16 16 16" />
  <grid_lines color="32 32 32" />
  <background property_color="64 64 64" group_property_color="80 64 64" left_margin_color="32 32 32" bottom_color="32 32 32" />
</property_sheet>

<asset_manager>
  <gripper size="8" color="64 64 64" />
  <pane_border size="0" />
  <sash size="2" color="64 64 64" />
  <border color="16 16 16" />
  <active_caption text_color="240 240 240" bg_begin_color="90 90 90" bg_end_color="120 120 120" />
  <inactive_caption text_color="140 140 140" bg_begin_color="60 60 60" bg_end_color="50 50 50" />
  <toolbar color="64 64 64" text_color="200 200 200" bg_color="32 32 32" />
  <folder_browser bg_color="32 32 32" asset_text_color="216 216 216" type_text_color="216 216 216" />
  <asset_layout bg_color="2 2 2" />
  <asset_window bg_color="16 16 16" text_color="160 160 160" text_pos="2 5" />
  <asset_border color="12 12 12" selected_color="255 128 0" thickness="3" corner_radius="10" />
</asset_manager>

<editor_frame>
  <background color="32 32 32" />
  <gripper size="8" color="64 64 64" />
  <pane_border size="0" />
  <sash size="2" color="64 64 64" />
  <border color="16 16 16" />
  <active_caption text_color="240 240 240" bg_begin_color="90 90 90" bg_end_color="120 120 120" />
  <inactive_caption text_color="140 140 140" bg_begin_color="60 60 60" bg_end_color="50 50 50" />
  <toolbar color="64 64 64" text_color="200 200 200" large_icons="1" enable_text="1" />
</editor_frame>