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

  1. Download the source code for OpenUtau from here

image

1A. Download UTAUColors to make themeing easier (optional)

  1. Download Visual Studio 2022

image

  1. Install Visual Studio with these settings

image

While that installs, you can go on to

  1. Extract the OpenUtau code.

  2. Once Visual Studio is done installing, you can open the OpenUtau.sln with Visual Studio

  3. Select OpenUtau as the build target

image

Now you can work on making themes!

  1. Open UTAU Colors (no need to install normal UTAU)

  2. Make the colors to what you like, here's a guide (paraphrased from dii-nyoron:

sddefault

(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

  1. take a screenshot of the piano roll (this is important because the hex colors are NOT ACCURATE)

  2. Upload the screenshot to https://color.adobe.com/create/image

image

  1. Drag the circles on each of the colors (you can always move them to get more colors)

  2. Download the Theme_Base.axaml file and move it into the OpenUtau\OpenUtau-master\OpenUtau\Colors folder

  3. 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

Screenshot 2024-05-01 072944

EDIT THIS TRACK COLOR IS UI COLOR SORRY MY BAD

image

Screenshot 2024-05-01 073602

Screenshot 2024-05-01 073614

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!!!!

  1. 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"/>

image

  1. 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);`

    `}`

`}`

}

image

You will ALSO need to edit here

      `  } else if (Core.Util.Preferences.Default.Theme == 1) {`

            `Current.Resources.MergedDictionaries.Add(dark);`

            `Current.RequestedThemeVariant = ThemeVariant.Dark;`

image

MAKE SURE THE NUMBER AFTER THE == IS ONE STEP HIGHER THAN THE LAST NUMBER (if you have one custom theme it will be 2)

image

  1. 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

  1. Edit PreferencesDialog,axaml, under

copy paste it as =

omfg I think it's done NOT!!

You'll need to press the build button here

image

You can press the filled in button (for debugging, or the hollow button so you don't have to debug)

BOOM! It should work!

image

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