New Theme Engine

From SkyOS

Jump to: navigation, search

Contents

Themeing

By using the Style theme (available since Build 6798) you can heavily customize the appearance by modifing a theme configuration file using the DataCollectionEditor.

Status

All properties listed here are already implemented and can be modified using the DataCollectionEditor.

Testing

By default, every application starts with the WindUI theme applied. You can use a different theme for an application by specifing the --theme command line parameter. For instance, if you have modified the style theme and want to test it with skypad, open a terminal and simply type: skypad --theme style

Frame Window

Key Additional States Details
FrameWindow.Border.Left.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
FrameWindow.Border.Left.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
FrameWindow.Border.Left.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
FrameWindow.Border.Left.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
FrameWindow.Border.Left.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
FrameWindow.Border.Left.ContentSize Specifies the width of pixels the border should be painted to with this brush. The not affected region will be drawn with the general FrameWindow brush
FrameWindow.Border.Left.Width Specifies the width of the border
FrameWindow.Border.Left.Transparent If set, the frame will be drawn using alpha blit. (This means that the frame can be made transparent or have partial transparency as alpha values)
FrameWindow.Border.Right.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
FrameWindow.Border.Right.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
FrameWindow.Border.Right.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
FrameWindow.Border.Right.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
FrameWindow.Border.Right.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
FrameWindow.Border.Right.ContentSize Specifies the width of pixels the border should be painted to with this brush. The not affected region will be drawn with the general FrameWindow brush
FrameWindow.Border.Right.Width Specifies the width of the border
FrameWindow.Border.Right.Transparent If set, the frame will be drawn using alpha blit. (This means that the frame can be made transparent or have partial transparency as alpha values)
FrameWindow.Border.Bottom.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
FrameWindow.Border.Bottom.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
FrameWindow.Border.Bottom.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
FrameWindow.Border.Bottom.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
FrameWindow.Border.Bottom.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
FrameWindow.Border.Bottom.ContentSize Specifies the width of pixels the border should be painted to with this brush. The not affected region will be drawn with the general FrameWindow brush
FrameWindow.Border.Bottom.Width Specifies the width of the border
FrameWindow.Border.Bottom.Transparent If set, the frame will be drawn using alpha blit. (This means that the frame can be made transparent or have partial transparency as alpha values)
FrameWindow.Background.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
FrameWindow.Background.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
FrameWindow.Background.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
FrameWindow.Background.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
FrameWindow.Background.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
FrameWindow.Background.InnerFrame.Margin Not used yet
FrameWindow.Background.InnerFrame.SolidColor Color of the inner frame (which seperates the view from the border, titlebar, menu and statusbar)

TitleBar

Key Additional States Details
TitleBar.Background.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
TitleBar.Background.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
TitleBar.Background.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
TitleBar.Background.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
TitleBar.Background.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
TitleBar.Height Specifies the height of the titlebar
TitleBar.Transparent If set, the titlebar will be drawn using alpha blit. (This means that the titlebar can be made transparent or have transprency as alpha values)
TitleBar.Caption.Background.Brush.Type inactive Specifies the background type to use. Either 'Solid' or 'Image'
TitleBar.Caption.Background.Brush.SolidColor inactive Specifies the color to use for the background if the background type is set to 'Solid'
TitleBar.Caption.Background.Brush.Image inactive Specifies the path to the image to use for the background if the background type is set to 'Image'
TitleBar.Caption.Background.Brush.SizingType inactive 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
TitleBar.Caption.Background.Brush.SizingMargins inactive Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.
TitleBar.Caption.TextColor inactive TextColor to use the the windows title
TitleBar.Caption.AdditionalSize inactive Additonal size to add to width of windows title when drawing the surrounding border
TitleBar.Caption.Height inactive Height of the title
TitleBar.Caption.Font.File inactive Font file to use for the title
TitleBar.Caption.Font.Size inactive Font size to use for the title
TitleBar.Icons.Width Width for each icon (including an optional gap, can be larger than actual icon)
TitleBar.Icons.Margin Margin to offset icon from the border Specifies Image File with various icons in it, in following order: inactive rest, active rest, inactive hover, active hover, inactive pressed, active pressed
TitleBar.Icon.Max.Image Specifies Image File with various icons in it, in following order: inactive rest, active rest, inactive hover, active hover, inactive pressed, active pressed
TitleBar.Icon.Min.Image Specifies Image File with various icons in it, in following order: inactive rest, active rest, inactive hover, active hover, inactive pressed, active pressed
TitleBar.Icon.Help.Image Specifies Image File with various icons in it, in following order: inactive rest, active rest, inactive hover, active hover, inactive pressed, active pressed

ClientWindow (Background for controls not using a dedicated one)

Key Additional States Details
ClientWindow.Brush.Type Specifies the background type to use. Either 'Solid' or 'Image'
ClientWindow.Brush.SolidColor Specifies the color to use for the background if the background type is set to 'Solid'
ClientWindow.Brush.Image Specifies the path to the image to use for the background if the background type is set to 'Image'
ClientWindow.Brush.SizingType 'Stetch', 'Tile' or 'Fixed'. Only used if background type is 'Image'
ClientWindow.Brush.SizingMargins Specifies the margin used when the image must be resized. (left, top, right, bottom). This is used to only strech or tile the content and correctly draw the border.

Different states

