Theme Tutorial

This tutorial will demonstrate how to create your own theme(s).


The theme authentication service provides some API methods:

const theme = core.make('osjs/theme');
theme.resource('file'); // Gets an URI to a theme resource (current theme)
theme.icon('name'); // Gets an URI to a icon theme image (current theme)


A theme consists of a set of icons and styles. It is installed as a package (just as applications).

Use the official standard theme or official standard icons as a base or as a template.

Please note that if you're making a copy of the standard theme, all the scripts and dependencies must remain intact from the original package.json file.

You can use the standard theme(s) as your base and customize it to your linking, just like @osjs/standard-dark-theme


The metadata.json file describes your theme:

  "type": "theme",
  //"type": "icons",

  // The unique name
  "name": "MyTheme",

  // A map of localized titles
  "title": {
    "en_EN": "My Theme"

  // A map of localized descriptions
  "description": {
    "en_EN": "My Theme"


Please note that your package.json file that your application is published with contains this section for the package discovery to work:

  "osjs": {
    "type": "package"


The @osjs/client, @osjs/gui etc. libraries comes with the base styles for basic layout but does not contain any actual colors, effects, etc.

All of the relevant elements have their own classes prefixed with osjs-.

The @osjs/standard-theme package is a good starting place if you want to make your own styles.


The icons follow the GNOME Icon naming spec and are by default in 48x48 png format.

results matching ""

    No results matching ""