Theme design

Theme Repository

The Onion Theme Repository has moved to its own repository.

Go to Themes ➜

Contributing

Do you want to share your own custom themes with the community? ^_❤️ Click here !

Template

Blueprint Theme _{^{(Credit: Aemiii91)}}

The Blueprint theme can be used as theming layout template for starting any new theme :

Download the Blueprint theme

Since Onion v4 you have additional assets in skin/extra folder:

• bootScreen.png : Custom boot screen
• Screen_Off.png : Shutting down screen
• Screen_Off_Save.png : Saving + Shutting down screen
• chargingState0.png -> chargingState23.png : 24 images for charging animation, and you can add chargingState.json containing a frame delay value (default: 80 milliseconds - values over 10,000 will be parsed as microseconds):

  { "frame_delay": 80 }
• lum0.png -> lum10.png: 11 images for brightness slider
• toggle-on and toggle-off -> little toggle which are present in Pack Manager and Tweaks for example.

Default Fonts _{^{(Credit: Aemiii91)}}

It is no longer necessary to include the following fonts in your theme, just point the font paths in config.json to /mnt/SDCARD/miyoo/app/[FONT FILE].

See the list of included fonts

BPreplay Bold
/mnt/SDCARD/miyoo/app/BPreplayBold.otf

^{Download BPreplay • OFL License}

Exo 2 Bold Italic
/mnt/SDCARD/miyoo/app/Exo-2-Bold-Italic.ttf

^{Download Exo 2 • OFL License}

Helvetica Neue
/mnt/SDCARD/miyoo/app/Helvetica-Neue-2.ttf

^{Free for personal use}

Helvetica Neue Bold
/mnt/SDCARD/miyoo/app/HENB.ttf

^{Free for personal use}

WenQuanYi Micro Hei
/mnt/SDCARD/miyoo/app/wqy-microhei.ttc

^{Download Micro Hei • GPL License}

Adobe Blank
/mnt/SDCARD/miyoo/app/AdobeBlank.ttc

Use this font to hide specific text elements in your theme.

"Adobe Blank is a special-purpose OpenType font that is intended to render all Unicode code points using non-spacing and non-marking glyphs"

^{Download Adobe Blank • OFL License}

Theme Overrides

Since Onion v4 you can override some aspects of themes. This allows you to have elements which stay the same after updating and no matter which theme is applied.

Example: To apply your own charging animation, just put the files chargingState0.png ... chargingState23.png in this folder: Saves/CurrentProfile/theme/skin/extra.

Theme Development Tools

Onion Theme Viewer

^{(Credit: ruidacosta)}

A theme viewer desktop application, available for both Mac and Windows.

Get Onion Theme Viewer

HTML Preview page

^{(Credit: Weston Campbell)}

Drop the html file in the theme folder and launch it.

Download the Preview page