Skip to main content
Version: 4.1

Theme Design

Themes3

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

BPreplayBold.otf

Download BPreplay • OFL License

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

Exo-2-Bold-Italic.ttf

Download Exo 2 • OFL 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 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