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

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 ?

Solution

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;             
 
}