Skip to content

Latest commit

 

History

History
221 lines (178 loc) · 9.18 KB

Create-theme-for-v8.md

File metadata and controls

221 lines (178 loc) · 9.18 KB
Raw

🎏 ImageGlass theme packs

The up-to-date theme packs for ImageGlass

Website GPL Licence

Total Downloads

⌚ Change history

This instruction is always for the latest version of ImageGlass. If you are using the older versions, please see the changes (if any) at:

https://github.com/ImageGlass/theme/releases

🪐 Naming convention

Please follow this naming convention for your theme folder and theme pack:

Theme folder (THEME_FOLDER)

<theme_name>.<author>

While:

  • theme_name: The name of the theme, no space, separated by hyphen -.
  • author: The author of the theme, no space, separated by hyphen -.

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

Theme pack

Similar to "Theme folder" but with the extension:

<theme_name>.<author>.igtheme

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

📂 Theme pack folder structure

A theme pack folder contains:

  • 1 igtheme.xml file
  • 1 preview image file
  • And SVG icon files

All of these files should be placed in a folder:

THEME_FOLDER
|-- igtheme.xml
|-- preview image file
|-- SVG icon files...

🎨 How to create a new theme pack?

1. Create theme pack folder structure

2. Create igtheme.xml file

This is the most important file of the theme, it provides all the SVG icon files to ImageGlass app and other information of your theme. You can see full igtheme.xml example at https://github.com/ImageGlass/theme/blob/master/themes/dark/2017_dark/igtheme.xml

There are 3 sections in <Theme> element:

<ImageGlass>
  <Theme>
    <Info />
    <main />
    <toolbar_icon />
  </Theme>
</ImageGlass>

2.1 <Info /> element

Provides general information of your theme packs, all options are:

Key Example Description
name Kobe" Name of your theme which people will see it in ImageGlass theme list.
description description="Modern ImageGlass theme (Dark)" A short description of your theme.
version version="1.0" The version number of your theme.
author author="Duong Dieu Phap" The author name who creates this theme pack (optional).
email email="[email protected]" The contact email of the author (optional).
website website="https://imageglass.org" The website of the author (optional).
preview preview="preview.jpg" The preview image which people will have a glance on it.
configversion configversion="8" 🚫 Version of configuration file (don't change it).
type type="ImageGlass Theme Configuration" 🚫 Just a constant (don't change it).

Full example:

<Info name="Kobe"
    version="8.0"
    author="Duong Dieu Phap"
    email="[email protected]"
    website="https://imageglass.org"
    description="Modern ImageGlass theme"
    type="ImageGlass Theme Configuration"
    configversion="8.0"
    preview="preview.jpg" />

2.2 <main /> element

Provides color scheme of ImageGlass. It should be either decimal color code or HEX code (no alpha value). All options are:

Key Example Description
topbarcolor topbarcolor="#3a3c3d" The color of toolbar.
bottombarcolor bottombarcolor="#3a3c3d" The color of thumbnail bar.
backcolor backcolor="#3a3c3d" The color of viewer area.
statuscolor statuscolor="#f0f0f0" The color of text, used in tool forms: Color picker, Page navigation, ...
menubackgroundcolor menubackgroundcolor="#484b4c" The background color of menu item.
menubackgroundhovercolor menubackgroundhovercolor="#686868" The background color of menu item on hover.
menutextcolor menutextcolor="#f0f0f0" The text color of menu item.
menutexthovercolor menutexthovercolor="#f0f0f0" The text color of menu item on hover.
topbar topbar="toolbar_bg.png" The background image file of the toolbar. This overrides the topbarcolor value. Invalid file ignored.
bottombar bottombar="thumb_bg.png" The background image file of the thumbnail. This overrides the bottombarcolor value. Invalid file ignored.
accentcolor accentcolor="#f00" The accent color.
accentlightcolor accentlightcolor="#f00" The accent light color.
accentdarkcolor accentdarkcolor="#f00" The accent dark color.
logo logo="logo.svg" The logo of ImageGlass, will display on title bar, About page, First-launch configuration page. Minimium size is 128px.
isshowtitlebarlogo isshowtitlebarlogo="True" Controls visibility of logo on title bar.
isdarkmode 🆕 isdarkmode="True" The theme pack color mode. This will change the title bar color to dark or light color in Windows 10+.

Full example:

<main topbar=""
    bottombar=""
    topbarcolor="#3a3c3d"
    bottombarcolor="#3a3c3d"
    backcolor="#3a3c3d"
    statuscolor="#f0f0f0"
    menubackgroundcolor="#484b4c"
    menutextcolor="#f0f0f0" />

2.3 <toolbar_icon /> element

Provides icons for toolbar. It's recommended to use SVG file format for better scaling on high DPI screens. All options are:

Key Example Description
back back="ViewPreviousImage.svg" The Back navigation button.
next next="ViewNextImage.svg" The Next navigation button.
gofirst gofirst="GoToFirst.svg" The Go to first image button.
golast golast="GoToLast.svg" The Go to last image button.
leftrotate leftrotate="RotateLeft.svg" The Rotate left button.
rightrotate rightrotate="RotateRight.svg" The Rotate right button.
fliphorz fliphorz="FlipHorz.svg" The Flip horizontal button.
flipvert flipvert="FlipVert.svg" The Flip vertical button.
crop crop="Crop.svg" The Cropping tool button.
colorpicker colorpicker="ColorPicker.svg" The Color picker tool button.
zoomin zoomin="ZoomIn.svg" The Zoom in button.
zoomout zoomout="ZoomOut.svg" The Zoom out button.
autozoom autozoom="AutoZoom.svg" The Auto zoom button.
zoomlock zoomlock="LockRatio.svg" The Lock zoom ratio button.
scaletowidth scaletowidth="ScaleToWidth.svg" The Scale to width button.
scaletoheight scaletoheight="ScaleToHeight.svg" The Scale to height button.
zoomtofit zoomtofit="ScaleToFit.svg" The Scale to fit button.
scaletofill scaletofill="ScaleToFill.svg" The Scale to fill button.
scaletofit scaletofit="ActualSize.svg" The Actual size button.
open open="OpenFile.svg" The Open file button.
refresh refresh="Refresh.svg" The Refest button.
gotoimage gotoimage="GoToImage.svg" The Go to button.
autosizewindow autosizewindow="AdjustWindowSize.svg" The Window fit button.
fullscreen fullscreen="FullScreen.svg" The FullScreen button.
slideshow slideshow="Slideshow.svg" The Slideshow button.
checkerboard checkerboard="Checkerboard.svg" The Checkerboard button.
thumbnail thumbnail="ThumbnailBar.svg" The Thumbnail bar button.
delete delete="delete.svg" The Move to recycle bin button.
print print="Print.svg" The Print button.
edit edit="Edit.svg" The Edit button.
convert convert="Convert.svg" The Save image as button.
menu menu="Menu.svg" The main menu button.

3. Add icons and image files

4. Add preview image file for your theme (step 2.1)

5. Pack your theme

  • Zip the whole theme folder as .zip.
  • Change the .zip extension to .igtheme.

6. Share your theme

After creating a nice theme, don't forget sharing it to other people. You can

💖 Support this project

ImageGlass is free and open source but developing it has taken thousands of hours of my time and a large part of my sanity. If you feel this little viewer useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.

Thanks for your gratitude and finance help!

Become a sponsor Become a patron Wire transfer Buy me a beer?

❤

Thank you!