search

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 533 forks source link

[Bug]: Custom Theme not being applied on buttons and other UI components #5743

Open MITIN33 opened 1 month ago

MITIN33 commented 1 month ago

Blazorise Version

1.6.1

What Blazorise provider are you running on?

Tailwind

Link to minimal reproduction or a simple code snippet

NA

Steps to reproduce

App.razor

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" />
    <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script src="_content/Blazorise.Tailwind/blazorise.tailwind.config.js?v=1.6.1.0"></script>
    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
    <link href="_content/Blazorise.Tailwind/blazorise.tailwind.css" rel="stylesheet" />

    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="https://unpkg.com/flowbite@1.5.4/dist/flowbite.js"></script>
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

Routes.razor

<Blazorise.ThemeProvider Theme="@theme">
    <Router AppAssembly="typeof(Program).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData="routeData" Selector="h1" />
        </Found>
    </Router>
</Blazorise.ThemeProvider>

@code {
    private Theme theme = new Theme
        {
            ColorOptions = new ThemeColorOptions
            {
                Primary = "#9f5c14",
            },
            BackgroundOptions = new ThemeBackgroundOptions
            {
                Primary = "#9f5c14",
            },
            TextColorOptions = new ThemeTextColorOptions
            {
                Primary = "#9f5c14",
            }
        };
}

What is expected?

Color should change on hover as well

What is actually happening?

Only Button color is changing

What browsers do you see the problem on?

Chrome, Microsoft Edge

Any additional comments?

No response

stsrki commented 1 month ago

I can confirm that it improperly renders the default blue color. The hover should be calculated based on the supplied color.

Going on the list.