p11 UI
true-perfect-code
Version: 1.1.69

P11 Theming & Styling

The styling of P11 components is built upon the robust foundation of Bootstrap CSS variables. Developers can customize the look and feel of the entire application by overriding core Bootstrap variables like --bs-primary or --bs-body-bg. For components with custom styling not covered by Bootstrap, we've introduced our own set of dedicated CSS variables to ensure every part of the UI is customizable.
All available P11 component variables are fully documented on the Variables Documentation Page. To apply these variables dynamically at runtime, you can use the methods provided by the IThemeService, such as SetThemeFromCssFileAsync, SetScopedVariables, or ApplyOffsetToScoped.

How to Use


@using p11.UI.Services
@inject IThemeService ThemeService
ThemeService.SetScopedVariables(".btn-primary", new Dictionary<string, string> {
    { "--bs-btn-bg", "#ced1d5" },
    { "--bs-btn-color", "#ff0000" },
    { "--bs-btn-hover-bg", "#b5b8bd" },
    { "text-decoration", "overline" },
});

That's it ✔️ Simply select your Bootstrap scope, insert the variable or property, and set the required value.

Load button styles

Simulate button style from other UI libraries

Basic buttons in different Bootstrap color !changed! schemes and sizes.


Style customization examples

Setting a scope variable for button background and text color


Set any CSS property (e.g., “text-decoration: overline;”)


Change multiple scopes (e.g. ".progress, .progress-stacked").





Load a CSS file (variablesdark.css)


Load a CSS file (variableslight.css)


Load a CSS file (variablescolored.css)

Implementation

@using p11.UI.Services
@inject IThemeService ThemeService

<h4 class="mb-3">Style customization examples</h4>
<p>Setting a scope variable for button background and text color</p>
<P11Button 
    Text="Set primary button" 
    ButtonVariant="ButtonVariant.Primary" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.SetScopedVariables(".btn-primary", new Dictionary<string, string> {
            { "--bs-btn-bg", "#ced1d5" },
            { "--bs-btn-color", "#ff0000" },
            { "--bs-btn-hover-bg", "#b5b8bd" },
        });
    })"/>
<P11Button 
    Text="Remove primary scope" 
    ButtonVariant="ButtonVariant.Secondary" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.RemoveScoped(".btn-primary");
    })"/>

<br />
<hr class="border border-2 opacity-25">

<p>Set any CSS property (e.g., “text-decoration: overline;”)</p>
<P11Button 
    Text="Set primary button" 
    ButtonVariant="ButtonVariant.Primary" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.SetScopedVariables(".btn-primary", new Dictionary<string, string> {
            { "text-decoration", "overline" },
        });
    })"/>
<P11Button 
    Text="Remove primary scope" 
    ButtonVariant="ButtonVariant.Secondary" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.RemoveScopedVariable(".btn-primary", "text-decoration");
    })"/>

<br />
<hr class="border border-2 opacity-25">

<p>Change multiple scopes (e.g. ".progress, .progress-stacked").</p>
<div class="progress" 
    role="progressbar" 
    aria-label="Basic example" 
    aria-valuenow="25" 
    aria-valuemin="0" 
    aria-valuemax="100">
  <div class="progress-bar" style="width: 25%"></div>
</div>
<br />
<div class="progress" 
    role="progressbar" 
    aria-label="Basic example" 
    aria-valuenow="50" 
    aria-valuemin="0" 
    aria-valuemax="100">
  <div class="progress-bar" style="width: 50%"></div>
</div>
<br />
<div class="progress" 
    role="progressbar" 
    aria-label="Basic example" 
    aria-valuenow="75" 
    aria-valuemin="0" 
    aria-valuemax="100">
  <div class="progress-bar" style="width: 75%"></div>
</div>
<br />
<P11Button 
    Text="Change bootstrap progress-bar" 
    ButtonVariant="ButtonVariant.Success" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.SetScopedVariables(".progress-bar", new Dictionary<string, string> {
            { "background-color", "#6cfd0d;" },
        });
        ThemeService.SetScopedVariables(".progress, .progress-stacked", new Dictionary<string, string> {
            { "--bs-progress-height", "2rem" },
            { "--bs-border-radius", "1.375rem" },
        });
    })"/>
<P11Button 
    Text="Remove changes" 
    ButtonVariant="ButtonVariant.Secondary" 
    Size="Size.Large"
    OnClick="@(async() => {
        ThemeService.RemoveScoped(".progress-bar");
        ThemeService.RemoveScoped(".progress, .progress-stacked");
    })"/>

<br />
<hr class="border border-2 opacity-25">

