🚀 Welcome to MDriven Learn –  Don’t miss the latest Release Notes.
MDrivenDesignerStylingVariables
This page was created by Hans.karlsen on 2025-04-26. Last edited by Restore-user on 2026-10-21.

These values are read by MDrivenDesigner in order to get meta info on CSS styling variables

NOTE TO EDITORS: This is referenced from within MDrivenDesigner - don't move or change the format since that would BREAK THINGS

#VariableName TypeOfValue(Color,px,double,font) Short description
#--base-bg-color color The main background
#--base-fg-color color The main font color
#--textfield-label-clr color Font color of control labels
#--btn-default-clr color Button color when no other style is applied
#--cancel-action-bg-color color The Cancel-changes button
#--cancel-action-bg-color-dark color The Cancel-changes button on hover
#--danger-color color Color on buttons with the danger style
#--danger-color-dark color Color on buttons with the danger style when hovered
#--error-clr color Background of a broken constraint of type error
#--fileupload-label-clr color
#--info-clr color Background of a broken constraint of type info
#--navbar-bg-color color The background of the top-level menu bar
#--navbar-brand-color color The font color of the app name
#--navbar-link-color color The color of global menu item text
#--primary-color color The signature color used for table row selection, Save-button, Menu-Button
#--primary-color-dark color The signature color when hovered
#--redo-action-bg-color color
#--redo-action-bg-color-dark color
#--redo-action-text-color color
#--save-action-bg-color color
#--save-action-bg-color-dark color
#--save-action-text-color color
#--select-border-clr color The color of the border of the select controls
#--sidebar-bg-color color The background of the left-side menu
#--sidebar-border-clr color
#--sidebar-divider-clr color
#--success-color color
#--success-color-dark color
#--table-bg-clr color The color of the table background
#--table-border-clr color The color of the border of the table
#--textfield-border-clr color
#--textfield-disabled-bg-clr color
#--textfield-icon-clr color
#--textfield-label-clr color
#--text-on-danger color
#--text-on-default-btn color Text on placed button actions
#--text-on-error color Foreground of a broken constraint of type error
#--text-on-info color Foreground of a broken constraint of type info
#--text-on-primary color Text used on system buttons like login
#--text-on-success color
#--text-on-warning color Foreground of a broken constraint of type warning
#--toolbar-bg-color color Toolbar background color
#--toolbar-item-color color Toolbar action text color
#--tooltip-bg-clr color
#--tooltip-text-clr color
#--undo-action-bg-color color
#--undo-action-bg-color-dark color
#--undo-action-text-color color
#--warning-color color Color on buttons with the warning style
#--warning-color-dark color Color on buttons with the warning style when hovered
#--data-table-header-text-color color The text color of the table header
#--data-table-header-bg-color color The background of the table headers
#--textfield-border-radius px
#--select-border-radius px
#--table-border-radius px The radius of the border of tables
#--table-border-width px The width of the border of tables
#--extra-small px Size of an extra-small image
#--small px Size of a small image
#--medium px Size of a medium image
#--large px Size of an image
#--extra-large px Size of an image
#--navbar-height px The height of the main menu
#--savebar-height px
#--btn-border-radius px The radius of buttons
#--tooltip-border-radius px
#--sidebar-width px The width of the left-side menu
#--base-border-radius px The radius of inputs
#--resizer-width px The size of the resizer between grid header columns
#--input-border-radius px
#--base-font-size px The size of the base font of the application
#--base-checkbox-size px
#--data-table-row-height px The height of a row in the data table
#--data-table-header-height px The height of the header row in the data table
#--sidebar-item-height px The height of actions in the left-side menu
#--sidebar-divider-alpha double
#--app-font-family font Font used for constraints
#--base-font-family font Main font of the UI
#--app-icon-font font Font used for MaterialDesign Icons
#--label-font-size px Font size of labels
#--quickgrid-row-height px Height of a Blazor quickgrid row—fixed to avoid flicker when virtualized