Skip to main content
Version: 4.3

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 Package 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

BPreplayBold.otf

Download BPreplayOFL License

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

Exo-2-Bold-Italic.ttf

Download Exo 2OFL License

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

Helvetica-Neue-2.ttf

Free for personal use

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

HENB.ttf

Free for personal use

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

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 BlankOFL 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