Theme design
Theme Repository
The Onion Theme Repository has moved to its own repository.
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:
Since Onion v4 you have additional assets in skin/extra
folder:
bootScreen.png
: Custom boot screenScreen_Off.png
: Shutting down screenScreen_Off_Save.png
: Saving + Shutting down screenchargingState0.png
->chargingState23.png
: 24 images for charging animation, and you can addchargingState.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 slidertoggle-on
andtoggle-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
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.
Download Adobe Blank • OFL License"Adobe Blank is a special-purpose OpenType font that is intended to render all Unicode code points using non-spacing and non-marking glyphs"
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.
HTML Preview page
(Credit: Weston Campbell)Drop the html file in the theme folder and launch it.