Theming - gd-99/symbiogd GitHub Wiki
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 edittheme.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 ofpng
orsvg
.
By convention, symbolic icons ends with -symbolic
. E.g. a symbolic status/error
icon will be status/error-symbolic
.