If the default stylesheet shipped with Bersoft.Blazor package is included in the project, some of CSS variables become accessible for using in project styling.

<link href="_content/Bergsoft.Blazor/css/styles.css" rel="stylesheet" />

After the line above is included variables such as --content and --background can be used in your custom styles or inside razor marque:

Example

.style-hover {
    color: var(--content);
}

<svg style="stroke: var(--content, black)>

</svg>

Other useful variables can be --surface. This variable contains a color that is suitable for panels and other components that are separated or elevated from background layer.