Blazor For Kids

Styling and CSS in BlazorForKids

BlazorForKids includes a well-structured and customizable styling system out of the box. It provides clean layouts, color schemes, and component styles to help you build professional apps without worrying about design from day one. However, it also respects your design preferences — everything can be overridden or replaced entirely with your own styles.

Default Styles and Theme

Inside App.razor, BlazorForKids includes two helper components that handle the default styling setup:

        <ImportBlazorForKidsDefaultStyles />
        <ImportBlazorForKidsDefaultColorScheme />
    

• ImportBlazorForKidsDefaultStyles – Includes core layout and component CSS.
• ImportBlazorForKidsDefaultColorScheme – Adds a default color theme based on CSS variables (including light/dark support).

CSS Variables and Color Scheme

The default color scheme is defined using modern CSS variables and supports automatic light/dark switching with the light-dark(...) function. Here’s a simplified example of how it works:

            :root {
                --primary: light-dark(oklch(0.468 0.164 256.696), oklch(0.321 0 89.876));
                --primary-text: white;

                --success: oklch(0.552 0.123 157.012);
                --danger: oklch(0.592 0.202 21.239);
                
                --bg: light-dark(var(--light), var(--dark));
                --fc: light-dark(var(--light-text), var(--dark-text));

                other variables...
            }
    

BlazorForKids components use these variables internally for background, text, borders, and states (like success, danger, etc.). This makes them easy to adapt or override if you want to personalize the look of your app.

Using CSS Layers for Better Overrides

The CSS in BlazorForKids is organized using CSS Cascade Layers — a modern browser feature that makes it easier to control what styles override others. Each part of the framework is imported into its own named layer:

            // Importing BlazorForKids CSS
            @layer bk-default, bk-layout, bk-components, bk-utilities, bk-mobile;
            @import "defaults.css" layer(bk-default);
            @import "layout/layout.css" layer(bk-layout);
            @import "components/grid-view.css" layer(bk-components);
            @import "utilities.css" layer(bk-utilities);
    

Thanks to layers, when you write your own CSS, you can place it in a custom layer with a higher priority, or directly target and override the styles in the existing layers.

Full Control: Replace or Customize

BlazorForKids is developer-friendly by design. You can:

• ✅ Use the built-in styles and theme as-is
• ✅ Customize specific variables (like --primary) or classes using your own CSS
• ✅ Completely remove <ImportBlazorForKidsDefaultColorScheme /> and define your own theme from scratch
• ✅ Skip all default styles and build your own design system if desired

💡 Want to brand your app with your own colors or layout? Simply remove the default color scheme and create a new one using the same CSS variable names — your components will automatically pick up your custom theme.

Best Practices

• 🎯 Keep ImportBlazorForKidsDefaultStyles if you want all layouts and components styled properly
• 🎯 Remove ImportBlazorForKidsDefaultColorScheme if you want to define your own theme
• 🎯 Use :root to define or override CSS variables like --primary, --danger, etc.
• 🎯 Use CSS layers to safely override styles without affecting global behavior

Summary

BlazorForKids gives you a clean starting point for styling your app — with smart defaults, modern CSS practices, and full freedom to take control. Whether you want a fully custom theme or just want to tweak a few colors, the system is built to support your needs without fighting the framework.

🎨 Your app, your style — BlazorForKids provides the structure, you bring the identity.