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)

const sounds = core.make('osjs/sounds');
sounds.resouce('file'); // Gets an URI to a sound theme resource (current theme)'file'); // Plays a sound


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

Use the official standard theme, official standard icons or official standard sounds 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",
  //"type": "sounds",

  // 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 Freedesktop Icon naming spesification and are by default in 48x48 png format.


The sounds follow the Freedesktop Sound naming spesification and are privded in both Ogg and MP3 formats.

results matching ""

    No results matching ""