SideNavigation component and AtlaskitThemeProvider

Hello,

I am trying to get the @atlaskit/side-navigation - SideNavigation component to render in Dark mode. I have tried enclosing it with AtlaskitThemeProvider, but to no avail.

I have created a Codesandbox with the repro:

Clearly, the component is able to be rendered in Dark mode - as seen in Atlaskit by Atlassian

Can someone please point out what I am missing and how to fix it?

Thank you so much!

Hey @krsnaa, the support for a dark mode in Atlaskit packages is WIP state currently.

It looks like the @atlaskit/theme package you want to use is deprecated:

What you can try instead is the @atlaskit/tokens - npm package that has the setGlobalTheme API. Please keep in mind this package is not stable yet.

Edit: On top of that, your code is actually using light mode by default, as far as I can tell:

useState<ThemeModes>(LIGHT);

Maciej
Atlassian Developer

Hi @madamczak, Thank you so much for your response and the pointers.

Following your link to the tokens package, I saw that there was a reference to the CSS themes file - import ‘@atlaskit/tokens/css/atlassian-dark.css’;

Adding that made the SideNavigation component render properly in dark mode!

Thank you so much once again!

1 Like