# Aurelia 2 and Microsoft FAST

**URL:** <https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328>\
**Category:** vNext\
**Created:** [July 20, 2021, 4:40am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328 "2021-07-20T04:40:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 20, 2021, 4:40am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/1 "2021-07-20T04:40:44Z")

</div>

I am looking for some help with using Microsoft FAST with Aurelia v2.  
I have read through the information on the Aurelia docs [here](https://docs.aurelia.io/reference/examples/integration/ms-fast).  
I have read through the information on the Microsoft FAST docs [here](https://www.fast.design/docs/integrations/aurelia).

It seems that there have been some changes to the Aurelia interfaces, that now mean that the suggested code for AureliaFastAdapter doesn’t work.

Does anyone have a working example of this that they can share here?

P.S. I am using:  
@microsoft/fast-components@2.2.3  
aurelia@2.0.0-alpha.12

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 20, 2021, 4:56am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/2 "2021-07-20T04:56:54Z")

</div>

In the doc from MS FAST, it should be changed from

```auto
AppTask.with(IContainer).beforeCreate().call(container => {

```

to

```auto
AppTask.beforeCreate(IContainer, container => {

```

Maybe we should create a PR to FAST doc

---

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 20, 2021, 5:04am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/3 "2021-07-20T05:04:39Z")

</div>

From the code on the FAST site, there is also this error:

Module ‘“aurelia”’ has no exported member ‘IAttrSyntaxTransformer’.  
If I change it to IAttrMapper it appears to compile.

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 20, 2021, 5:05am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/4 "2021-07-20T05:05:59Z")

</div>

The `IAttrTransformer` has been renamed to `IAttrMapper`, it’s no longer transforming(mutating) stuff. Only maps.

---

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 20, 2021, 5:07am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/5 "2021-07-20T05:07:23Z")

</div>

Also, the code sample uses:  
import {  
FASTDesignSystemProvider,  
FASTCard,  
FASTButton  
} from ‘@microsoft/fast-components’;

but I think that might have changed to lowercase, e.g.:  
fastDesignSystemProvider,  
fastCard,  
fastButton

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [July 20, 2021, 5:08am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/6 "2021-07-20T05:08:44Z")

</div>

Fast recently moved to v2, maybe there’ some changes on that side. It’d be great if you could help correct the doc there. @ben-girardet created the initial version of the doc, he’s been working with it.

---

<div class="post-metadata">