<p>Load a CSS file (variablesdark.css)</p>
<P11Button 
    Text="Load dark mode" 
    ButtonVariant="ButtonVariant.Secondary" 
    Size="Size.Large"
    OnClick="@(async() => {
        await ThemeService.SetThemeFromCssFileAsync("wwwroot/assets/variablesdark.css");
    })"/>

<br />
<hr class="border border-2 opacity-25">

<p>Load a CSS file (variableslight.css)</p>
<P11Button 
    Text="Load light mode" 
    ButtonVariant="ButtonVariant.Light" 
    Size="Size.Large"
    OnClick="@(async() => {
        await ThemeService.SetThemeFromCssFileAsync("wwwroot/assets/variableslight.css");
    })"/>

<br />
<hr class="border border-2 opacity-25">

<p>Load a CSS file (variablescolored.css)</p>
<P11Button 
    Text="Load colored mode" 
    ButtonVariant="ButtonVariant.Danger" 
    Size="Size.Large"
    OnClick="@(async() => {
        await ThemeService.SetThemeFromCssFileAsync("wwwroot/assets/variablescolored.css");
    })"/>

<p>Load a CSS file from embedded resource (MAUI Blazor / Blazor Server solution)</p>
<P11Button 
    Text="Other UI #1"
    Style="width: 130px;"
    ButtonVariant="ButtonVariant.Warning"
    OnClick="@(() => {
        ThemeService.ClearCurrentTheme();
        buttontext = "#1 Other UI";

        // Set the assembly from where the CSS file is located (e.g. 'p11.Web.Components.Routes')
        var assemblyContainingResource = typeof(p11.Web.Components.Routes).Assembly;
        // Set the resource name (namespace + folder + filename)
        // Note: set <ItemGroup> in the .csproj file to 'EmbeddedResource' for the CSS file
        var resourceName = "p11.Web.wwwroot.assets.button_otherUI_01.css";
        ThemeService.SetThemeFromManifestResourceAsync(assemblyContainingResource, resourceName);
    })" />
/* */
/* !!! These are examples of CSS content for use with ThemeService.SetThemeFromCssFileAsync(...). !!! */
/* */
/* Dark mode */
/* Bootstrap v5.3.7 (the information is current as of August 2025) */

