mudblazor-theming

MudBlazor Theming — Egroo Design System

When to Use

• Adding a new Razor component and unsure which MudBlazor Color, Variant, or Elevation to use
• Fixing a component whose colors clash with the dark palette
• Updating scoped .razor.css overrides so they match theme colors
• Choosing typography (Typo.*) for new text elements
• Defining a new elevation tier for a new surface type

---

Palette Reference

Theme defined in src/Egroo.UI/Constants/Theme.cs — always edit that file for colour changes, never hardcode hex values in .razor files.

CSS in .razor.css files: Use the exact hex/rgba values from this table. Never invent new brand colors. Sidebar/drawer background = #1e1e1e. Active nav link: rgba(242,89,34,0.20) bg + #F25922 text.

---

Component Patterns

Buttons

@* Primary CTA (filled orange) *@
<MudButton Variant="Variant.Filled" Color="Color.Primary">Save</MudButton>

@* Secondary action *@
<MudButton Variant="Variant.Outlined" Color="Color.Secondary">Cancel</MudButton>

@* Destructive *@
<MudButton Variant="Variant.Text" Color="Color.Error">Delete</MudButton>

@* Ghost/low-emphasis *@
<MudButton Variant="Variant.Text" Color="Color.Default">Close</MudButton>

Rule: Always specify both Variant and Color. Never leave either at default when intent matters.

Text Fields / Forms

<MudTextField
    @bind-Value="model.Name"
    Label="Display Name"
    Variant="Variant.Outlined"
    Margin="Margin.Dense" />

Use Variant.Outlined throughout for consistency with the LinesInputs border color. Margin.Dense for inline/card forms.

Cards & Surfaces

<MudPaper Elevation="4" Class="pa-4">...</MudPaper>

Typography Scale

<MudText Typo="Typo.h6" Color="Color.Primary">Agent Name</MudText>
<MudText Typo="Typo.body2" Color="Color.Secondary">@description</MudText>

Chips / Status Badges

@* Active *@
<MudChip T="string" Color="Color.Success" Size="Size.Small">Active</MudChip>

@* Inactive *@
<MudChip T="string" Color="Color.Default" Size="Size.Small">Inactive</MudChip>

@* Provider tag *@
<MudChip T="string" Color="Color.Secondary" Variant="Variant.Outlined" Size="Size.Small">@provider</MudChip>

Icons

Use Color.Primary for action icons, Color.Inherit inside buttons, Color.Default for decorative icons.

<MudIcon Icon="@Icons.Material.Filled.SmartToy" Color="Color.Primary" />

AppBar / Drawer

Already set by theme palette. In .razor files use:

<MudAppBar Elevation="0" Color="Color.Dark">   @* AppbarBackground from theme *@
<MudDrawer @bind-Open="_drawerOpen" Elevation="0" Variant="@DrawerVariant.Responsive">

Elevation="0" on both — depth comes from Divider border, not shadow.

---

CSS Scoped Override Rules

When a .razor.css override is unavoidable (MudBlazor doesn't expose a theme token for that element), follow these rules:

1. Use only values from the Palette Reference table above — no new hex codes.
2. Always target via ::deep for child component styles.
3. Group overrides by component in the comment header.

/* === Nav: active link === */
.nav-item ::deep a.active {
    background-color: rgba(242,89,34,0.20); /* Primary @20% opacity */
    color: #F25922;                          /* Primary */
}

Never override in global site.css for component-specific rules — use scoped .razor.css.

---

Elevation & Depth System

---

Adding a New Component — Checklist

• Colors use Color.* enum — no inline hex in .razor markup
• Typography uses Typo.* enum on <MudText>
• Elevation matches the tier table above
• Buttons have explicit Variant + Color
• Forms use Variant.Outlined text fields with Margin.Dense
• Any CSS overrides in .razor.css use only palette values
• No new brand colors introduced outside Theme.cs

---

Theme File

See ./references/theme-tokens.md for a one-page token cheat-sheet and MudBlazor docs links.