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