[data-bs-theme="dark"] {
  /* P11Accordion */
  .accordion {
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23dee2e6' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%236ea8fe' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
  }

  /* P11AccordionNative */
  .tpc-accordion-nativ {
    --tpc-accordion-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
  }

  .tpc-accordion-nativ > div {
    --tpc-accordion-content-bg: #212529;
    --tpc-accordion-content-color: #dee2e6;
  }

  /* P11Button - Base */
  .btn {
    --bs-btn-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  }

  /* Solid Buttons */
  .btn-primary {
    --bs-btn-bg: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #5a93e4;
    --bs-btn-hover-border-color: #4d89e0;
    --bs-btn-active-bg: #4d89e0;
    --bs-btn-active-border-color: #3f7fdc;
    --bs-btn-disabled-bg: #6ea8fe;
    --bs-btn-disabled-border-color: #6ea8fe;
  }

  .btn-secondary {
    --bs-btn-bg: #5a6268;
    --bs-btn-border-color: #5a6268;
    --bs-btn-hover-bg: #4a5156;
    --bs-btn-hover-border-color: #42484d;
    --bs-btn-active-bg: #42484d;
    --bs-btn-active-border-color: #3a4044;
    --bs-btn-disabled-bg: #5a6268;
    --bs-btn-disabled-border-color: #5a6268;
  }

  .btn-success {
    --bs-btn-bg: #1aa05c;
    --bs-btn-border-color: #1aa05c;
    --bs-btn-hover-bg: #168a4f;
    --bs-btn-hover-border-color: #137a45;
    --bs-btn-active-bg: #137a45;
    --bs-btn-active-border-color: #106a3b;
  }

  .btn-danger {
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #a52834;
    --bs-btn-active-bg: #a52834;
    --bs-btn-active-border-color: #8f232e;
  }

  .btn-warning {
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-bg: #e0a800;
    --bs-btn-hover-border-color: #d39e00;
    --bs-btn-active-bg: #d39e00;
    --bs-btn-active-border-color: #c69500;
  }

  .btn-info {
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-bg: #0da5d8;
    --bs-btn-hover-border-color: #0b9bcc;
    --bs-btn-active-bg: #0b9bcc;
    --bs-btn-active-border-color: #0a91c0;
  }

  .btn-light {
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
  }

  .btn-dark {
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-bg: #373b3e;
    --bs-btn-hover-border-color: #2c3034;
    --bs-btn-active-bg: #2c3034;
    --bs-btn-active-border-color: #212529;
  }

  /* Outline Buttons */
  .btn-outline-primary {
    --bs-btn-color: #6ea8fe;
    --bs-btn-border-color: #6ea8fe;
    --bs-btn-hover-bg: #6ea8fe;
    --bs-btn-active-bg: #6ea8fe;
    --bs-btn-disabled-color: #6ea8fe;
  }

  .btn-outline-secondary {
    --bs-btn-color: #5a6268;
    --bs-btn-border-color: #5a6268;
    --bs-btn-hover-bg: #5a6268;
    --bs-btn-active-bg: #5a6268;
    --bs-btn-disabled-color: #5a6268;
  }

  /* Link Button */
  .btn-link {
    --bs-btn-color: #6ea8fe;
    --bs-btn-hover-color: #8bb9fe;
    --bs-btn-disabled-color: #5a6268;
  }

  /* P11Offcanvas */
  .offcanvas {
    --bs-offcanvas-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }

  /* P11FloatingPanel */
  .tpc-floating-panel {
    --tpc-panel-bg: #1a1d20;
    --tpc-panel-border: 3px solid #495057;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }

  .tpc-floating-panel-header {
    --tpc-panel-header-bg: #0d6efd;
    --tpc-panel-header-color: #ffffff;
  }

  .tpc-floating-panel-content {
    --tpc-panel-content-bg: #212529;
    --tpc-panel-content-color: #dee2e6;
  }

  /* P11Modal */
  .modal {
    --bs-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  }

  /* P11ProgressBar */
  .progress {
    --bs-progress-bar-bg: #6ea8fe;
    --bs-progress-bg: #343a40;
  }

  /* P11Toast */
  .toast {
    --bs-toast-bg: rgba(33, 37, 41, 0.95);
    --bs-toast-border-color: rgba(255, 255, 255, 0.1);
  }
}

/* ROOT (true-perfect-code) */
:root {
    --tpc-accordion-content-bg: #212529;
    --tpc-panel-bg: #343a40;
    --tpc-panel-border: 3px solid #495057;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    --tpc-panel-header-bg: #1a1d20;
    --tpc-panel-header-color: #fff;
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-hover-color: #dee2e6;
    --tpc-panel-content-bg: #212529;
    --tpc-panel-content-color: #dee2e6;

    --bs-primary: #6ea8fe;
    --bs-secondary: #adb5bd;
    --bs-success: #75b798;
    --bs-info: #6edff6;
    --bs-warning: #ffda6a;
    --bs-danger: #ea868f;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --bs-primary-rgb: 110, 168, 254;
    --bs-secondary-rgb: 173, 181, 189;
    --bs-success-rgb: 117, 183, 152;
    --bs-info-rgb: 110, 223, 246;
    --bs-warning-rgb: 255, 218, 106;
    --bs-danger-rgb: 234, 134, 143;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;

    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;

    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;

    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-highlight-color: #dee2e6;
    --bs-highlight-bg: #664d03;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
}


/* -------------------------------------------------------- */
/* -------------------------------------------------------- */


/* */
/* !!! These are examples of CSS content for use with ThemeService.SetThemeFromCssFileAsync(...). !!! */
/* */
/* Light mode */
/* Bootstrap v5.3.7 (the information is current as of August 2025) */

/* P11Accordion */
.accordion {
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' 
        stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
}

/* P11AccordionNative */
.tpc-accordion-nativ {
    --tpc-accordion-border-radius: 0.25rem;
    --tpc-accordion-shadow: none;
}

.tpc-accordion-nativ > summary {
    --tpc-accordion-header-padding: 1rem;
}

.tpc-accordion-nativ > summary .fw-bold {
    --tpc-accordion-title-font-weight: bold;
    --tpc-accordion-title-font-size: 1rem;
}

.tpc-accordion-nativ > div {
    --tpc-accordion-content-bg: white;
    --tpc-accordion-content-padding: 1rem;
}

/* P11Button */
/* Base Button Styles */
.btn {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-bg: transparent;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-disabled-opacity: 0.65;
}

/* Solid Buttons */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5c636a;
    --bs-btn-hover-border-color: #565e64;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #565e64;
    --bs-btn-active-border-color: #51585e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #ffca2c;
    --bs-btn-hover-border-color: #ffc720;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #212529;
    --bs-btn-border-color: #212529;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #424649;
    --bs-btn-hover-border-color: #373b3e;
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4d5154;
    --bs-btn-active-border-color: #373b3e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

/* Outline Buttons */
.btn-outline-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0d6efd;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0d6efd;
    --bs-btn-active-border-color: #0d6efd;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #0d6efd;
    --bs-btn-disabled-bg: transparent;
}

