Desktop themes

Desktop themes are used to slightly customize an interface's appearance (colors, fonts, position, anything you can do with CSS). If you want to add new elements or change the interface's structure, you may want to create a new interface.

Desktop themes are stored in /usr/share/css/themes/ and /usr/share/images/themes/.

Creating a desktop theme

The easiest way to make a new theme is probably to copy another one from /usr/share/css/themes/, and edit theme.xml to change its properties. If you still want to make a new theme from scratch, keep reading. ;-)

Add your own directory in /usr/share/css/themes/. It must contain a file named theme.xml like this :

<?xml version="1.0" encoding="UTF-8"?>
<config>
	<attribute name="name" value="My super theme"/>
	<attribute name="description" value="My super theme is really super"/>
</config>

If the theme is enabled by a user, all CSS files within the directory will be included (note: URLs in these CSS files are relative to the webos root path, not to the CSS file, so don't be surprised when linking images or fonts).

The folder can contain a directory which has the name of an interface, if so CSS files in this directory are only loaded if the user is using this interface. For example files in a directory named gnome-shell are only loaded if the user is using GNOME Shell. See [User interfaces](User interfaces).

Icon themes

Icon themes are sets of icons.

When looking for an icon (let's say status/error, with a 48px size), the webos will start searching this icon in the theme's folder with the same size or greater (if status/error exists with a 128px size, it will be chosen). Then, if the name starts with apps/ or applications/, it will try to find a corresponding app icon in /usr/share/icons/applications. Lastly, the webos will look into other theme's folders for this icon.

Icon themes are stored in /usr/share/icons/themes. Our 48px status/error icon will have the path /usr/share/icons/themes/mysupertheme/48/status/error.png.

The path contains:

• /usr/share/icons/themes/: the themes path
• mysupertheme/: the theme's folder. Usually, contains the theme's name.
• 48/: the icons size. Can be one of 16, 22, 24, 32, 64, 128, scalable. For scalable, all icons must be in SVG. Most comon sizes are 24, 64 and 128 (64 and 128 can be substituted by scalable for instance).
• status/error: the icon name.
• .png: can be one of png or svg.

By convention, symbolic icons ends with -symbolic. E.g. a symbolic status/error icon will be status/error-symbolic.