In order to use the correct themable appearance the theme engine will try to get the theme keys in following order:

  1. Get key for control in current state (e.g. Button.BackgroundImage(disabled))
  2. Get key for control (e.g. Button.BackgroundImage)

The first found key will be used.


Example

Following configuration example features a theme (FrameWindow only) which looks like WindUI but draws inactive windows with a transparent border and title. (The transparency itself comes right from the images).

FrameWindow.Border.Left.Brush.Type                                               STRING     Image
FrameWindow.Border.Left.Brush.SolidColor                                         COLOR      #00525252
FrameWindow.Border.Left.Brush.Image                                              STRING     FrameBorderLeft.ico
FrameWindow.Border.Left.Brush.Image(inactive)                                    STRING     FrameBorderLeft(inactive).ico
FrameWindow.Border.Left.Brush.SizingMargins                                      RECT       0,0,0,0
FrameWindow.Border.Left.Brush.SizingType                                         STRING     Tile
FrameWindow.Border.Left.Width                                                    INT32      10
FrameWindow.Border.Left.ContentSize                                              INT32      10
FrameWindow.Border.Left.ContentSize(inactive)                                    INT32      10
FrameWindow.Border.Left.Transparent                                              BOOL       false
FrameWindow.Border.Left.Transparent(inactive)                                    BOOL       true
FrameWindow.Border.Right.Brush.Type                                              STRING     Image
FrameWindow.Border.Right.Brush.SolidColor                                        COLOR      #00525252
FrameWindow.Border.Right.Brush.Image                                             STRING     FrameBorderRight.ico
FrameWindow.Border.Right.Brush.Image(inactive)                                   STRING     FrameBorderRight(inactive).ico
FrameWindow.Border.Right.Brush.SizingMargins                                     RECT       0,0,0,0
FrameWindow.Border.Right.Brush.SizingType                                        STRING     Tile
FrameWindow.Border.Right.Width                                                   INT32      10
FrameWindow.Border.Right.ContentSize                                             INT32      10
FrameWindow.Border.Right.ContentSize(inactive)                                   INT32      10
FrameWindow.Border.Right.Transparent                                             BOOL       false
FrameWindow.Border.Right.Transparent(inactive)                                   BOOL       true
FrameWindow.Border.Bottom.Brush.Type                                             STRING     Image
FrameWindow.Border.Bottom.Brush.SolidColor                                       COLOR      #00525252
FrameWindow.Border.Bottom.Brush.Image                                            STRING     FrameBorderBottom.ico
FrameWindow.Border.Bottom.Brush.Image(inactive)                                  STRING     FrameBorderBottom(inactive).ico
FrameWindow.Border.Bottom.Brush.SizingMargins                                    RECT       2,0,2,0
FrameWindow.Border.Bottom.Brush.SizingType                                       STRING     Tile
FrameWindow.Border.Bottom.Width                                                  INT32      10
FrameWindow.Border.Bottom.ContentSize                                            INT32      10
FrameWindow.Border.Bottom.ContentSize(inactive)                                  INT32      10
FrameWindow.Border.Bottom.Transparent                                            BOOL       false
FrameWindow.Border.Bottom.Transparent(inactive)                                  BOOL       true
FrameWindow.Background.Brush.Type                                                STRING     Solid
FrameWindow.Background.Brush.SolidColor                                          COLOR      #00C1C1C1
FrameWindow.InnerFrame.Margin                                                    INT32      0
FrameWindow.InnerFrame.SolidColor                                                COLOR      #00777777
ClientWindow.Background.Brush.Type                                               STRING     Solid
ClientWindow.Background.Brush.SolidColor                                         COLOR      #00EBEBEB
TitleBar.Background.Brush.Type                                                   STRING     Image
TitleBar.Background.Brush.Image                                                  STRING     TitleBarBackground.ico
TitleBar.Background.Brush.Image(inactive)                                        STRING     TitleBarBackground(inactive).ico
TitleBar.Background.Brush.SizingMargins                                          RECT       5,0,5,0
TitleBar.Background.Brush.SizingType                                             STRING     Tile
TitleBar.Height                                                                  INT32      26
TitleBar.Transparent                                                             BOOL       true
TitleBar.Transparent(inactive)                                                   BOOL       true
TitleBar.Caption.Background.Brush.Type                                           STRING     Image
TitleBar.Caption.Background.Brush.Image                                          STRING     TitleBarCaptionBackground.ico
TitleBar.Caption.Background.Brush.SizingMargins                                  RECT       5,0,5,0
TitleBar.Caption.Background.Brush.SizingType                                     STRING     Tile
TitleBar.Caption.Background.Brush.Image(inactive)                                STRING     TitleBarCaptionBackground(inactive).ico
TitleBar.Caption.TextColor                                                       COLOR      #00FFFFFF
TitleBar.Caption.TextColor(inactive)                                             COLOR      #00202020
TitleBar.Caption.AdditionalSize                                                  INT32      16
TitleBar.Caption.Height                                                          INT32      26
TitleBar.Icons.Width                                                             INT32      20
TitleBar.Icon.Close.Image                                                        STRING     IconClose.ico
TitleBar.Icon.Min.Image                                                          STRING     IconMin.ico
TitleBar.Icon.Max.Image                                                          STRING     IconMax.ico
TitleBar.Icon.Help.Image                                                         STRING     IconHelp.ico
Personal tools
Navigation