Online Theme Editor Guide

Prerequisites for developing a theme online 

  • Registered Account on designer.xiaomi.com .
  • Working Internet Connection.
  • Design Ideas and Files (Like:wallpaper, Icons etc.)

You are ready to go.

Step 1:-Go to online web tool theme.mi.com/editor onlinedocumentation_1

  • Click on Get Started Button.

Step 2:-Login in your mi account which has already got the designer permissions. onlinedocumentation_log-in

  • See how to apply designer permissions.

Step 3:-  After Login you will get Editor Home Page.

onlinedocumentation_2

  • Click On Create a Theme (For Create New Theme)
  • Click MIUI Theme Account (For Your Theme Status Uploaded Earlier )

Step 4 :-  Now You are in the Theme Tool Editor

onlinedocumentation_3

Lock Screen Template

Select one of three Lock (Different unlocking Patterns).

5-point unlocker

  • Four app unlock (Home,Call,Messaging,Camera)
  • Music player on lockscreen in built.
  • Multifunction at same screen 
  • Unlock MethodYou need to drag circle which is in center to the app icon which you wants to unlock.

3-swipe unlocker

  • Three app unlock (Home,Camera,Call).
  • You can put any Quote / Notice on Lockscreen (Text).
  • Unlock Method:Swipe up from desired app icon for unlock/open app.

Slide right to unlock

  • Very simple unlocker style.
  • Unlock Method:Simply Slide the lock button on screen and follow the given path.

Select Any Unlocker style and click Next buttononlinedocumentation-next

onlinedocumentation_LockscreenSelect

Step 5:-  Edit Lockscreen

1.  Lock screen Wallpaper

onlinedocumentation_4

  • Click on Change button. 
  • Upload your Lockscreen wallpaper.
  • Dimension should be 720×1280 px & JPG format
  • Click next button.

2.  Add lock screen text (Optional if you don’t want any text you can left it blank) onlinedocumentation_5 3.  Now upload unlocker icons & mask

  • Mask is a layer on unlocker(Optional,can put blank png)

onlinedocumentation_6

Step 6:- Home screen wallpaper

onlinedocumentation_7

Click on Change and Upload Wallpaper

  • Wallpaper Dimension should be 1440x1280px.
  • Format should be JPG. 

Wait for upload and click next.

Step 7:-  Home screen Icons

onlinedocumentation_8

  Click on edit button visible bellow the icons and upload your icon.

  • There are 32 icons to be changed.
  • Each icon format is .png.
  • Dimension should be  192x192px (not more neither less).
  • You cannot skip any icons (should change all icons ).

After finishing all  click on next button.

Step 8 :- Other Icons

onlinedocumentation_9

Change Icons for downloaded apps.Click on edit button visible bellow the icons and upload your icon.

  • There are 4 type of icons to be change.
  • Icon background ( cover visible background of app ).
  • Icon pattern ( pattern for downloaded app icon).
  • Icon mask (visible area for user (black color filled area is only visible ) ).
  • Folder background (this will be the background for icon folder).

onlinedocumentation_other-icons2

Step 9:- System UI colors

onlinedocumentation_10

Change UI colors 

  • Choose the foreground and background colors and images that are displayed.
  • Change will reflect in (notification shade, Phone, and Messaging apps).
  • Chose colors from color picker or you can directly enter color value in the textbox.
  • 1st Color will reflect in Navigation bar (top and bottom bar used for navigation) .
  • 2nd color will reflect in elements & text which will appear on Navigation bar.

Step 10 :- System UI Images

onlinedocumentation_11

Change UI  Images

  • Upload the Top-bar and Bottom-bar images which will be reflect inside apps.
  • Upload image will be in .png format and dimension should be exact.
  • Here background image will reflect in lots of places in theme so color of background should be compatible with font colors and other UI components.

After finishing all the uploads click  next button.

Step 11 :- Dialer UI

onlinedocumentation_13

Dialer UI Change

  • Dialer Background (720x484px & .png format).
  • Bottom Bar image (720x160px & .png format ).
  • Dial button Normal/Pressed both condition (388x162px). 

Click on upload button for each image and upload your image.

After finishing all the uploads click  next button.

Step 12 :- Messaging UI

Here you need to change only one image which is edit button (compose).

Dimension should be 80x90px & .png format.

*Note :- better if you will not give any background to button image like in above image.

Step 13 :- Notification Shade

onlinedocumentation_15

Here you will Change

  • Toggels color using color picker or can directly enter value in textbox. 
  • Upload  notification shade background (720x1060px & .png format).

After finishing all the uploads click  next button   .

Here You are done with all theme development . Now check all the changes you made by clicking

On icons visible on left side of tool editor and confirm your theme design. 

*Check all the  dots under left side icons of tool  are Blue or not 

Step 14 :- Final Publish Step

onlinedocumentation_16

 Fill up all the fields.

  1. Theme Name.
  2. Designer Name (Your name / Your group name).
  3. Description of your theme based on your theme name or theme idea.

Congratulations You are done !!!!!!!!

Here you can see Preview of your theme by clicking on Save & Preview button

You can save your Theme .mtz file by clicking Download beta button.

When you done with all of these you can submit your theme for review

By clicking on button Submit for review button.