How to properly support Dark Mode in iframes for Jira Data Center?

Hi everyone,
We’re currently working on supporting Dark Mode in our app for Jira Data Center. Our app renders iframes in the backend, which are then displayed within Jira. We use design tokens to set the iframe’s background color, but these only take effect after the iframe is fully rendered. As a result, there’s a brief flash of white background before the dark theme is applied.
Here are my main questions:

  1. Is there a better iframe decorator that renders without a header but correctly handles Dark Mode from the start? Currently, we are using the none decorator. For reference: Atlassian Decorators.
  2. We are constructing the iframe ourselves to ensure that only our code runs inside, without interference from third-party plugins. Is it possible to access the theme setting server-side so we can apply the correct background color directly upon iframe load?

Any advice would be greatly appreciated!
Thanks!

Hi @SamuelGesang,
as far as I understand is your challenge the flash of white background before the dark theme is applied. Here are some suggestions:

  1. Iframe Decorator: While the none decorator doesn’t include a header, it might not be the best for handling Dark Mode from the start. You might want to explore other decorators like iframe or iframe-lightbox which might offer better support for Dark Mode2.
  2. Server-Side Theme Access: Unfortunately, accessing the theme setting server-side to apply the correct background color directly upon iframe load isn’t currently supported in Jira Data Center. However, you can use client-side JavaScript to detect the user’s theme preference and apply the appropriate background color dynamically.

Here’s a simple example of how you might achieve this with JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Your App</title>
    <style>
        body {
            transition: background-color 0.3s ease;
        }
        .dark-mode {
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
            if (userPrefersDark) {
                document.body.classList.add('dark-mode');
            }
        });
    </script>
    <!-- Your iframe content here -->
</body>
</html>

This script checks if the user prefers a dark theme and applies the dark background color immediately when the iframe loads.

I hope this helps! If you have any more questions or need further assistance, feel free to ask. Good luck with your Dark Mode implementation!

Chears,
Daniel