Blazorise Theming Options API
Configuration settings for customizing the appearance and behavior of Blazorise components.
The Blazorise Theming Options API provides developers with a set of configuration settings to tailor the appearance and behavior of Blazorise components. By adjusting these options, you can define global styles, set default component properties, and manage theme-related settings to ensure a consistent and customized user interface across your Blazor applications. This flexibility allows for seamless integration of brand guidelines and personalized design preferences.
API
Parameters
ThemeAlertOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundLevel | -10 | int? |
Defines a level of background color. Negative level values will lighten the color, while higher levels will darken. | ||
BorderLevel | -7 | int? |
Defines a level of border color. Negative level values will lighten the color, while higher levels will darken. | ||
ColorLevel | 6 | int? |
Defines a level of text color. Negative level values will lighten the color, while higher levels will darken. | ||
GradientBlendPercentage | 15f | float? |
Defines the percentage of how much the colors will blend together. | ||
ThemeBackgroundOptions
| Parameter | Default | Type |
|---|---|---|
Body | — | string |
Gets or sets the background body color. | ||
Danger | ThemeColor.Shades["500"].Value | string |
Gets or sets the background danger color. | ||
Dark | ThemeColor.Shades["800"].Value | string |
Gets or sets the background dark color. | ||
Info | ThemeColor.Shades["500"].Value | string |
Gets or sets the background info color. | ||
Light | ThemeColor.Shades["100"].Value | string |
Gets or sets the background light color. | ||
Muted | — | string |
Gets or sets the background muted color. | ||
Primary | ThemeColor.Shades["400"].Value | string |
Gets or sets the background primary color. | ||
Secondary | ThemeColor.Shades["600"].Value | string |
Gets or sets the background secondary color. | ||
SubtleTintWeight | null | int? |
Gets the percentage of lightness for the 'subtle' color effect. | ||
Success | ThemeColor.Shades["500"].Value | string |
Gets or sets the background success color. | ||
Warning | ThemeColor.Shades["500"].Value | string |
Gets or sets the background warning color. | ||
ThemeBarBrandColorOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | — | string |
Gets or sets the brand background color. | ||
ThemeBarColorOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | — | string |
Gets or sets the bar background color. | ||
BrandColorOptions | null | ThemeBarBrandColorOptions |
Gets or sets the BarBrand color options. | ||
Color | — | string |
Gets or sets the bar text color. | ||
DropdownColorOptions | null | ThemeBarDropdownColorOptions |
Gets or sets the BarDropdown color options. | ||
GradientBlendPercentage | 15f | float? |
Defines the percentage of how much the background colors will blend together. | ||
ItemColorOptions | null | ThemeBarItemColorOptions |
Gets or sets the BarDropdownItem color options. | ||
ThemeBarDropdownColorOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | — | string |
Gets or sets the background color. | ||
ThemeBarDropdownOptions
| Parameter | Default | Type |
|---|---|---|
ToggleCollapseIconName | ChevronUp | IconName |
Defines the icon name for the collapse state of the dropdown. | ||
ToggleExpandIconName | ChevronDown | IconName |
Defines the icon name for the expand state of the dropdown. | ||
ToggleIconSIze | ExtraSmall | IconSize |
Defines the size of the toggle icon for the dropdown. Possible values: DefaultExtraSmallSmallLargex2x3x4x5x6x7x8x9x10 | ||
ToggleIconVisible | null | bool? |
Defines the visibility of bar dropdown toggle icon. | ||
ThemeBarItemColorOptions
| Parameter | Default | Type |
|---|---|---|
ActiveBackgroundColor | — | string |
Gets or sets the item background color when it is selected. | ||
ActiveColor | — | string |
Gets or sets the item text color when it is selected. | ||
HoverBackgroundColor | — | string |
Gets or sets the item background color when it is hovered. | ||
HoverColor | — | string |
Gets or sets the item text color when it is hovered. | ||
ThemeBarOptions
| Parameter | Default | Type |
|---|---|---|
DarkColors | null | ThemeBarColorOptions |
Gets or sets the theme settings for the Bar dark color scheme. | ||
DropdownOptions | null | ThemeBarDropdownOptions |
Gets or sets the theme settings for the BarDropdown component. | ||
FontOptions | null | ThemeFontOptions |
Gets or sets the font options for bar navigation items. | ||
HorizontalHeight | "auto" | string |
Gets or sets the height of the Bar in horizontal mode (only for Bar that is placed inside of LayoutHeader). | ||
LightColors | null | ThemeBarColorOptions |
Gets or sets the theme settings for the Bar light color scheme. | ||
VerticalBrandHeight | "64px" | string |
Gets or sets the size of the BarBrand component. | ||
VerticalPopoutMenuWidth | "180px" | string |
Gets or sets the width of the dropdown-menu in vertical mode. | ||
VerticalSmallWidth | "64px" | string |
Gets or sets the width of the Bar in vertical collapsed mode. | ||
VerticalWidth | "230px" | string |
Gets or sets the width of the Bar in vertical mode. | ||
ThemeBasicOptions
| Parameter | Default | Type |
|---|---|---|
BorderRadius | ".25rem" | string |
Defines the size of the element border radius. | ||
ThemeBodyOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | — | string |
Gets or sets the body background color. If defined it will also override any Body. | ||
FontOptions | null | ThemeFontOptions |
Gets or sets the body font options. | ||
TextColor | — | string |
Gets or sets the body text color. If defined it will also override any Body. | ||
ThemeBorderOptions
| Parameter | Default | Type |
|---|---|---|
SubtleTintWeight | null | int? |
Gets the percentage of lightness for the 'subtle' color effect. | ||
ThemeBreadcrumbOptions
| Parameter | Default | Type |
|---|---|---|
Color | ThemeColor.Shades["400"].Value | string |
Gets or sets the breadcrumb text color. | ||
ThemeBreakpointOptions
| Parameter | Default | Type |
|---|---|---|
Desktop | "768px" | string |
Gets or sets the breakpoint size for desktop screens. Defaults to 768px. | ||
FullHD | "1200px" | string |
Gets or sets the breakpoint size for largest screens. Defaults to 1200px. | ||
Mobile | "0" | string |
Gets or sets the breakpoint size for mobile screens. Defaults to 0px. | ||
Tablet | "576px" | string |
Gets or sets the breakpoint size for tablet screens. Defaults to 576px. | ||
Widescreen | "992px" | string |
Gets or sets the breakpoint size for wide screens. Defaults to 992px. | ||
ThemeButtonOptions
| Parameter | Default | Type |
|---|---|---|
ActiveDarkenColor | 20f | float? |
Defines how much the color will darken when element is active(range 0-100). | ||
ActiveLightenColor | 25f | float? |
Defines how much the color will lighten when element is active(range 0-100). | ||
BoxShadowSize | — | string |
Gets or sets the box shadow size of the button element. | ||
BoxShadowTransparency | 127 | byte? |
Gets or sets the box shadow transparency of the button element(range 0-255) | ||
DisabledOpacity | .65f | float? |
Defined the opacity of disabled button(range 0-1). | ||
GradientBlendPercentage | 15f | float? |
Defines the percentage of how much the colors will blend together. | ||
HoverDarkenColor | 15f | float? |
Defines how much the color will darken when element is hovered(range 0-100). | ||
HoverLightenColor | 20f | float? |
Defines how much the color will lighten when element is hovered(range 0-100). | ||
LargeBorderRadius | ".3rem" | string |
Defines the button border radius when it is Large. | ||
Margin | — | string |
Gets or sets the margin for the button element. | ||
Padding | — | string |
Gets or sets the padding for the button element. | ||
Size | null | Size? |
Gets or sets the global size for button components. | ||
SmallBorderRadius | ".2rem" | string |
Defines the button border radius when it is Small. | ||
ThemeCardOptions
| Parameter | Default | Type |
|---|---|---|
ImageTopRadius | "calc(.25rem - 1px)" | string |
Defines the top radius of the image element placed inside of the card. | ||
ThemeColorOptions
| Parameter | Default | Type |
|---|---|---|
Danger | ThemeColor.Shades["500"].Value | string |
Gets or sets the danger theme color. | ||
Dark | ThemeColor.Shades["800"].Value | string |
Gets or sets the dark theme color. | ||
Info | ThemeColor.Shades["500"].Value | string |
Gets or sets the info theme color. | ||
Light | ThemeColor.Shades["100"].Value | string |
Gets or sets the light theme color. | ||
Link | ThemeColor.Shades["500"].Value | string |
Gets or sets the link theme color. | ||
Primary | ThemeColor.Shades["500"].Value | string |
Gets or sets the primary theme color. | ||
Secondary | ThemeColor.Shades["600"].Value | string |
Gets or sets the secondary theme color. | ||
Success | ThemeColor.Shades["500"].Value | string |
Gets or sets the success theme color. | ||
Warning | ThemeColor.Shades["500"].Value | string |
Gets or sets the warning theme color. | ||
ThemeContainerMaxWidthOptions
| Parameter | Default | Type |
|---|---|---|
Desktop | "960px" | string |
Gets or sets the breakpoint size for desktop screens. | ||
FullHD | "1320px" | string |
Gets or sets the breakpoint size for largest screens. | ||
Mobile | "540px" | string |
Gets or sets the breakpoint size for mobile screens. | ||
Tablet | "720px" | string |
Gets or sets the breakpoint size for tablet screens. | ||
Widescreen | "1140px" | string |
Gets or sets the breakpoint size for wide screens. | ||
ThemeDividerOptions
| Parameter | Default | Type |
|---|---|---|
Color | "#999999" | string |
Gets or sets the divider color. | ||
DividerType | Solid | DividerType? |
Gets or sets the default divider type. | ||
TextSize | ".85rem" | string |
Gets or sets the size of the divider text. | ||
Thickness | "1px" | string |
Gets or sets the divider thickness. | ||
ThemeDockLayoutOptions
| Parameter | Default | Type |
|---|---|---|
CompassZoneActiveBackground | — | string |
Active compass zone background color. | ||
CompassZoneActiveBorderColor | — | string |
Active compass zone border color. | ||
CompassZoneActiveColor | — | string |
Active compass zone text color. | ||
CompassZoneBackground | — | string |
Compass zone background color. | ||
CompassZoneBorderColor | — | string |
Compass zone border color. | ||
CompassZoneColor | — | string |
Compass zone text color. | ||
DragPreviewBackground | — | string |
Drag preview background color. | ||
DragPreviewBorderColor | — | string |
Drag preview border color. | ||
DropPreviewBackground | — | string |
Drop preview background color. | ||
DropPreviewBorderColor | — | string |
Drop preview border color. | ||
HoverBackground | — | string |
Background color used by hoverable actions inside DockLayout. | ||
PaneBackground | — | string |
Pane background color. | ||
PaneBorderColor | — | string |
Pane border color. | ||
PaneColor | — | string |
Pane text color. | ||
PaneFooterBackground | — | string |
Pane footer background color. | ||
PaneHeaderBackground | — | string |
Pane header background color. | ||
TabActiveBackground | — | string |
Active tab background color. | ||
TabActiveColor | — | string |
Active tab text color. | ||
TabCloseColor | — | string |
Tab close button color. | ||
TabsBackground | — | string |
Tabs strip background color. | ||
ThemeDropdownOptions
| Parameter | Default | Type |
|---|---|---|
GradientBlendPercentage | 15f | float? |
Defines the percentage of how much the colors will blend together. | ||
Size | null | Size? |
Gets or sets the global size for dropdown components. | ||
ToggleIconVisible | true | bool? |
Defines the visibility of dropdown toggle icon. | ||
ThemeFontOptions
| Parameter | Default | Type |
|---|---|---|
Family | — | string |
Gets or sets the font family. | ||
Size | — | string |
Gets or sets the font size. | ||
Style | — | string |
Gets or sets the font style. | ||
Weight | — | string |
Gets or sets the font weight. | ||
ThemeInputOptions
| Parameter | Default | Type |
|---|---|---|
CheckColor | — | string |
Gets or sets the checkbox color. | ||
Color | — | string |
Gets or sets the input text color. | ||
Size | null | Size? |
Gets or sets the global size for input components. | ||
SliderColor | — | string |
Gets or sets the slider text color. | ||
ThemeListGroupItemOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundLevel | -9 | int? |
Defines a level of background color. Negative level values will lighten the color, while higher levels will darken. | ||
ColorLevel | 6 | int? |
Defines a level of text color. Negative level values will lighten the color, while higher levels will darken. | ||
GradientBlendPercentage | 15f | float? |
Defines the percentage of how much the colors will blend together. | ||
ThemePaginationOptions
| Parameter | Default | Type |
|---|---|---|
LargeBorderRadius | ".3rem" | string |
Gets or sets the border radius of the large pagination. | ||
Size | null | Size? |
Gets or sets the global size for pagination components. | ||
ThemeProgressOptions
| Parameter | Default | Type |
|---|---|---|
PageProgressDefaultColor | "#ffffff" | string |
Default color of the progress bar. | ||
Size | null | Size? |
Gets or sets the global size for progress components. | ||
ThemeRatingOptions
| Parameter | Default | Type |
|---|---|---|
HoverOpacity | 0.7f | float? |
Gets or sets the mouse hover opacity for the rating item(range 0-1). | ||
ThemeSidebarOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | "#343a40" | string |
Gets or sets the background color of the sidebar. | ||
Color | "#ced4da" | string |
Gets or sets the text color of the sidebar items. | ||
Width | "230px" | string |
Gets or sets the width of the sidebar. | ||
ThemeSnackbarOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | — | string |
Default snackbar color. | ||
ButtonColor | — | string |
Default button color. | ||
ButtonHoverColor | — | string |
Default button hover color. | ||
TextColor | — | string |
Default text color. | ||
VariantBackgroundColorLevel | -3 | int? |
Defines a level of background color. Negative level values will lighten the color, while higher levels will darken. | ||
ThemeSpacingOptions
| Parameter | Default | Type |
|---|---|---|
Is0 | "0" | string |
Gets or sets the zero spacing size. | ||
Is1 | "0.25rem" | string |
Gets or sets the spacing for the extra small sizes. | ||
Is2 | "0.5rem" | string |
Gets or sets the spacing for the small sizes. | ||
Is3 | "1rem" | string |
Gets or sets the spacing for the default sizes. | ||
Is4 | "1.5rem" | string |
Gets or sets the spacing for the large sizes. | ||
Is5 | "3rem" | string |
Gets or sets the spacing for the extra large sizes. | ||
ThemeSpinKitOptions
| Parameter | Default | Type |
|---|---|---|
Color | Color.Default | Color |
SpinKit color variant. | ||
Size | — | string |
SpinKit size. | ||
ThemeStepsOptions
| Parameter | Default | Type |
|---|---|---|
StepsItemIconActive | "#007bff" | string |
Gets or sets the Step icon color for active state. | ||
StepsItemIconActiveYiq | "#ffffff" | string |
Gets or sets the Step icon contrast color for active state. | ||
StepsItemIconColor | "#adb5bd" | string |
Gets or sets the Step icon color. | ||
StepsItemIconCompleted | "#007bff" | string |
Gets or sets the Step icon color for completed state. | ||
StepsItemIconCompletedYiq | "#ffffff" | string |
Gets or sets the Step icon contrast color for completed state. | ||
StepsItemTextActive | "#28a745" | string |
Gets or sets the Step text color for active state. | ||
StepsItemTextColor | "#adb5bd" | string |
Gets or sets the Step text color. | ||
StepsItemTextCompleted | "#28a745" | string |
Gets or sets the Step text color for completed state. | ||
ThemeSwitchOptions
| Parameter | Default | Type |
|---|---|---|
BoxShadowLightenColor | 25 | float? |
Gets or sets how much the switch box-shadow will lighten(range 0-100). | ||
DisabledLightenColor | 50 | float? |
Gets or sets how much the switch disabled color will lighten(range 0-100). | ||
ThemeTableOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundLevel | -9 | int? |
Defines a level of background color. Negative level values will lighten the color, while higher levels will darken. | ||
BorderLevel | -6 | int? |
Defines a level of border color. Negative level values will lighten the color, while higher levels will darken. | ||
ThemeTextColorOptions
| Parameter | Default | Type |
|---|---|---|
Black50 | "#000000" | string |
Gets or sets the text black-50% color. | ||
Body | ThemeColor.Shades["900"].Value | string |
Gets or sets the text body color. | ||
Danger | ThemeColor.Shades["500"].Value | string |
Gets or sets the text danger color. | ||
Dark | ThemeColor.Shades["800"].Value | string |
Gets or sets the text dark color. | ||
EmphasisShadeWeight | null | int? |
Gets the percentage of depth for the 'emphasis' effect. | ||
Info | ThemeColor.Shades["500"].Value | string |
Gets or sets the text info color. | ||
Light | ThemeColor.Shades["100"].Value | string |
Gets or sets the text light color. | ||
Muted | ThemeColor.Shades["600"].Value | string |
Gets or sets the text muted color. | ||
Primary | ThemeColor.Shades["400"].Value | string |
Gets or sets the text primary color. | ||
Secondary | ThemeColor.Shades["600"].Value | string |
Gets or sets the text secondary color. | ||
Success | ThemeColor.Shades["500"].Value | string |
Gets or sets the text success color. | ||
Warning | ThemeColor.Shades["500"].Value | string |
Gets or sets the text warning color. | ||
White | ThemeColor.Shades["50"].Value | string |
Gets or sets the text white color. | ||
White50 | "#FFFFFF" | string |
Gets or sets the text white-50% color. | ||
ThemeTooltipOptions
| Parameter | Default | Type |
|---|---|---|
BackgroundColor | "#808080e6" | string |
Tooltip background color. Can contain alpha value in 8-hex formatted color. | ||
Color | "#ffffff" | string |
Tooltip text color. Can contain alpha value in 8-hex formatted color. | ||
FadeTime | "0.3s" | string |
Gets or sets the duration of the tooltip transition animation. | ||
FontSize | ".875rem" | string |
Gets or sets the tooltip font-size. | ||
MaxWidth | "15rem" | string |
Gets or sets the maximum width of the tooltip. | ||
Padding | ".5rem 1rem" | string |
Gets or sets the padding of the tooltip container. | ||
ZIndex | — | string |
Gets or sets the tooltip z-index. When null, the CSS provider's default tooltip z-index is used. | ||
ThemeVariables
| Parameter | Default | Type |
|---|---|---|
SpinKitColor | — | string |
CSS variable for defining the color of the SpinKit loader. | ||
SpinKitSize | — | string |
CSS variable for defining the size of the SpinKit loader. | ||
StepsItemIcon | — | string |
CSS variable for defining the icon color of a StepsItem component. | ||
StepsItemIconActive | — | string |
CSS variable for defining the icon color of an active StepsItem. | ||
StepsItemIconActiveYiq | — | string |
CSS variable for defining the YIQ contrast color of an active StepsItem icon. | ||
StepsItemIconCompleted | — | string |
CSS variable for defining the icon color of a completed StepsItem. | ||
StepsItemIconCompletedYiq | — | string |
CSS variable for defining the YIQ contrast color of a completed StepsItem icon. | ||
StepsItemText | — | string |
CSS variable for defining the text color of a StepsItem. | ||
StepsItemTextActive | — | string |
CSS variable for defining the text color of an active StepsItem. | ||
StepsItemTextCompleted | — | string |
CSS variable for defining the text color of a completed StepsItem. | ||
Events
ThemeBackgroundOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the color handler associated with the specified color key. | |
ThemeBreakpointOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the breakpoint handler associated with the specified breakpoint key. | |
ThemeColorOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the color handler associated with the specified color key. | |
ThemeContainerMaxWidthOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the breakpoint handler associated with the specified breakpoint key. | |
ThemeSpacingOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the spacing associated with the specified key. | |
ThemeTextColorOptions
| Event | Type |
|---|---|
this[] | Func<string> |
Gets the color handler associated with the specified color key. | |
Methods
ThemeBasicOptions
| Method | Return | Parameters |
|---|---|---|
HasOptions | bool | — |
Checks if the options has any option attribute defined.
| ||
ThemeVariables
| Method | Return | Parameters |
|---|---|---|
BackgroundColor | string | string variant |
Gets the theme background color variable name.
| ||
BackgroundSubtleColor | string | string variant |
Gets the theme background subtle color variable name.
| ||
BackgroundYiqColor | string | string variant |
Gets the theme background contrast variable name.
| ||
BorderColor | string | string variant |
Gets the theme border color variable name.
| ||
BorderSubtleColor | string | string variant |
Gets the theme border subtle color variable name.
| ||
Breakpoint | string | string name |
Gets the breakpoint variable name.
| ||
ButtonActiveBackground | string | string variant |
Generates the CSS variable for the background color of a button when active (clicked).
| ||
ButtonActiveBorder | string | string variant |
Generates the CSS variable for the border color of a button when active (clicked).
| ||
ButtonBackground | string | string variant |
Generates the CSS variable for the background color of a button with the specified variant.
| ||
ButtonBorder | string | string variant |
Generates the CSS variable for the border color of a button with the specified variant.
| ||
ButtonBoxShadow | string | string variant |
Generates the CSS variable for the box shadow of a button.
| ||
ButtonHoverBackground | string | string variant |
Generates the CSS variable for the background color of a button when hovered.
| ||
ButtonHoverBorder | string | string variant |
Generates the CSS variable for the border color of a button when hovered.
| ||
ButtonYiqActiveBackground | string | string variant |
Generates the CSS variable for the YIQ contrast background color of a button when active.
| ||
ButtonYiqBackground | string | string variant |
Generates the CSS variable for the YIQ contrast background color of a button. YIQ is used to determine text visibility on different backgrounds.
| ||
ButtonYiqHoverBackground | string | string variant |
Generates the CSS variable for the YIQ contrast background color of a button when hovered.
| ||
Color | string | string variant |
Gets the theme color variable name.
| ||
OutlineButtonActiveColor | string | string variant |
Generates the CSS variable for the text color of an outlined button when active (clicked).
| ||
OutlineButtonBoxShadowColor | string | string variant |
Generates the CSS variable for the box shadow color of an outlined button.
| ||
OutlineButtonColor | string | string variant |
Generates the CSS variable for the text color of an outlined button.
| ||
OutlineButtonHoverColor | string | string variant |
Generates the CSS variable for the text color of an outlined button when hovered.
| ||
OutlineButtonYiqColor | string | string variant |
Generates the CSS variable for the YIQ contrast color of an outlined button. YIQ is used to ensure text visibility on different background colors.
| ||
TextColor | string | string variant |
Gets the theme text color variable name.
| ||
TextEmphasisColor | string | string variant |
Gets the theme text emphasis color variable name.
| ||
VariantPageProgressIndicator | string | string variant |
Generates the CSS variable for the color of the page progress indicator with the specified variant.
| ||
VariantRatingColor | string | string variant |
Generates the CSS variable for the color of the rating component with the specified variant.
| ||
VariantStepsItemIconYiq | string | string variant |
Generates the CSS variable for the YIQ contrast color of a StepsItem icon with the specified variant. YIQ is used to adjust contrast for better visibility.
| ||
VariantStepsItemIcon | string | string variant |
Generates the CSS variable for the icon color of a StepsItem component with the specified variant.
| ||
VariantStepsItemText | string | string variant |
Generates the CSS variable for the text color of a StepsItem component with the specified variant.
| ||