Allow custom UI themes

[iota97]

This allow to add other color themes to themes folder, might add a few to assets later if I manage to make something decent :)

Silly example:

I made one of the worst looking HTML page ever to help creating theme, uploaded the source here. Will improve it as well.

[hrydgard]

I've actually been thinking about an easier way to do this, which would be simply a hue and a saturation slider, then we could rotate the colors in the vertex shader when drawing the UI very cheaply. Would also be less code (though slightly less flexible since you then couldn't set the focused and unfocused colors entirely separately, etc).

Could even then drive that slider from the month to get the original PSP's seasonally changing background colors, as an option, heh.

[iota97]

That would be quite a fancy thing, I didn't thought of it. Will take a look into it :)

[hrydgard]

Actually I can take care of that, kind of wanted that feature for a while. And the sum total of the changes will probably actually be larger, come to think of it. Let's see :)

[iota97]

Well was trying to toy around as I had some spare time: https://github.com/iota97/ppsspp/tree/vertex-hue

Vulkan work fine, OpenGL can't seem to get the uniform to the shader.

Edit:
I wonder if it is worth it to do in the shader:

• With a Hue/Saturation we have no way to change lightness of colors (let's say have a dark foreground and a light background rather than viceversa).
• I'm not sure how much a hue slider is user friendly (if we can update while we slide is fine), if not we will probably end up with a few presets.
• Presets can be make anyway with "themes folder way".
• Changing the rendering feel more risky of breakage (also more testing needed for different device/API).

[hrydgard]

Ah nice. I can take it from there.

[hrydgard]

Hm, some good points there, yeah. Really like the slider though :P And some extra vertex shader work in the UI should be no big deal and hopefully not much cause for breaks...

[hrydgard]

I made an alternate branch that gets it working on all backends, and has live slider update:

https://github.com/hrydgard/ppsspp/tree/ui-tint-saturate

diff: fac0868

But yeah, it won't support switching bright and dark, and that kind of thing. In a way, I'm not sure that's a bad thing... Kinda keeps the "PPSSPP look" intact while still allowing some customization.

Not sure what is best.

[unknownbrackets]

I feel like it'd be really nice (maybe not in this pull) to also allow overriding the main zim (if not the font) per theme. Since we read all the metadata from there, this would allow customizing icons, etc.

It might also be nice to have a default ini in the repo or somewhere that has the default theme (but also like you have, still work without it.)

-[Unknown]

[iota97]

ZIM override would allow for custom touch controls too that got requested quite a few times.

Mhhhh, I got the feeling this the way to go rather than hue shift (kinda fancier with the slider but that's it).

[hrydgard]

Now I kinda feel .. why not both? You pick a theme, and then you can shift it if you don't like its colors.. Maybe it's overkill.

[iota97]

Such use cases could be covered by a web app to create or edit themes. We could also change the lightness value without changing the image redering as it happens on the vertex stage.
We could get the web interface make the ZIM file in the future too or thing like this to make it easier for the user.

But we could have both in the end, never disliked overkills in software to begin with :P

[unknownbrackets]

I do think both is not unreasonable - although I'm just very slightly concerned about Mali-400 or something dying from more complex shaders (don't pay attention, I just have paranoia from all the reported shader compile errors that make no sense and crappy mobile drivers.)

Maybe the theme ini could even have a default hue/etc. that resets it when you apply the theme? I like the idea that it could be live and change over time. There are other interesting ideas like it could take the dominant hue from the most recent game you played.

This is even making me think of how I wanted to add UIScreen transition animations.

Not trying to overcomplicate, though. But I see no reason we can't do both...

-[Unknown]

[hrydgard]

These shaders are at least quite a bit less complicated than some of the stuff we generate sometimes, so I think they'll be fine. I will test them on Mali-400 though :)

[iota97]

About this do we really need all those settings for the theme?

• Item and button aren't really consistent around the code base, we use button in a couple of place only with no much semantic difference from choice AFAICT.
• No idea where highlighted is used, can't seem to find it anywhere.
• InfoStyleBg doesn't seem to be used anywhere. Nvm this one is used in the dev screen

[hrydgard]

Yeah, let's try to minimize the number of them. Do delete any unused ones and feel free to merge as appropriate.

[hrydgard]

OK, I'm happy with this. Ready to go in?

[iota97]

Yeah, I wanted to make at least another theme at first but I'm terrible at that :)

[hrydgard]

Hm, I'm thinking about the theme names .. doesn't look like we've hooked them up for translation?

(looks like we have the same problem for the background animations too)

[iota97]

Hm, I'm thinking about the theme names .. doesn't look like we've hooked them up for translation?

This should do it: f4b5c16, I just haven't synced the lang file.

[hrydgard]

Oh that's right!

[ghost]

What Happen?
Can't see the new theme colors?

[iota97]

There isn't any new theme yet, but you may add them in /PSP/themes/whatever.ini

[ghost]

There isn't any new theme yet, but you may add them in /PSP/themes/whatever.ini

Like this? 🤣

[iota97]

Well, themes folder must be lower case.

This should help generate a valid ini: https://ppsspp-theme-editor.onrender.com/