P11 Blazor UI Library – Bootstrap 5.3 Components

P11MonoMode (Mono-Theme Switcher)

The P11MonoMode component provides essential accessibility features by allowing users to toggle a high-contrast monochromatic theme. Users can select custom **Primary** (foreground) and **Secondary** (background) colors, which are dynamically applied to specific CSS variables (`--light` and `--dark`) across the application to enhance readability.

This component is best used with the **Two-Way-Binding** feature (@bind-ValueSwitch, @bind-ValuePrimary, @bind-ValueSecondary) to manage the state (on/off and selected colors) from a parent component.

Application example and live preview

Below is a demonstration of the P11MonoMode component. Note how the Mono-Mode requires the application to utilize CSS variables (like --tpc-color-light and --tpc-color-dark) in its general styling for the effect to work.

Enable Monomode

Primary color (Background)

#ffffff

Secondary color (Foreground)

#000000

Current status:

Mono mode active: False

Primary color: #ffffff

Secondary color: #000000

Implementation

<P11MonoMode @bind-ValueSwitch="_valueSwitch"
             LabelSwitch="Enable Monomode"
             LabelPrimary="Primary color (Background)"
             @bind-ValuePrimary="_valuePrimary"
             LabelSecondary="Secondary color (Foreground)"
             @bind-ValueSecondary="_valueSecondary"
             CssCustomerDefault="@_cssDefault"
             CssCustomerMono="@_cssMono"
             ButtonOrientation="ButtonOrientation.Vertical"
             GapSize="3" />

<div class="mt-4 p-3 border rounded">
    <strong>Current status:</strong>
    <p>Mono mode active: <code>@_valueSwitch</code></p>
    <p>Primary color: <code>@_valuePrimary</code></p>
    <p>Secondary color: <code>@_valueSecondary</code></p>
</div>

@code {
    private bool _valueSwitch = false;
    private string _valuePrimary = "#ffffff";
    private string _valueSecondary = "#000000";

    private readonly string _cssDefault = CssColorThemeBootstrapAndMono.CssBootstrapColor;
    private readonly string _cssMono = CssColorThemeBootstrapAndMono.CssMonoColor;
}

Custom CSS Variables and Fallbacks

When providing custom CSS strings via CssCustomerDefault and CssCustomerMono, it is crucial to also specify the names of the CSS variables that the component should update with the user-selected colors. This is done using the CssVariableLight and CssVariableDark parameters.

Example CSS Variable Definition (In your custom `.css` files)

:root {
    /* Set by ValuePrimary (Light/Background) */
    --my-primary-color: #FFFFFF;
    --my-primary-color-rgb: 255, 255, 255;
    
    /* Set by ValueSecondary (Dark/Foreground) */
    --my-secondary-color: #0A0A0A;
    --my-secondary-color-rgb: 10, 10, 10;
}
.my-mono-theme {
    color: var(--my-secondary-color);
    background-color: var(--my-primary-color);
}

Component API (P11MonoMode)