Own Theme BarOptions

[madcoda9000]

I try to finish my own theme :-)

But i can not figure out on how to set the light and dark color options for the bar.

I know i have to do something like:

BarOptions = new ThemeBarOptions
        {
        DarkColors
        }

    But i dont know, do i have to specify an color array here...?

[stsrki]

Bar options have many sub models. Just try writing DarkColors = new and IntelliSense will give you a hint.

[stsrki]

Layout components have no style, You need to use the Bar component, and to apply the Theme parameter to what you want

https://blazorise.com/docs/components/bar

[madcoda9000]

ok, i understand.

Now i did it like that:

<Layout>
            <LayoutHeader Fixed >
                <Bar Breakpoint="Breakpoint.Desktop"
                     Background="Background.Dark"
                     ThemeContrast="ThemeContrast.Dark">
                    <BarBrand>
                        
                    </BarBrand>
                    <BarMenu>
                        <BarStart>
            
                        </BarStart>
                        <BarEnd>
                            <LoginDisplay />
                        </BarEnd>
                    </BarMenu>
                </Bar>
            </LayoutHeader>
            <LayoutContent>
                <div style="margin:20px !important;">
                    @Body
                </div>
            </LayoutContent>
        </Layout>

and my theme definition like that:

private Theme mtheme = new Theme
    {
        ColorOptions = new ThemeColorOptions
        {
            Primary = "#090251",
            Secondary = "#f5023c",
            Danger = "#f44336ff",
            Warning = "#ff9800ff",
            Info = "#2196f3ff",
            Success = "#00c853ff",
            Link = "#f5023c",
            Light = "#ffffff"
        },
        TextColorOptions = new()
        {
            Primary = "#090251",
            Secondary = "#f5023c",
            Danger = "#f44336ff",
            Warning = "#ff9800ff",
            Info = "#2196f3ff",
            Success = "#00c853ff"
        },
        BarOptions = new ThemeBarOptions
        {
            LightColors = new ThemeBarColorOptions
            {
                BackgroundColor = "#ffffff",
                BrandColorOptions = new ThemeBarBrandColorOptions
                {
                    BackgroundColor = "#ffffff"
                }

            },
            DarkColors = new ThemeBarColorOptions
            {
                BackgroundColor = "#090251",
                BrandColorOptions = new ThemeBarBrandColorOptions
                {
                    BackgroundColor = "#090251"
                }
            }
        }
    };

But if i set the attribute fro the bar to Background="Background.Dark" then the background is dark grey if i set it to Background="Background.Light" then the background of the bar ist light grey if i set it to Background="Background.Primary" the Background is Bootstrap blue.

I have simply no glue which option in my theme i have to set to colorize the bar...

[madcoda9000]

ok, i found it :-)

BackgroundOptions = new ThemeBackgroundOptions
        {
            Primary = "#090251"
        },

and then

Background="Background.Primary"

that did the trick

[stsrki]

Try the <Bar ThemeContrast="ThemeContrast.Light" or <Bar ThemeContrast="ThemeContrast.Dark".

[madcoda9000]

got it. Many thanks for your help!