Using Dark Mode with other frameworks

Atlassian Ecosystem Design
, ,
1

Hi everyone, we are coding most of our apps in Svelte using flowbite-svelte components. Therefore, our CSS uses Tailwind. I was wondering if anyone else is similarly not using React as their frontend framework and, if so, how they are going about dark mode. Adding window.AP.theming.initializeTheming(); sadly does not seem to work. So far I am trying to implement this into one of our Connect apps but we also have many apps in Forge so any suggestions would be great!

2

We use AUI, and it works with the AUI dark mode.

4

Hey @ImogenDrews1 :wave:

Our tokens implementation uses CSS variables which makes it framework agnostic, it should be possible to use tokens in Svelte, Angular etc. Interop-ing with Tailwind though, is something we’ve not encountered yet but I’m confident we can get something working for you.

The first step would be to turn on Tailwind’s default dark theme based on the state of Atlassian’s theme. It won’t be an exact match (without further configuration) but should at least be a start.

<script>
  // Enable Atlassian's theming, which will set necessary attrs
  window.AP.theming.initializeTheming();

  function setTailwindTheme() {
    // Read the initial color mode set by initializeTheming
	  const colorMode = document.documentElement.getAttribute('data-color-mode');
    // Trigger Tailwind's inbuilt theming based on the result
    if (colorMode === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }

  // Observe future changes to `data-color-mode` and update classes accordingly
  const observer = new MutationObserver(() => setTailwindTheme());
  const observer.observe(document.documentElement, {
    attributeFilter: ['data-color-mode'],
  });  

  setTailwindTheme();
</script>

Alternatively, you could try updating your tailwind.config.js to directly trigger dark mode via the same attribute we set on the page. I’m not sure if this will work because I’ve not tested it, however, this would be a much more elegant solution than the above.

module.exports = {
 darkMode: ['class', '[data-color-mode="dark"]'],
}

Building on that, to fix discrepancies between Atlassian and Tailwind dark themes, you can modify your tailwind dark theme configuration using colors from our token set. (You will need to inspect the dark mode colors to get the hex codes)

https://atlassian.design/components/tokens/all-tokens

It won’t be an exact 1:1 mapping so it might take a bit of trial and error. Also, note that one drawback is you’ll need to manually update the theme if we change the dark theme in the future.

As far as modifying the dark theme in Tailwind, there doesn’t seem to be a native way to do it, I found this example using DaisyUI to specify values for custom themes: Tailwind Play

Hope this helps, let me know if you manage to get a working solution :slightly_smiling_face:

Cheers, Daniel

3 Likes
5

Hi @DanielDelCore

Thanks so much for this! It worked perfectly on the first try. I have never used MutationObserver before so that’s great to know, thanks again!

Cheers,
Imogen