Skip to content

Latest commit

 

History

History
218 lines (174 loc) · 4.82 KB

themes.md

File metadata and controls

218 lines (174 loc) · 4.82 KB
Raw

Themes

A theme extension is a way to modify the look & feel of the User Interface (UI) of Aseprite. There is a set of known themes in the themes repository.

Content a .aseprite-extension file for a theme extension:

theme-example.aseprite-extension
|
+-- package.json
|
+-- theme.xml
|
+-- sheet.png
|
+-- sheet.aseprite-data

Content of the package.json file:

{
  "name": "your-theme",
  "displayName": "Your Theme",
  "description": "Your Theme",
  "version": "1.0",
  "author": { "name": "Your Name", "email": "[email protected]", "url": "http://your.website/" },
  "publisher": "aseprite",
  "license": "CC-BY-4.0",
  "categories": [
    "Themes"
  ],
  "contributes": {
    "themes": [
      { "id": "your-theme", "path": "." }
    ]
  }
}

The given "path" property is a directory (generally . which means the same directory where the package.json file is located), and this directory must contain a set of files:

theme.xml

This is the most complex file of the theme, it's divided in several sections:

<?xml version="1.0" encoding="utf-8" ?>
<theme name="..." screenscaling="2" uiscaling="1">
  <authors>...</authors>
  <fonts>...</fonts>
  <dimensions>...</dimensions>
  <colors>...</colors>
  <parts>...</parts>
  <styles>...</styles>
</theme>

For an example you can see the official default theme.xml.

In a perfect world Aseprite should use only <style> elements, but as we migrated the themes in a progressive way from older versions, Aseprite uses a mix of <dimensions>, <colors>, and <parts> from the code directly (instead of using only the <styles>). Maybe in a future we would be able to reference only <styles>, but at the moment all these kind of elements are required.

<theme>

The main <theme> element contains three attributes:

<theme name="..."
       screenscaling="2"
       uiscaling="1">
</theme>

The name attribute is just a way to identify the theme, anyway it's ignored, and the displayName from the package.json file will be used in the UI.

The screenscaling="2" is a way to specify the prefered default "Edit > Preferences > General > Screen Scaling" factor (2 means 200%) and uiscaling the default "UI Scaling" factor (1 means 100%).

<authors>

A section to indicate the author(s) of the theme:

<theme>
  <authors>
    <author name="Your Name" url="http://your.website/" />
  </authors>
</theme>

<fonts>

A section to indicate the fonts used in the theme. You need to specify two fonts: default and mini:

<theme>
  <fonts>
    <font id="default" font="Aseprite" />
    <font id="mini" font="Aseprite Mini" />
  </fonts>
</theme>

Here Aseprite and Aseprite Mini fonts are defined in the default fonts.xml file that came with the Aseprite distribution. As an alternative, instead of specifing a pre-defined font in the font="..." attribute, you can define your own <font /> element just like in the distributed fonts.xml file.

<dimensions>

The <dimensions> section contains a set of <dim> elements that specify a set of integer values (pixels) for different dimensions of the program:

<theme>
  <dimensions>
    <dim id="..." value="integer value..." />
    <dim id="..." value="integer value..." />
    ...
  </dimensions>
</theme>

<colors>

The <colors> section contains a set of <color> elements that specify some colors used in the UI:

<theme>
  <colors>
    <color id="..." value="#rrggbb" />
    <color id="..." value="#rrggbb" />
    ...
  </colors>
</theme>

<parts>

<theme>
  <parts>
    <part id="..." ... />
    <part id="..." ... />
    ...
  </parts>
</theme>

<styles>

<theme>
  <styles>
    <style id="...">...</style>
    <style id="...">...</style>
    ...
  </colors>
</theme>

sheet.png

A sprite sheet with the content of each theme part. It means that for each <part> element from theme.xml:

<theme>
  <parts>
     <part ... />
     ....
  </parts>
</theme>

You will have a sprite in the <part>'s area.

sheet.aseprite-data

This is an auxiliary file used by Aseprite. When we load the sheet.png file, if Aseprite finds this sheet.aseprite-data file, it will create one slice for each theme part from theme.xml (the same when we save the sheet.png from Aseprite, the theme parts will be kept in sync with the slices):

<?xml version="1.0" encoding="utf-8"?>
<sprite>
  <slices theme="theme.xml" />
</sprite>

SEE ALSO

Extensions