OpenSkin

The flexible, open, and libre skin format.

Maintained by Zenith.

About

OpenSkin is a JSON-based skinning format that aims to make it easy for developers, designers, and users to implement, create, and use themes. It was initially developed to be used in iGBA (now Eclipse), but is now used in all sorts of apps, from emulators to home pages.

The OpenSkin format is simple to learn for designers and easy for developers to implement.

Example Skins

Designers are permitted to use the following skins to help guide their work. These skins were developed by the OpenSkin team and can be freely adapted.


Dark Mode Twitter Dark Mode Documentation Skin Casa Dark iGBA Transparent

If you do not want to mess with JSON, you can use OpenSkin Editor, but keep in mind that it is considered defunct.

The Format

OpenSkin uses two well-known standards to work: CSS and JSON. OpenSkin's general philiosophy is to map an "element" to a name, provide the CSS you wish to apply to it, and the library used will handle how to take the CSS and apply it to the right element.

To show you this, here's an example of a typical OpenSkin theme:

{
  "name": "Blue",
  "logo": "https://eclipseemu.me/play/assets/img/skin/blue.png",
  "author": "Zenith Dev Team",
  "description": "A blue theme for Eclipse.",
  "styles": [
    {
      "iOSicon": "color:#3061d7;opacity:1",
      "MDicon": "color:white;opacity:1",
      "navbar": "background:#3061d7!important",
      "gradient": "background-color: #3061d7",
      "iOSoutOfFocus": "color:#929292;",
      "iOSinFocus": "color:#3061d7;",
      "MDtoggleHead": "background:#3061d7;",
      "MDtoggleBody": "background:rgba(48,97,215,0.5);",
      "iOStoggleHead": "",
      "iOStoggleBody": "background:#3061d7;",
      "fab": "color:white;background:#3061d7!important",
      "icon": "color:#737373!important",
      "tint": "color:#3061d7;",
      "mdHeader": "background:#3061d7",
      "toolbar": "background:#3061d7!important",
      "button": "background:#3061d7!important",
      "eclipse": [
        {
          "emulatorBackground": "background-color: #3061d7",
        }
      ],
      "custom": [
        {
          "casa": ".btn.btn > a, #activity-bar > div {color: #3061d7!important}"
        }
      ]
    }
  ]
}

As you can see, an OpenSkin theme is made of a few root properties: The name (the name of the skin as seen by users), logo (the icon shown to users), author (the skin designer's name), description (a summary of the skin), and styles (where you add styling information).

There should only be one styles object per skin. Here, you can set three "levels" of theming:


Root

Most elements are stored in the root of the styles object. This includes elements that you wish to theme in every app (which is the goal). For your theme to work with all OpenSkin-compatible apps and sites, work in the root level.


Local

If you would like to theme an element differently in different apps, these tweaks would be done in the local level. Define a new local object by making a single-object array (similar to the styles object) but with the property name of the app you are theming (in the above skin, this is eclipse). Properties will defined as they are in the root object, but in the context of the specified local object.


Custom

Like local-level theming, custom themes will only work in a explicitly-defined application. However, unlike other theming levels, custom-level theming allows for arbitrary CSS to be applied, allowing for more fine-grain control of non-supported elements. In most cases, this is not needed, but can be used to make extremely advanced themes.