Themes

Theme System Overview

ImageGlass supports custom theme packs that control the visual appearance including colors, icons, and UI elements. Each theme is defined by an igtheme.json configuration file and associated assets.

Theme Locations

Themes can be installed in two locations:

%APPDATA%\ImageGlass\Themes\[ThemeName]\
├── igtheme.json
├── *.svg (toolbar icons)
├── Logo.svg
└── preview.webp

[ImageGlass Installation]\Themes\[ThemeName]\
├── igtheme.json
├── *.svg (toolbar icons)
└── ...

User themes take precedence over built-in themes with the same name.

Built-in Themes

ImageGlass includes these default themes:

Kobe (Dark)

Modern dark theme with accent color integrationBest for: Low-light environments, photo editing

Kobe-Light

Clean light theme with subtle colorsBest for: Bright environments, document viewing

Installing Themes

Download Theme Pack

Obtain a .igtheme file or theme folder from:

ImageGlass Theme Gallery
Community sources
Custom created themes

Install via Settings

Option 1: Using ImageGlass Settings

Open ImageGlass Settings → Appearance tab
Click Install theme packs
Select the .igtheme file or folder
Confirm installation

Install Manually

Option 2: Manual Installation

Extract theme folder to %APPDATA%\ImageGlass\Themes\
Ensure folder contains igtheme.json
Restart ImageGlass
Select theme in Settings → Appearance

Apply Theme

Open Settings → Appearance
Select theme for Dark mode and/or Light mode
Click Apply

Theme Structure

igtheme.json Configuration

Every theme pack requires an igtheme.json file:

igtheme.json

{
  "_Metadata": {
    "Description": "ImageGlass theme configuration file",
    "Version": "9.0"
  },
  "Info": {
    "Name": "My Custom Theme",
    "Author": "Your Name",
    "Email": "your@email.com",
    "Website": "https://yoursite.com",
    "Description": "A custom theme for ImageGlass",
    "Version": "1.0"
  },
  "Settings": {
    "IsDarkMode": true,
    "NavButtonLeft": "ViewPreviousImage.svg",
    "NavButtonRight": "ViewNextImage.svg",
    "PreviewImage": "preview.webp",
    "AppLogo": "Logo.svg"
  },
  "Colors": {
    "BgColor": "#1e1e1e",
    "TextColor": "#ffffff",
    "ToolbarBgColor": "#2d2d30",
    "MenuBgHoverColor": "accent:50"
  },
  "ToolbarIcons": {
    "OpenFile": "OpenFile.svg",
    "Save": "Save.svg"
    // ... more icons
  }
}

Theme Info Section

string

required

Display name of the theme

string

Theme creator’s name

string

Contact email for theme support

string

Theme or author website

string

Brief description of the theme

string

required

Theme version number

Theme Settings

boolean

required

Whether this is a dark or light themeDetermines default text and UI colors.

string

Filename of left navigation button image (SVG recommended)Example: "ViewPreviousImage.svg"

string

Filename of right navigation button imageExample: "ViewNextImage.svg"

string

Preview image shown in theme selectorRecommended: 800x600 WebP or PNG

string

Application logo image (shown in about dialog)Recommended: 256x256 SVG or PNG

Theme Colors

ImageGlass supports extensive color customization:

Main Colors

string

