Old Tutorial - LuciozUndiezz/OpenUtau_Themes GitHub Wiki
Hi! You're probably here to theme OpenUtau!
I won't delay much, I'll get straight into the point
FIRST STEPS
- Download the source code for OpenUtau from here
1A. Download UTAUColors to make themeing easier (optional)
- Download Visual Studio 2022
- Install Visual Studio with these settings
While that installs, you can go on to
-
Extract the OpenUtau code.
-
Once Visual Studio is done installing, you can open the OpenUtau.sln with Visual Studio
-
Select OpenUtau as the build target
Now you can work on making themes!
-
Open UTAU Colors (no need to install normal UTAU)
-
Make the colors to what you like, here's a guide (paraphrased from dii-nyoron:
(you should have your region set to JPN so read the Japanese in the tool, but if you don't it's fine it goes from top to bottom each column)
白键色 - Colors the white part on the keyboard
黑禮色 - Colors the black part on the keyboard
ロール色(き) - Colors the white part on the note editor
ロール色(濃) - Colors the gray part on the note editor
發線(1小節) - Colors the vertical lines under numbers/beats (0, 1, 2...)
縦線の色(1/4小節) - Colors the vertical lines that are not under numbers/beats
タイトル変更 - Gives a name to your theme(not required)
バック色 - Colors the white part that is over the keyboard and note editor
文字色 - Colors the numbers (0, 1, 2) and the horizontal line in front of C4
ロールの区切り横線 - Colors the horizontal line three notes above C4
音符の色(通常) - Colors the notes (Unselected)
音符の色(選択トップ) - Colors the notes (first selected)
音符の色(選択領域) - Colors the notes (after the first selected)
音符の文字色(通常) - Colors the notes' border and lyrics (on the unselected notes and first R) (redundant for OpenUtau)
音符の文字色(選択トップ) - Colors the notes' border and lyrics (on the first selected note and second R) (redundant for OpenUtau)
音符の文字色(選択領域) - Colors the notes' border and lyrics (on the following selected notes and third R) (redundant for OpenUtau)
休符の色(通常) - Colors the first R (redundant for OpenUtau)
休符の色(選択トッブ) - Colors the second R (redundant for OpenUtau)
休符の色(選択領城) - Colors the third R (redundant for OpenUtau)
Once done theming the mini Piano Roll, you can go on to
-
take a screenshot of the piano roll (this is important because the hex colors are NOT ACCURATE)
-
Upload the screenshot to https://color.adobe.com/create/image
-
Drag the circles on each of the colors (you can always move them to get more colors)
-
Download the Theme_Base.axaml file and move it into the OpenUtau\OpenUtau-master\OpenUtau\Colors folder
-
Use the hex colors in the palette maker and put the colors into the axaml
Now it's time to explain what each line does. The comments are self explanatory, but I'll provide screenshots I guess
EDIT THIS TRACK COLOR IS UI COLOR SORRY MY BAD
You can look at the axaml file for more It's like 7 in the morning I'm not assed enough to explain
Compiling time!
You will need to compile OpenUtau! but first, you'll have to edit some files:
You have to also have two names for your theme, an INTERNAL NAME and a FILE NAME. They have different functions
EDIT! I HAVE MADE BASE FILES FOR THIS PROCESS. IF YOU WANNA DO THIS MANUALLY THEN LOOK BELOW! CLONE THE REPO FOR BASE FILES!!!!
- You need to edit App.axaml . Scroll all the way down to
<ResourceInclude x:Key="themes-dark" Source="/Colors/DarkTheme.axaml"/>
UNDERNEATH that, you can copy and paste that as <ResourceInclude x:Key="themes-INTERNAL NAME" Source="/Colors/FILE NAME.axaml"/>
- You will need to edit App.axaml.cs . This one's kinda tricky. Scroll down to
var dark = (IResourceProvider)Current.Resources["themes-dark"]!;
You can copy and paste that underneath as var INTERNAL NAME= (IResourceProvider)Current.Resources["themes-INTERNAL NAME"]!;
There is another section where you'll have to add a line. Current.Resources.MergedDictionaries.Remove(dark);
can be copy pasted as Current.Resources.MergedDictionaries.Remove(INTERNAL NAME);
I genuenly forgot if the main axaml.cs was like this but copy paste this
// Remove all previously added themes
foreach (var dictionary in Current.Resources.MergedDictionaries.ToList()) {
`if (dictionary is IResourceProvider resourceProvider) {`
`if (resourceProvider == light || resourceProvider == dark || resourceProvider == INTERNAL NAME||`
`Current.Resources.MergedDictionaries.Remove(resourceProvider);`
`}`
`}`
}
You will ALSO need to edit here
` } else if (Core.Util.Preferences.Default.Theme == 1) {`
`Current.Resources.MergedDictionaries.Add(dark);`
`Current.RequestedThemeVariant = ThemeVariant.Dark;`
MAKE SURE THE NUMBER AFTER THE == IS ONE STEP HIGHER THAN THE LAST NUMBER (if you have one custom theme it will be 2)
- Edit Strings.axaml underneath here
<system:String x:Key="prefs.appearance.theme.light">Light</system:String>
copy paste it as <system:String x:Key="prefs.appearance.theme.INTERNAL NAME">FILE NAME (can have spaces)</system:String>
OK LAST ONE I SWEAR
- Edit PreferencesDialog,axaml, under
copy paste it as =
omfg I think it's done NOT!!
You'll need to press the build button here
You can press the filled in button (for debugging, or the hollow button so you don't have to debug)
BOOM! It should work!
I will upload all of my themes I make soon. Right now I need sleep because I've spent 10 hours straight on this hhhh
im so weak omfg help