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:
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!