.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
}

/* (Alle anderen Outline-Buttons nach demselben Muster gekürzt) */

/* Link Button */
.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
}

/* P11Offcanvas */
.offcanvas {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5;
}

/* P11FloatingPanel */
.tpc-floating-panel {
    --tpc-panel-bg: #ffffde;
    --tpc-panel-border: 3px solid #bdbdbd;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --tpc-panel-min-width: 250px;
    --tpc-panel-border-radius: 5px;
}

.tpc-floating-panel-header {
    --tpc-panel-header-bg: #00007b;
    --tpc-panel-header-color: #fff;
    --tpc-panel-header-radius: 4px;
    --tpc-panel-header-padding: 3px 10px;
}

.tpc-floating-panel-title {
    --tpc-panel-title-weight: bold;
    --tpc-panel-title-size: 1.1em;
}

.tpc-floating-panel-close {
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-margin-left: 10px;
}

.tpc-floating-panel-close:hover {
    --tpc-panel-close-hover-color: #bdbdbd;
}

.tpc-floating-panel-content {
    --tpc-panel-content-bg: white;
    --tpc-panel-content-color: #333;
    --tpc-panel-content-size: 0.9em;
    --tpc-panel-content-padding: 10px 7px 5px 7px;
}

/* P11Modal */
.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
}

/* P11ProgressBar */
.progress {
    --bs-progress-height: 1rem;
    --bs-progress-font-size: 0.75rem;
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #0d6efd;
    --bs-progress-bar-transition: width 0.6s ease;
}

/* P11Toast */
.toast {
    --bs-toast-zindex: 1090;
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
    --bs-toast-spacing: 1.5rem;
    --bs-toast-max-width: 350px;
    --bs-toast-font-size: 0.875rem;
}

/* ROOT (true-perfect-code) */
:root {
    --tpc-accordion-border-radius: 0.25rem;
    --tpc-accordion-shadow: none;
    --tpc-accordion-header-padding: 1rem;
    --tpc-accordion-title-font-weight: bold;
    --tpc-accordion-title-font-size: 1rem;
    --tpc-accordion-content-bg: white;
    --tpc-accordion-content-padding: 1rem;
    --tpc-drawer-transition-duration: 0.3s;
    --tpc-drawer-z-index: 1060;
    --tpc-drawer-width: 300px;
    --tpc-drawer-height: 250px;
    --tpc-drawer-padding: 1rem;
    --tpc-drawer-title-font-size: 1.25rem;
    --tpc-drawer-title-font-weight: 500;
    --tpc-drawer-close-hover-opacity: 0.75;
    --tpc-drawer-close-top-offset: 1rem;
    --tpc-drawer-close-right-offset: 1rem;
    --tpc-drawer-overlay-z-index: 1059;
    --tpc-panel-bg: #ffffde;
    --tpc-panel-border: 3px solid #bdbdbd;
    --tpc-panel-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --tpc-panel-min-width: 250px;
    --tpc-panel-border-radius: 5px;
    --tpc-panel-header-bg: #00007b;
    --tpc-panel-header-color: #fff;
    --tpc-panel-header-radius: 4px;
    --tpc-panel-header-padding: 3px 10px;
    --tpc-panel-title-weight: bold;
    --tpc-panel-title-size: 1.1em;
    --tpc-panel-close-color: #fff;
    --tpc-panel-close-hover-color: #bdbdbd;
    --tpc-panel-close-margin-left: 10px;
    --tpc-panel-content-bg: white;
    --tpc-panel-content-color: #333;
    --tpc-panel-content-size: 0.9em;
    --tpc-panel-content-padding: 10px 7px 5px 7px;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", 
        "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 
        "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
    --bs-border-width: 1px;
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    --bs-focus-ring-width: 0.25rem;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
}

Component API

Parameter Type Default Description
scopeName string? null Name of the scope bootstrap class, see <code>Common bs-var</code> or <code>All bs-var</code> here in the documentation. However, the bootstrap scope of the individual elements can also be found via inspection in the browser.
variables Dictionary<string, string> null Set the parameter as the value to change the scope (e.g., '--bs-progress-height', '2rem').
Events
SetScopedVariables - Used for setting the scoped variables.
RemoveScopedVariable - Used to remove the scoped variables.
RemoveScoped - Used to remove the whole scope.
SetThemeFromCssFileAsync - Used to set the bootstrap property values from a css-file.
An unhandled error has occurred. Reload 🗙