Sidebar css change with theme change
I have used the documentation for theme: https://blazor.syncfusion.com/documentation/appearance/themes and this solution for implementing dark theme using a separate dark theme css: https://www.syncfusion.com/forums/171882/problems-with-implementing-dark-themes.
But I am facing an issue where my custom css for sidebar in mainlayout is not getting overwritten by the one in dark theme css. Is there a way to change my custom css with the dark theme one for the sidebar?
I have attached a sample showing what I am describing. I would also like to know how I can modify the text of sidebar menus in my case.
Attachment: BlazorAppTest_eb5dced5.zip
|
.e-sidebar {
top: 50px !important; /*To make the sidebar sit flush with the header*/
margin-top: 5px;
position: fixed;
/* background: linear-gradient(to right, #a4d8e3, #d5edfa);*/
color: white;
box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.4);
}
|
I would like to assign my own css background for the sidebar background and css color for the treeview text in both light and dark themes. How would I do this?
|
protected async override Task OnInitializedAsync()
{
userName = "Test User";
var theme = GetThemeName();
if(theme.Contains("dark"))
{
cssClass = "dark-treeview"; /*set class name for TreeView in dark theme */
HtmlAttribute= new Dictionary<string, object>(){{"class", "dark-sidebar" }}; /*set class name for Sidebar in dark theme */
}
else
{
cssClass = "main-treeview";
HtmlAttribute = new Dictionary<string, object>() { { "class", "sidebar-treeview" } };
}
themeName = theme.Contains("bootstrap5") ? "bootstrap5" : theme;
}
<style>
.sidebar-treeview{
background:#7db1e4; /*background for light Sidebar*/
}
.dark-sidebar{
background:#1e2731; /*background for dark Sidebar*/
}
.dark-treeview.e-treeview .e-list-item.e-active>.e-text-content .e-list-text
{
color:#097eed; /*color for dark TreeView active text*/
}
</style>
|
