Jump to content
Sign in to follow this  

New Themes ?

Recommended Posts

I see how you can change the Theme Background and border for an individual control

W3Panel1.ThemeBackground:= bsToolButtonBackground;

 W3Panel1.ThemeBorder:= btToolButtonBorder;


Is there a way to change the theme for all the controls on form or better yet, for the entire project?

How does this differ from Theme in the project options? Isnt that the CSS sheet (default, Android, ios)?

Share this post

Link to post
Share on other sites


Im working on the documentation, but in general: no, there is no way to set a border for everything. You will have to write your own skin for that - or do a recursive function that clears the theming from a control, and then apply your style instead.

You can call the thethod "ThemeReset()" to completely remove any theming from a control. If you also set StyleClass := "" then you essentially have a clean, non styled element. Perhaps that will be easier to style if you want something unique.

What I would do is the following:

  • Start with the Default skin (ubuntu) file and check the "Use custom css" to get a copy into your project
  • Change the theme element to use whatever palette you want
  • Add your border somewhere (you can also just load in a second stylesheet if you like)

With this done I would simply inherit out the controls for my project and use those instead. Override StyleTagObject() in each and set the theme-border to "none" then add your custom borderstyle via TagStyle.AddStyleToControl(Handle, nameofstyle).

This may sound like much, but we are talking one procedure per control. You may use a 100 buttons in your program, but you only have to define it once. Writing a new themefile and adapting to the regime sounds easier to be honest.


A theme is made up of smaller parts. When you think of it, a theme engine is just a clever system that keeps track of these parts and makes them available to you.

So in our theme scheme we have the following parts:

  • 14 different borders
  • 10 different background types
  • 4 different font sizes

Each of these parts is made to be used by one of our 3 control-types. When making the theme I found that we essentially have 3 types of controls, and this seem to be how others organize their systems as well. Both Apple,  Android and Linux visually operate with 3 types of controls:

  • Normal controls (button, editbox, checkbox etc)
  • Toolbar controls (toolbutton, seperator and whatever we add in the future)
  • Dialog controls (dialog button and controls styled to catch the users attention).

Why should I use this stuff?

The idea behind the theming are many, but the jist of it always bakes down to:

  • Make your application look good
  • Concurrency in style
  • Ease of use, making it possible to create new controls that adapt to whatever theme is set

The concurrency part is probably the most important to get here. All the theme elements (border, background and font) is made to match its counterpart. For example, DecorativeBorder and DecorativeBackground will always compliment eachother regardless of what skin you use. Same with ButtonBorder and ButtonBackground. 

The important part here is that each theme-file (css file) defines the same names, but they naturally look different from theme to theme. But if you stick to the regime and try to use the pre-defined borders etc. as much as possible in your own stuff - then your customcontrols will survive between skins. So you can change between Apple, Android and Linux without problems (and more in the future).

While iOS seem to be utterly flat and soul-less these days, most UI styles need different borders and small changes to create a living, vibrant look and feel. The reason I prefer the older android theme is because it has a more solid feel than the latest, which is a poor mans copy of iOS. When we made the Apple skin we essentially had to delete most of the stuff in there, because iOS is just flat as a pancake. Button-borders and list-borders are not visible etc. etc.
Clearly Apple dont care about older users who might not see too good (1/3 of their userbase) or people with color-blindness (which is 1 out of 10 in the world),

When making an app its important to take that into account. Most users would rather use an application that has clear distinction between UI elements, than a UI that demands you to concentrate to navigate visually. But we had to ship themefiles that follows what is modern and good, so we did that.

When I have more time I will make more themes. Both the Amiga OS 4.x theme (which is really good), Windows 10 and a couple of Debian based skins is what I personally would like.



Share this post

Link to post
Share on other sites

If you want to handle everything yourself, then you can shortcircuit the system with:


TMyButton = class(TW3Button)
  procedure StyleTagObject; override;

And then just reset the whole theme:

procedure TMyButton.StyleTagObject;

This will kill theming on that control. But it will still try to match with a CSS style with the same name (TMybutton). Here you can just load in a stylesheet you control instead:

// This code goes well in your TApplication.ApplicationStarting()
// In new projects there is a "unit1.pas" file that contains your unique application object

uses SmartCL.FileUtils;

  procedure (const FromUrl: string; const ObjectHandle: THandle; const Success: boolean)
    if Success then
     writeln("My css is now loaded!");

Once loaded the control's name will match up with the .TMyButton {} style you have defined there, and voila - you have the best of both worlds.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this