ImageGlass Theme Pack

Customize the appearance of ImageGlass by creating your own theme pack. An ImageGlass theme pack is an archive file with a .igtheme extension that can be opened with any archive viewer, such as WinRar or 7Zip, or simply change its extension to .zip and open it with File Explorer on Windows.

This documentation guides you through creating a theme pack for ImageGlass version 9 or above.

Theme Pack Structure

A theme pack folder should contain the following:

• 1 igtheme.json file: This essential file stores all theme settings and enables ImageGlass to recognize the theme pack.
• 1 theme preview image file: ImageGlass displays this image file as a theme preview in the Settings dialog.
• SVG icon files: These are for toolbar icons, the app logo, and other visual elements.

All of these files should be placed in a folder named THEME_FOLDER. The structure should resemble the following:

THEME_PACK.igtheme
  |- THEME_FOLDER
    |- igtheme.json
    |- theme preview image file
    |- SVG icon files...

The THEME_FOLDER should follow this naming convention:

<theme-name>.<author-name>

where:

• theme-name is the name of the theme, separated by hyphens -.
• author-name is the name of the author, separated by hyphens -.

For example: Kobe.Duong-Dieu-Phap, 2017-Light-Gray.Duong-Dieu-Phap.

THEME_PACK.igtheme follows a similar convention, with the extension:

<theme-name>.<author-name>.igtheme

For example: Kobe.Duong-Dieu-Phap.igtheme, 2017-Light-Gray.Duong-Dieu-Phap.igtheme.

Create a Theme Pack for ImageGlass 9

Step 1. Create the theme pack folder structure

Step 2. Create the igtheme.json file

This is the most crucial file in the theme pack, providing all the necessary SVG icon files to the ImageGlass app, along with other theme information. The structure of this file is in JSON format, detailed as follows:

{
  "_Metadata": { // see step 2.1
    "Description": "ImageGlass theme configuration file",
    "Version": "9.0"
  },
  "Info": {
    ... // see step 2.2
  },
  "Settings": {
    ... // see step 2.3
  },
  "Colors": {
    ... // see step 2.4
  },
  "ToolbarIcons": {
    ... // see step 2.5
  }
}

🟢 Step 2.1: Section _Metadata

Provides the metadata of the ImageGlass theme pack. Do not alter this section.

🟢 Step 2.2: Section Info

Provides basic information of your theme pack.

🟢 Step 2.3: Section Settings

Provides general settings of your theme pack.

🟢 Step 2.4: Section Colors

Defines the color scheme of ImageGlass. All colors should be in HEX code (web format), including alpha values.

Example: #fff, #fffa, ffffff, ffffffaa, etc. ImageGlass also supports using the system accent color for your theme pack:

• You can use "accent" as a color value
• You can adjust the alpha value of the accent color using this syntax: <accent>:<alpha>. The alpha value should be from 0 to 255. Example: "accent:70".

🟢 Step 2.5: Section ToolbarIcons

Provides icons for the toolbar. All icon files should be in SVG format for better scaling on high DPI screens.

Step 3. Copy Icon and Image Files to The Theme Folder

Step 4. Add a Theme Preview Image File as Specified in Step 2.3

Step 5. Pack Your Theme

Rename your theme folder to match the naming convention, compress the whole theme folder as a .zip file, and change the extension to .igtheme.

Example: Moon-light.Duong-Dieu-Phap.igtheme.

Step 6. Share Your Theme

After creating an impressive theme, don't forget to share it with others. You can:

• Open an issue here, and attach your fantastic theme; or
• Send your theme pack (.igtheme) to the phap@imageglass.org email.