Design examples for themed GUI systems?

Question

Can you suggest/reffer to any general design examples for implementing run-time changable themes in a GUI system? This seems to be quite a challenge. However, many GUI systems out there present this kind of functionallity, so there must be general design ideas that could be followed.

• Just to be 100% clear, design stands for programatic design, not graphical design :)

Answer 1

What would need to do is create an abstraction of all your drawing operations, and parametrize the look. As you said this is quite a challenge as there are a lot of drawing operations in every gui that have semantics and depending how context specific you want to be and should therefore be parametrized. This can turn into quite a list (e.g. do you want to be able to style the way your combo-box draws its arrow, or how the bar of a scrollbar is drawn). If you are looking for examples QT supports styling the UI via CSS stylesheets and programmatically by creating a new paint class.

CSS is probably also a good example of what a basic set of styleable properties needs to look like.

But here is a very simple example in pseudo code

class Window
{
  Style borderStyle;
  ScreenRectangle rect;

  paint(StyledPainter painter)
  {
    painter.drawBorder(borderStyle,rect);
    ... 
  }
}

class Style
{
  float lineWidth;
  RGB color;
}

class StylePainter
{
  DrawContext context;

  drawBorder(Style borderStyle, ScreenRectangle rect)
  {
    context.setLineWidth(style.linewidth);
    context.setColor(style.color);
    context.drawRect(rect);
  }
}