Styling and Theming Osirion Components

This guide shows how to add OsirionStyles, switch CSS frameworks, and override styles with CSS variables.

Quick setup

<OsirionStyles FrameworkIntegration="CssFramework.Bootstrap" UseStyles="true" />

CSS variables

• Use global variables like --osirion-hero-background
• Prefer .razor.css for scoped overrides

Dark mode

• Respect prefers-color-scheme or framework toggles

Examples

:root { --osirion-logo-grayscale: 1; }
@media (prefers-color-scheme: dark) { :root { --osirion-hero-text: #eee; } }