Tutorial: Adding simple themes to Synthesia on Android

Collaborate with other modders to make Synthesia the way you want it.
Always the latest versions: [ colors.xml | ui.xml ]
Read the Getting Started topic to learn how important it is to MERGE YOUR CHANGES every time you download a new dev preview.
Post Reply
BadCase
Posts: 2

Post by BadCase »

Tutorial for adding simple themes to Synthesia on Android

First I wanted to say thanks for the amazing app my kids and I are enjoying it immensely.

Tools Used:
APK Editor Pro (I am using version 1.10.0)
http://colorizer.org/
Synthesia APK https://apkcombo.com/synthesia/com.synthesia.synthesia/ (This is the current version that Android uses when installing via the Google Play Store)

Step 1:
Download and Install APK Editor Pro and Color Convertor.
Download but do not install the original Synthesia APK.

Step 2:
Open APK Editor Pro and press the "Select and APK File"
Screenshot_20201204-135233_APK Editor Pro.jpg
Screenshot_20201204-135233_APK Editor Pro.jpg (121.22 KiB) Viewed 7004 times
Navigate to your "Download" folder and select the Synthesia APK you downloaded.
Screenshot_20201204-135801_APK Editor Pro.jpg
Screenshot_20201204-135801_APK Editor Pro.jpg (129.97 KiB) Viewed 7004 times
Press "Full Edit (RESOURCE RE-BUILD)"
Screenshot_20201204-135810_APK Editor Pro.jpg
Screenshot_20201204-135810_APK Editor Pro.jpg (164.9 KiB) Viewed 7004 times
Press "Decode All Files".
Screenshot_20201204-135812_APK Editor Pro.jpg
Screenshot_20201204-135812_APK Editor Pro.jpg (140.52 KiB) Viewed 7004 times
Step 3:
Press "Files" the bottom of the screen and then press the "assets" folder
Screenshot_20201204-135830_APK Editor Pro.jpg
Screenshot_20201204-135830_APK Editor Pro.jpg (135.23 KiB) Viewed 7004 times
Press the "settings" folder
Screenshot_20201204-135834_APK Editor Pro.jpg
Screenshot_20201204-135834_APK Editor Pro.jpg (131.9 KiB) Viewed 7004 times
Press the "colors.xml file.
Screenshot_20201204-135838_APK Editor Pro.jpg
Screenshot_20201204-135838_APK Editor Pro.jpg (302.36 KiB) Viewed 7004 times
Step 4:
Press the search button 🔎 at the bottom of the screen and paste "Tangerine" into the box in the upper right and press the search button 🔎.
Screenshot_20201204-135941_APK Editor Pro.jpg
Screenshot_20201204-135941_APK Editor Pro.jpg (560.81 KiB) Viewed 7004 times
Select and Copy this section.

<theme id="Tangerine">
<scalar id="baseHue" value="20" />
<scalar id="acceptHue" value="200" />
</theme>

Now Paste it directly above or below so it appears like this.
Screenshot_20201204-140011_APK Editor Pro.jpg
Screenshot_20201204-140011_APK Editor Pro.jpg (540.6 KiB) Viewed 7004 times
Change the "theme id" to the name you want for your theme.

Step 5:
Now go to Colorizer.org and scroll to "HSV / HSB"

Set "Saturation" to 91

Set "Value/Brightness" to 70
Screenshot_20201204-140042_Chrome.jpg
Screenshot_20201204-140042_Chrome.jpg (546.49 KiB) Viewed 7004 times
Step 6:
Now adjust "Hue" until you have your desired baseHue (Primary color of your theme) and copy the "Hue" value.
Screenshot_20201204-140102_Chrome.jpg
Screenshot_20201204-140102_Chrome.jpg (547.19 KiB) Viewed 7004 times
Switch back to APK Editor Pro and select the 20 in the "baseHue" line and paste your new value.
Screenshot_20201204-140152_APK Editor Pro.jpg
Screenshot_20201204-140152_APK Editor Pro.jpg (539.26 KiB) Viewed 7004 times
Step 7:
Switch back to Colorizer.org and adjust "Hue" until you have the desired acceptHue (Button color on home screen of Synthesia).
Screenshot_20201204-140212_Chrome.jpg
Screenshot_20201204-140212_Chrome.jpg (532.57 KiB) Viewed 7004 times
Switch back to APK Editor Pro and select the 200 in the "acceptHue" line and paste your new value.
Screenshot_20201204-140223_APK Editor Pro.jpg
Screenshot_20201204-140223_APK Editor Pro.jpg (536.85 KiB) Viewed 7004 times
Step 8:
Press and hold "colors.xml" until a menu pops up and then press "Extract" and then "OK" to save a copy of your changes so you can easily make them again if the Synthesia app updates
Screenshot_20201204-140534_APK Editor Pro.jpg
Screenshot_20201204-140534_APK Editor Pro.jpg (293.08 KiB) Viewed 7004 times
Step 9:
Press your devices back < button and press "SAVE" when prompted.
Screenshot_20201204-140315_APK Editor Pro.jpg
Screenshot_20201204-140315_APK Editor Pro.jpg (528.75 KiB) Viewed 7004 times
Now press "Build" in the upper right corner.


Upon completion an "Install" and possibly "Remove" button will appear (If Synthesia is already installed "Remove" if it is) now press the "Install" button.
Screenshot_20201204-140408_APK Editor Pro.jpg
Screenshot_20201204-140408_APK Editor Pro.jpg (109.54 KiB) Viewed 7004 times
Open Synthesia and your theme will now appear in the "Settings>Color Theme" menu.
Screenshot_20201204-144131_Synthesia.jpg
Screenshot_20201204-144131_Synthesia.jpg (254.32 KiB) Viewed 7003 times
Screenshot_20201204-144136_Synthesia.jpg
Screenshot_20201204-144136_Synthesia.jpg (311.79 KiB) Viewed 7003 times
I am putting together another tutorial for complex themes like "Synthesia Classic" as well as one to show you how to add your own midis to the apk with menus and sub menus for them in the songs list.
Post Reply