This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(252.8, 33%, 34%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ECH%3C/text%3E%3C/svg%3E)
For a Teams app, I am trying to use theme color schemes described here:
https://fluentsite.z22.web.core.windows.net/0.51.4/color-schemes
When I type theme.siteVariables in VS Code, I don't get any intellisense for colors:
What am I missing here? Do I need to install additional modules, beyond @fluentui/react-northstar? Could you point me to instructions or examples on how to get intellisense for Fluent UI Northstar?
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(198.4, 95%, 29%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EMM%3C/text%3E%3C/svg%3E)
Hi @Christophe Humbert , You need to use the Provider.Consumer to access the theme. For more details Please look at this example.
Thanks for the reply. I added a Provider.Consumer to my code, but the issue is the same: intellisense only gives me fontSizes as choice.
Please look at this sample code and let me know if the issue still persists.
I tried your code, same issue (screenshot below). Also, note that I am trying to reuse the default Teams themes, not trying to build a custom one.
Would you happen to have a working example I could look at, for example on Codepen or CodeSandbox?
If you want to use defualt theming just import some components and start using them.
That's what I did already, and that part is working as expected. However this is not answering my question, which is on intellisense in Visual Studio code. And I don't want to use default theming, I want to use the theme set up by the Teams owner (default, dark or high contrast).
I tried to repro it and its working fine. Please check the working sample here.
@Mamatha-MSFT I really appreciate your efforts to help, unfortunately your replies are not related to the question. The question is about intellisense in VSCode.
Can you please send code snippet and repro steps this will help me to repro issue at my end.
@Mamatha-MSFT You can use as code snippet the one you already have, with Provider.Consumer.
Steps:
{theme.siteVariables.brand} remove siteVariables.brand 
After talking with the Fluent UI Northstar team, it appears that full intellisense is not yet available. I'll need to open an enhancement request on github.
Hi @Christophe Humbert , I am unable to repro the issue. It is working fine for me. 
.
Please again try installing npm i @fluentui/react-northstar and let us know if the issue still persists.
Thank you @Mamatha-MSFT , I really appreciate your help and your patience. That's what I am looking for but it is not doing it for me with Northstar. Also, I wonder why you are not seeing fontSizes, which is the only one showing up for me. The only difference I can see is that you are using version 0.49.0 while I am using version 0.52.0.
@Mamatha-MSFT someone from the Fluent UI team looked at your screenshot and gave the explanation: you are using a js extension (Tab.js) while it should be ts or tsx. So what you are getting is not Fluent UI intellisense, but just regular JavaScript object intellisense.