How can I have more control over the theme background color?

[danieljfarrell]

I am using the example application to explore how SukiUI theme looks and feels.

I created a new theme using blue and black colours (I release this is virtually identical to the build-in "Blue" theme in Dark mode).

Using Flat background style the actual background colour is a little red hint.

Changing to Gradient background style the colour is a little too blue (for what I'm aiming at).

I appreciate theming is actually quite hard and SukiUI does an amazing job with the defaults.

I noticed background shaders here https://github.com/kikipoulet/SukiUI/tree/main/SukiUI/Content/Shaders/Background and the dark theme here https://github.com/kikipoulet/SukiUI/blob/main/SukiUI/ColorTheme/Dark.axaml

Do you think I could change attributes in either the Dark.axaml or add a new shader to achieve more control over the colour of the background? I would like to achieve something like visual studio

[sirdoombox]

Honestly it'd be easier to provide a custom shader to SukiBackground as you need them, the API for it is quite simple, the hardest bit is having to write SKSL if you're not familiar but it's a very simple language and ultimately all you're doing is returning a vec4 for each pixel which is in rgba format in the 0-1.0 range. The defaults are what they are and are just a representation of what we feel "works" out of the box, but the system was designed to be completely customisable.

Source for our existing "Flat" shader
Source for all the different uniforms that are passed in that you can use
Source for what values are actually passed to those uniforms

You can pay attention to iDark which is 0 if it's light and 1 if the app is in dark mode (only really matters if you're supporting both), this is exactly how the existing Flat background shader decides what colour to be.

Then all you have to do is either include a YourCustomShader.sksl file as an embedded resource in your application, and then set BackgroundShaderFile="YourCustomShader" in SukiWindow or you can just put the shader in a string in C# and assign the BackgroundShaderCode="{Binding SomeShaderString}" in MVVM or just assign the property directly in code-behind.

I admit this sounds like a lot of hassle but it's really fairly simple requiring only a tiny amount of SKSL code and a single property assignment really. I also know this isn't well documented but it is an officially supported feature so I should probably get around to that.

Let me know if you need any more help, based on how you get on with it I'll tailor the documentation to make this easier for others in the future.

[danieljfarrell]

Hi ,

Thanks so much for the really complete reply, I will have a play with this and let you know how it goes!

Regards,

Dan

[kikipoulet]

@sirdoombox I was thinking that we could expand the styles to some more variants in the future, it's not like it's too heavy to include 4-5 more sksl files. Maybe we can make a discussion thread where people's can propose a shader file they use to be directly included in the library if interesting ? What do you think about that ?

It would also be a starting point for someone that want to create a custom background, as we already saw some asking for it.

[sirdoombox]

I mean people are more than willing to open PRs with as many background styles as they want (within reason), the only cost they have to us is 2-3kb per file and an extra entry in the enum to access it as a "default" style. Obviously at some point including a 3-4 line shader for simply a different colour is a bit pointless but if people have interesting ideas then I see no reason why they can't be included as options for others to use.

I think the only thing missing is documentation to really explain this feature, I should hopefully have a bit of time this weekend to put something together but can't promise anything.

[sirdoombox]

I'm not seeing any followup questions on this one and I've hopefully addressed any further questions with the docs in #330. If there are any other questions or you think the docs should be expanded feel free to reopen this issue or create a new one with any suggestions.

[danieljfarrell]

@sirdoombox @kikipoulet

Thanks very much for updating the documentation. I have been working on another project and will return to this quite soon! I am looking forward to making a background shader.