**Author:** ![ben-girardet](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ben-girardet/32/333_2.png) [@ben-girardet](https://discourse.aurelia.io/u/ben-girardet)\
**Post date:** [July 20, 2021, 6:36am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/7 "2021-07-20T06:36:04Z")

</div>

Hi Stuart,

As @bigopon said I’ve been working with FAST and I did follow along with the new v2 of FAST. I confirm that the doc is out of date, I can help with fixing this.

Meanwhile I’ve also published a small wrapper that you can simply use and your Aurelia 2 application will be ready to work with FAST. It’s here:

> **[aurelia-fast-adapter](https://www.npmjs.com/package/aurelia-fast-adapter)**
>
> Enables better interactions between Aurelia 2 applications and FAST web-components. Adds two-way binding for components and provides a FAST implementation of Aurelia Dialog Service.

This wrapper will:

- teach aurelia two-way bindings for fast components
- provide a custom renderer to use [fast-dialog](https://www.fast.design/docs/components/dialog/) with the [aurelia dialog service](https://docs.aurelia.io/developer-guides/dialog#the-dialog-service-apis)

And now with FAST you can change the prefix of the components if you need, the wrapper can also work with custom prefix.

Don’t hesitate to reach out to me if you have questions.

---

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 20, 2021, 10:13pm UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/8 "2021-07-20T22:13:49Z")

</div>

Hi @ben-girardet  
Thank you for your quick response, and the work you’ve done in creating the wrapper.  
For the purpose of testing, I have created a new Aurelia v2 project, using:  
`npx make aurelia`  
I used the default Typescript project.  
I installed FAST using:  
`npm install --save @microsoft/fast-components @microsoft/fast-element lodash-es`  
I installed the Aurelia FAST adapter using:  
`npm install aurelia-fast-adapter`  
I made the changes to main.ts to Register the FASTAdapter  
I changed the my-app.html to this:

```auto
  <fast-design-system-provider use-defaults>
    <fast-card>
      <h2>${message}</h2>
      <fast-button appearance="accent" click.trigger="onClick()">Click Me</fast-button>
    </fast-card>
  </fast-design-system-provider>

```

However when I run the project, the HTML is rendered without any styles.  
 ![Screen Shot 2021-07-21 at 10.12.09 AM](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/a/a47acf56645436d3eaec2912dcec71b9d1089604.png)

I’ve obviously missed a step - what do I need to do to get it to look pretty?  
BTW - these are the versions of modules:  
“@microsoft/fast-components”: “2.2.3”,  
“@microsoft/fast-element”: “1.4.0”,  
“aurelia”: “2.0.0-alpha.13”,  
“aurelia-fast-adapter”: “1.0.3”,  
“lodash-es”: “4.17.21”

---

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 21, 2021, 3:23am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/9 "2021-07-21T03:23:23Z")

</div>

Update: I found this code snippet [here](https://www.npmjs.com/package/@microsoft/fast-components):

```auto
import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    Object.values(allComponents).map(definition => definition())
);

```

which now correctly shows all the components,  
 ![Screen Shot 2021-07-21 at 5.07.12 PM](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/6/6a41a3be867140a0f2933b0aa47eceddaa113085.png)

But now I’m stuck with trying to change the colors, e.g. background color of the page. I’m guessing I am missing some basics around how to use FAST, so @ben-girardet - do you have any suggestions about that?

---

<div class="post-metadata">

**Author:** ![Stuart](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/stuart/32/664_2.png) [@Stuart](https://discourse.aurelia.io/u/Stuart)\
**Post date:** [July 21, 2021, 10:13pm UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/10 "2021-07-21T22:13:49Z")

</div>

UPDATE: For anyone following this thread, the solution was to add this in the style for the page:

```auto
body {
  background-color: var(--fill-color);
  color: var(--neutral-foreground-rest);
}

```

And the documentation on the FAST site has now been updated to reflect the current status of the project.

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [December 23, 2021, 9:42pm UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/11 "2021-12-23T21:42:37Z")

</div>

I would need some guidance to customize FAST design components to fit our brand color/styles.

I got started with a simple Aurelia v2 project and followed instructions to add FAST: [Aurelia | FAST](https://www.fast.design/docs/integrations/aurelia/)

I got the basic examples working with ease. What I couldn’t figure out was how to apply custom colors and styles globally, it feels like it should be easy to do.

I can see from the FAST website that there should be options to customize colors and styles:

 ![Screenshot 2021-12-23 at 22.52.37](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/2X/c/c5de5cced59e5a615eb2323a4f5c1e4d0c4db886.png)

I found a section from the documentation, where it shows how to change styles for the individual components: [Configuring components during registration](https://www.fast.design/docs/design-systems/fast-frame#configuring-components-during-registration). But what I would like to do is use the provided fast-components and set my custom global accentBaseColor, border and etc values.

---

<div class="post-metadata">

**Author:** ![case112](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/case112/32/2186_2.png) [@case112](https://discourse.aurelia.io/u/case112)\
**Post date:** [December 27, 2021, 3:43pm UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/12 "2021-12-27T15:43:58Z")

</div>

**UPDATE:** I managed to solve this problem. I couldn’t find an example for changing the default FAST theme accent color or corner radius in the documentation. I did some digging in their [Discord](https://discord.gg/FcSNfg4) and found a good [example](https://stackblitz.com/edit/typescript-tkcicz) that demonstrated the steps needed to customize my theme.

I ended up with my **main.ts** file looking like this:

```auto
import Aurelia, { RouterConfiguration } from 'aurelia';
import { FASTAdapter } from 'aurelia-fast-adapter';
import { MyApp } from './my-app';
import {   
  provideFASTDesignSystem,
  allComponents,
  accentPalette,
  PaletteRGB,
  SwatchRGB,
  controlCornerRadius,
  strokeWidth,
  Switch
} from '@microsoft/fast-components';
import { parseColorHexRGB } from '@microsoft/fast-colors';

//customizing theme properties
accentPalette.setValueFor(
  document.body,
  PaletteRGB.from(SwatchRGB.from(parseColorHexRGB('#D83B01')))
);
controlCornerRadius.setValueFor(document.body, 10);
strokeWidth.setValueFor(document.body, 2);

provideFASTDesignSystem()
  .register(
    allComponents
  );

Aurelia
  .register(RouterConfiguration)
  .register(FASTAdapter)
  .app(MyApp)
  .start();

```

Another thing I got interested in was light/dark mode switching since FAST supports that. I found another example that demonstrates that feature in a [plain typescript project](https://stackblitz.com/edit/typescript-p8l2p3?embed=1&file=index.ts). Unfortunately I’m not able to translate that example to my Aurelia app. I’m getting an error: _Uncaught TypeError: toggle is null_

I’m able to change my app to dark mode with a line of code:

```auto
baseLayerLuminance.setValueFor(document.body, StandardLuminance.DarkMode);

```

Instead of having to statically change the mode it would be great if the app could change it for the user according to their system settings. **What would be the ‘Aurelia way’ of solving this?**

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [December 28, 2021, 5:46am UTC](https://discourse.aurelia.io/t/aurelia-2-and-microsoft-fast/4328/13 "2021-12-28T05:46:15Z")

</div>

thats not aurelia specific but can be done with media query matches [macos darkmode - How do I detect dark mode using JavaScript? - Stack Overflow](https://stackoverflow.com/a/57795495)