FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with Blazor

Question

I am evaluating the new Microsoft fast.design https://www.fast.design/ with fluent-design-system-provider and trying to customize the accent color for Blazor project but no luck...

This is what I did so far as per the official documentation (https://www.fast.design/docs/design-systems/fast-frame):

In my asp.net core Blazor Server Project's _Host.cshtml

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title </title>
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="Test.Main.styles.css" rel="stylesheet" />
</head>

<body>
    <fluent-design-system-provider use-defaults>
        <component type="typeof(App)" render-mode="ServerPrerendered" />

        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss"></a>
        </div>
    </fluent-design-system-provider>

    <script src="_framework/blazor.server.js"></script>
    <script type="module" src="https://unpkg.com/@@microsoft/fast-components"></script>
    <script type="module" src="https://unpkg.com/@@fluentui/web-components"></script>
    <script type="module" src="~/script/site.js"></script>
</body>
</html>

After this in my site.js I am trying to generate and replace the color pallete as mentioned in the documentation https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes

import { parseColorHexRGB } from "@microsoft/fast-colors";
import { createColorPalette } from "@microsoft/fast-components";

// Initialization
(function () {
    const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
    const provider = document.querySelector("fluent-design-system-provider");

    // change the neutral color pallete
    provider.neutralPalette = palette;    
})();

I get the following error, Uncaught TypeError: Failed to resolve module specifier "@microsoft/fast-colors". Relative references must start with either "/", "./", or "../".

How do i resolve this ?

score 0 · Answer 1 · answered Dec 25 '20 at 02:34

As far as I know, the import is used in the client application (such as Angular, Teactjs), instead of Asp.net Core Blazor. If you are create a Client application, you could check the Fast Integrations.

To integrate Fast with Asp.net Core Blazor, after installing the Fast using the following command:

npm install --save @microsoft/fast-components

You can locate the single file script build in the following location:

node_modules/@microsoft/fast-components/dist/fast-components.min.js

Copy this to your wwwroot/script folder and reference it with a script tag as described above. Code in the Razor page like this:

<script type="module" src="script/fast-components.min.js"></script>

More detail information, see Fast Integrations for Asp.net Core Blazor.

Thanks @Zhi but I already followed the steps above using ... but this will give me access to OOTB design provider in Blazor. If I cannot do the import how do i change the color palette in Asp.net Core Balzor ? — ameya, Dec 25 '20 at 05:02

score 0 · Accepted Answer · answered Jan 06 '21 at 06:17

I missed to add the complete path to the fluent components js files, referencing the correct path works well!

import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/@fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/@microsoft/fast-components";    


export function initDesignSystemProvider() {

    const designSystemProvider = document.querySelector("fluent-design-system-provider");       

    var accentBaseColor = "#204320";
    const accentPalette = createColorPalette(parseColorString(accentBaseColor));
    designSystemProvider.accentBaseColor = accentBaseColor;
    designSystemProvider.accentPalette = accentPalette;             
 
}

FAST and BLAZOR - How to change the Color Palette of fluent-design-system-provider with Blazor

2 Answers2