Using CSS Custom Properties

You may not want to use Atlassian Design tokens in your Power-Up css, and instead want to use your own colors. If want to also maintain color theme compliance while still using your own colors, the best way to do that is to use CSS custom properties. Using CSS custom properties, you can create your own custom color tokens and use them the exact same way you'd use Atlassian Design Tokens.

Make sure you're familiar with the Style Guide before moving on.

Using CSS Custom Properties to Create Custom Color Tokens

Prefer to look at a practical example? Check out our sample glitch project showcasing color theme compliance in Power-Ups! You may need to remix the project in order to view it.

The current color theme of your Power-Up’s iframe is determined by the data-color-mode attribute on the root html tag. Its value will either be "light" or "dark". You can target this attribute when defining custom properties in your own css files like so, in order to create custom color tokens:

1
2
/* my-colors.css */

/* define your light mode colors */
html[data-color-mode="light"] {
  --my-text-color: #006355;
  --my-background-color: #edfffd;
}

/* define your dark mode colors */
html[data-color-mode="dark"] {
  --my-text-color: #a2faf1;
  --my-background-color: #043833;
}

Now, you can make use of your css properties in your other css files, for example:

1
2
/* card-back-section.css */

.my-component {
  color: var(--my-text-color);
  background-color: var(--my-background-color);
}

And in your HTML, make sure you link both style sheets. Let’s assume we are building a color theme compliant card-back-section.

1
2
<!-- card-back-section.html -->
<html>
  <head>
    <link rel="stylesheet" href="./css/my-colors.css" />
    <link rel="stylesheet" href="./css/card-back-section.css" />
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body>
    <div class="my-component">...</div>
  </body>
  <script src="./js/card-back-section.js"></script>
</html>

And finally, inside your card-back-section.js, make sure to call TrelloPowerUp.iframe() , which will initialize your iframe’s color theme listener, so it stay up to date with the user’s current mode.

1
2
// card-back-section.js
const t = window.TrelloPowerUp.iframe();

Now, view your component in light mode and dark mode. See the magic happen! It should look something similar to this:

| | |