Custom Styling

Tesserae components ship with defaults that match the Curiosity workspace theme. There are three levers for changing them, in increasing order of "blast radius":

1. Inline styling on a single component.
2. CSS classes on a group of components.
3. Theme overrides that affect every component on the page.

1. Inline styling

The fluent API exposes the common CSS properties directly:

TextBlock("Notice").SemiBold()
                   .TextCenter()
                   .Background("#FFF7E6")
                   .Padding(8.px())
                   .Border("1px solid #F0C674");

Inline is fine for one-offs. If you find yourself repeating the same chain in multiple places, lift it into a helper or a CSS class.

2. CSS classes

Add a class with .Class("...") and pair it with a stylesheet shipped under wwwroot/:

TextBlock("Warning").Class("danger-banner");

/* wwwroot/styles.css */
.danger-banner {
  background: #FEE2E2;
  border-left: 4px solid #DC2626;
  padding: 12px 16px;
  font-weight: 600;
}

The h5 build copies anything in wwwroot/ into the bundle, and the workspace serves them alongside index.html. Reference your stylesheet from App.Initialize if it isn't auto-included:

App.AddStylesheet("/styles.css");

3. Theme overrides

Curiosity exposes the workspace theme as CSS variables. Override them at :root to retheme the whole UI:

:root {
  --curiosity-primary:        #0443D3;
  --curiosity-primary-hover:  #0331A0;
  --curiosity-background:     #FFFFFF;
  --curiosity-surface:        #F7F9FC;
  --curiosity-text:           #01133C;
  --curiosity-text-muted:     #5B6E91;
  --curiosity-border:         #E2E8F0;
  --curiosity-radius:         8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --curiosity-background:   #0A0F1F;
    --curiosity-surface:      #121A2E;
    --curiosity-text:         #E6ECF6;
    --curiosity-border:       #2A3552;
  }
}

Theme.Primary.Background, Theme.Primary.Hover, etc. are C#-side accessors for the same variables — use them from code so your one-offs stay consistent:

TextBlock("Heading").Background(Theme.Primary.Background)
                    .Color(Theme.Primary.Foreground);

Dark mode

Curiosity respects prefers-color-scheme by default. If you've added custom CSS, make sure to provide dark-mode equivalents — either through @media (prefers-color-scheme: dark) or by listening for the workspace's theme-changed event:

App.OnThemeChanged += isDark =>
{
    document.body.classList.toggle("theme-dark", isDark);
};

Accessibility checklist

• Color contrast ≥ 4.5:1 for text, 3:1 for large text.
• All interactive components have a visible :focus outline.
• Icons in SidebarButton and Button keep their text labels — never icon-only.
• Animations honor prefers-reduced-motion.

Cross-links

• Tesserae basics — the components you'll be styling.
• Tesserae theming reference for the upstream theming API.
• Development workflow — wwwroot/ is copied as part of the bundle.