UI personalization is one of the biggest strengths of Xiaomi’s ecosystem. MIUI 12’s shell has given users incredible flexibility in customizing their visual style, but many enthusiasts want to go further and create their own design from scratch.
The process of developing a theme may seem complicated to a beginner, but having official tools makes it much easier. You don’t need to be a professional programmer to take the first steps in the world of customization.
In this guide, we will take you through all the steps from the workspace to the final build of the project, learn which files to edit and how to avoid the typical mistakes that beginner designers make.
Preparation of working environment and tools
Before you start drawing icons, you need to prepare a software base, the main tool is the official utility Theme Editor, which allows you to compile and check themes directly on the device.
You can download the editor from the official MIUI forum or through the built-in developer mode theme store. Without this application, the creation process will be extremely difficult, since manual editing of.mtz archives requires deep knowledge of the structure.
- 📱 Xiaomi smartphone with installed shell MIUI 12 or newer
- 💻 Windows computer (for Theme Editor)
- 📦 Installed package ADB debug USB
- 🎨 Graphic Editor (Photoshop, GIMP or llustrator)
You will also need to activate the developer mode on your device. To do this, go to Settings → About Phone and press 7 times on the MIUI version. After that, a new section for engineers will appear in the menu.
💡
Use high-quality source icons in PNG format with a transparent background – this will save you from problems with artifacts when compressing the topic.
Installation and configuration of Theme Editor
After downloading the installation file, run the installer on your computer. USB-- Make sure the drivers are in debugging mode. ADB correctly installed in the system.
When the first launch, Theme Editor will ask you to log in via a Mi Account, a requirement that you can test themes on a real device in real time, and without authorization, the functionality will be stripped.
⚠️ Note: When connecting the phone, select the "File Transfer" mode and allow debugging by USB in a pop-up window on the smartphone screen, otherwise the computer will not see the device.
The program interface is divided into logical blocks: preview, file structure and element properties, where you can edit the lock screen settings, status bar and system applications.
Project structure and main files
Any MIUI 12 theme is a set of specific files with the extensions.png,.xml and.mum. Understanding their purpose is critical to successful development.
The main description.xml file contains metadata: topic name, author, version and description, and this is the data that the user will see in the theme store before installing.
Graphics resources are stored in icons, images and lockscreen folders, and it's important to keep the file name, otherwise the system will simply ignore your changes.
| File/Fader | Appointment | Format |
|---|---|---|
| description.xml | Passport of the subject | XML |
| icons/ | Application icons | PNG |
| lockscreen/ | Lock screen | PNG/XML |
| status_bar_notification_icon.png | Notification icon | PNG |
To change the system fonts, files with the.mum extension are used. Their editing requires caution, since an error in encoding can lead to the appearance of “squares” instead of text.
Creating and editing the lock screen
The lock screen in MIUI 12 has undergone significant changes, with support for depth and complex animations.Editing begins with the choice of the basic style in Theme Editor.
You can replace the background image, change the color of the clock numbers and customize the widgets. XML-code of widgets, allowing you to change their position to the accuracy of the pixel.
- 🕰️ Clock: You can change font, color and position
- 🔋 Battery indicator: percent styling and shape
- 📅 Date and widgets: calendar, steps, weather
- 🔓 Unlock slider: changing the slider graphics
Don’t forget to check how your theme looks in dark mode. In MIUI, it’s a separate set of colors that loads dynamically.
The secret of unlock animation
Working with application icons and system navigation
The most time-consuming part of the job is rendering icons. The icons folder stores graphical replacements for standard applications. You need to save the original file names so that the system knows which icon to replace.
Theme Editor allows you to import ready-made sets or draw your own directly in the editor. It is recommended to use vector graphics during the creation stage, and then export to a high-resolution raster.
System navigation (strips, buttons) is configured through files in the theme root directory. Changing the color of the navigation bar can dramatically change the perception of the interface.
⚠️ Note: Do not delete the original icon files from the project unless you replace them with your own.
For third-party applications that are not part of the standard set of Xiaomi, you can create universal masks or use the automatic generation function based on the background color.
☑️ Checking icons before assembly
Testing, compilation and publication
After you make all the edits, you need to assemble the project. Press the Build button in the editor. The program will create a.mtz file, which is the finished theme.
To test, plug your phone and press Apply. The theme will be installed on your device. Carefully check all screens: settings, calls, messages and third-party apps.
If you plan to upload the theme to the official MIUI Theme Store, you must apply for design status on the MIUI portal.
Moderators pay attention to readability, contrast of icons and the absence of bugs in system functions, and the rejection of the topic is most often due to poor graphics quality or copyright infringement on the images used.
💡
Successful publication of a theme requires not only artistic taste, but also strict adherence to the technical requirements of the MIUI platform.