Main background colorFormat: Hex color with optional alpha (#RRGGBB or #RRGGBBAA)Example: "#1e1e1e00" (transparent), "#ffffff" (white)

string

Primary text color

Toolbar background color

Toolbar text and icon color

Toolbar button hover highlightExample: "accent:140" (system accent with alpha 140)

Toolbar button pressed state

Toolbar button selected/active state

Gallery Colors

string

Gallery panel background

string

Gallery text color

string

Gallery thumbnail hover state

string

Gallery thumbnail click state

string

Gallery selected thumbnail

Menu background color

Menu item hover background

Menu item text color

Menu item text on hover

Navigation arrow button overlay color

System Accent Color

Use Windows system accent color in your theme:

"Colors": {
  "ToolbarItemHoverColor": "accent:140",
  "MenuBgHoverColor": "accent:50"
}

Format: accent:[alpha] where alpha is 0-255

System accent color automatically adjusts when users change their Windows theme

Define toolbar icon filenames in the ToolbarIcons section:

Filename of toolbar icon (relative to theme folder)Supported formats: SVG (recommended), PNG, WebPAvailable icons:

ActualSize, AutoZoom, Checkerboard
ColorPicker, Crop, Delete
Edit, FlipHorz, FlipVert
FullScreen, Gallery, GoToImage
LockZoom, MainMenu, OpenFile
Print, Refresh, RotateLeft, RotateRight
Save, ScaleToFill, ScaleToFit
ScaleToHeight, ScaleToWidth
Slideshow, ViewFirstImage, ViewLastImage
ViewNextImage, ViewPreviousImage
WindowFit, ZoomIn, ZoomOut
Play, Pause, Export, Exit

SVG is recommended for icons - they scale perfectly at any DPI and size

Creating a Custom Theme

Create Theme Folder

Create a new folder in %APPDATA%\ImageGlass\Themes\MyTheme\

Create igtheme.json

Copy and modify the example configuration above

Add Icons (Optional)

Create or add SVG icons for toolbar buttons. Icon size is automatically scaled.Recommended: 24x24px base size, scalable SVG

Add Preview Image

Create preview.webp showing your theme (800x600 recommended)

Test Theme

Restart ImageGlass
Open Settings → Appearance
Select your theme
Verify all colors and icons appear correctly

Theme Compatibility

string

required

Theme API versionCurrent version: "9.0"ImageGlass checks this for compatibility.

Themes with older API versions may not work correctly with newer ImageGlass versions.

Uninstalling Themes

Via Settings
Manual Removal

Open ImageGlass Settings → Appearance
Click Uninstall a theme pack
Select theme to remove
Confirm deletion

Navigate to %APPDATA%\ImageGlass\Themes\
Delete the theme folder
Restart ImageGlass

If you delete the currently active theme, ImageGlass will fall back to the default Kobe theme

To share your custom theme:

Package the theme folder with all assets
Create a ZIP file or .igtheme package
Include README with installation instructions
Share on:
- ImageGlass Community
- GitHub repositories
- Your own website

Troubleshooting

Theme doesn't appear in list

Ensure igtheme.json exists in theme folder
Check JSON syntax is valid
Verify Info.Name and _Metadata.Version are present
Restart ImageGlass

Icons not displaying

Check icon filenames match ToolbarIcons section exactly
Ensure icon files are in theme folder
Verify SVG files are valid
Try PNG format as fallback

Colors not applying

Validate hex color format (#RRGGBB or #RRGGBBAA)
Check for typos in color property names
Ensure colors contrast properly (dark vs light mode)

Theme shows but looks broken

Verify Settings.IsDarkMode matches your color scheme
Check all required color properties are defined
Compare with built-in theme structure

Example: Minimal Dark Theme

igtheme.json

{
  "_Metadata": {
    "Description": "ImageGlass theme configuration file",
    "Version": "9.0"
  },
  "Info": {
    "Name": "Minimal Dark",
    "Author": "Your Name",
    "Version": "1.0"
  },
  "Settings": {
    "IsDarkMode": true
  },
  "Colors": {
    "BgColor": "#0d0d0d",
    "TextColor": "#e0e0e0",
    "ToolbarBgColor": "#1a1a1a",
    "ToolbarTextColor": "#e0e0e0",
    "ToolbarItemHoverColor": "accent:100",
    "GalleryBgColor": "#1a1a1a",
    "GalleryTextColor": "#e0e0e0",
    "MenuBgColor": "#1a1a1a",
    "MenuTextColor": "#e0e0e0"
  },
  "ToolbarIcons": {}
}

This minimal theme uses default icons and system accent colors.

Appearance Settings

Configure theme selection and visual options

Advanced Configs

Advanced customization options

Get Started

User Guide

Configuration

Advanced Features

Theme System Overview

Theme Locations

Built-in Themes

Kobe (Dark)

Kobe-Light

Installing Themes

Theme Structure

igtheme.json Configuration

Theme Info Section

Theme Settings

Theme Colors

Main Colors

Gallery Colors

Menu Colors

Navigation Colors

System Accent Color

Creating a Custom Theme

Theme Compatibility

Uninstalling Themes

Troubleshooting

Example: Minimal Dark Theme

See Also

Appearance Settings

Advanced Configs

​Theme System Overview

​Theme Locations

​Built-in Themes

Kobe (Dark)

Kobe-Light

​Installing Themes

​Theme Structure

​igtheme.json Configuration

​Theme Info Section

​Theme Settings

​Theme Colors

​Main Colors

​Toolbar Colors

​Gallery Colors

​Menu Colors

​Navigation Colors

​System Accent Color

​Toolbar Icons

​Creating a Custom Theme

​Theme Compatibility

​Uninstalling Themes

​Sharing Your Theme

​Troubleshooting

​Example: Minimal Dark Theme

​See Also

Appearance Settings

Advanced Configs

Theme System Overview

Theme Locations

Built-in Themes

Installing Themes

Theme Structure

igtheme.json Configuration

Theme Info Section

Theme Settings

Theme Colors

Main Colors

Toolbar Colors

Gallery Colors

Menu Colors

Navigation Colors

System Accent Color

Toolbar Icons

Creating a Custom Theme

Theme Compatibility

Uninstalling Themes

Sharing Your Theme

Troubleshooting

Example: Minimal Dark Theme

See Also