A way to access colours of theme for custom CSS
|
@inherits LayoutComponentBase
@inject IJSRuntime JSRuntime
@using Syncfusion.Blazor.Buttons;
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<div class="theme-switcher">
@*Theme mode switcher*@
<SfButton @ref="ThemeMode" IsToggle="true" IsPrimary="true" Content="@themeMode" @onclick="OnThemeModeChange"></SfButton>
</div>
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
<style>
.theme-switcher {
margin-right: 24px;
}
.content.px-4 {
background-color: @SfThemeRef.GreyLight;
}
</style>
@code {
protected SfTheme SfThemeRef { get; set; }
private string themeMode = "Dark";
protected SfButton ThemeMode { get; set; }
public class SfTheme
{
public string Primary { get; set; }
public string GreyLight { get; set; }
public string GreyWhite { get; set; }
public SfTheme(string primary, string greyLight, string greyWhite)
{
Primary = primary;
GreyLight = greyLight;
GreyWhite = greyWhite;
}
}
/// <summary>
/// The mode switcher OnClick event handler.
/// </summary>
protected async Task OnThemeModeChange(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
this.themeMode = ThemeMode.Content == "Dark" ? "Light" : "Dark";
// Update the SfTheme properties based on theme mode.
SfThemeRef = GetThemeStyle(ThemeMode.Content);
// Change Syncfusion theme from JavaScript based on selected theme mode.
await JSRuntime.InvokeAsync<object>("ChangeTheme", themeMode);
}
protected SfTheme GetThemeStyle(string themeMode = "Light")
{
return themeMode == "Dark" ? new SfTheme("#0070f0", "#acacac", "#6e6e6e") : new SfTheme("#317ab9", "#cccccc", "#ffffff");
}
protected override void OnInitialized()
{
SfThemeRef = GetThemeStyle();
}
} |
function ChangeTheme(theme) {
var themeMode = theme !== 'Dark' ? '-dark' : '';
var newlink = document.createElement('link');
newlink.setAttribute('id', 'sf-theme');
newlink.setAttribute('rel', 'stylesheet');
newlink.setAttribute('rel='nofollow' href', `_content/Syncfusion.Blazor/styles/bootstrap${themeMode}.css`);
var prevLink = document.getElementById('sf-theme');
var head = document.getElementsByTagName('head')[0];
head.appendChild(newlink);
newlink.onload = () => {
prevLink.parentElement.removeChild(prevLink);
}
}
|
Hi Shimaz,
The other two are not working because those values are not set to a property as we did for the working one. You can apply the primary color to a property as shown below,
Please find the following sample for reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BLAZOR~12083129909
Additionally, to customize our Syncfusion Blazor component theme you can follow any of the following solutions:
Customize using Web Compiler: Customize using Web Compiler: You can customize our existing themes by overriding theme variables using the npm blazor-themes package directly or through the LibMan Library Manager. For more details, please check out the following UG documentation links:
https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference
https://blazor.syncfusion.com/documentation/appearance/themes#libman
Customization and Theme Generation: You can customize the styles and generate a new theme that suits your preferences. Please refer to the following link for reference: https://blazor.syncfusion.com/documentation/appearance/theme-studio
CSS Overrides: Alternatively, you can override specific CSS styles. You can find the details regarding this at styles and appearance section. Please refer to the following some links for reference:
https://blazor.syncfusion.com/documentation/radio-button/style-and-appearance
https://blazor.syncfusion.com/documentation/check-box/style-and-appearance
If we misunderstood your query, could you please provide us with more details regarding your requirement?
Regards,
Bharat Ram H
Hi Shimaz,
Yes, as mentioned in our previous update, you can customize our existing themes by overriding theme variables using the npm blazor-themes package. For more details, please check out the following UG documentation links: https://blazor.syncfusion.com/documentation/appearance/themes#npm-package-reference
In your case, if you need to customize the primary color of all components in Bootstrap theme, you have to override the variable of our theme, as shown below:
custom.scss
$brand-primary: pink !default;
/* @import 'blazor-themes/SCSS-Themes/<Theme name>.scss'; */ @import 'blazor-themes/SCSS-Themes/bootstrap.scss'; |
Please refer to the following image and sample for reference:
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1119714456
If we misunderstood your query, could you please provide us with your specific use case?
Regards,
Bharat Ram H
