Color
Utilize color tokens to seamlessly adapt your UI colors between light & dark modes.
Enabling Theme Colors
To grant your plugin UI to get access to the color tokens, you must enable themeColors by setting it to true when calling figma.showUI() .
figma.showUI(__html__, { themeColors: true })Now you can use the below color tokens and it get dynamically updated when the mode switches from light to dark and vice versa.
Additionally, a
figma-lightorfigma-darkclass will be applied to the<html>element, allowing for custom styling of elements based on the theme.For more information on theming, checkout CSS Variables and theming.
Tip
When prototyping outside the Figma canvas, such as in a browser, the color tokens won't be accessible. In such instances, you can import the 'figmaTheme' from 'figblocks' to use those colors.
import "figblocks/figmaTheme";Background
| Variable | Light Mode | Dark Mode |
|---|---|---|
--figma-color-bg | #ffffff | #2c2c2c |
--figma-color-bg-brand | #0d99ff | #0c8ce9 |
--figma-color-bg-brand-hover | #007be5 | #0a6dc2 |
--figma-color-bg-brand-pressed | #007be5 | #0a6dc2 |
--figma-color-bg-brand-secondary | #0768cf | #105cad |
--figma-color-bg-brand-tertiary | #e5f4ff | #394360 |
--figma-color-bg-component | #9747ff | #8a38f5 |
--figma-color-bg-component-hover | #8638e5 | #7a2ed6 |
--figma-color-bg-component-pressed | #8638e5 | #7a2ed6 |
--figma-color-bg-component-secondary | #7c2bda | #652ca8 |
--figma-color-bg-component-tertiary | #f1e5ff | #473956 |
--figma-color-bg-danger | #f24822 | #e03e1a |
--figma-color-bg-danger-hover | #dc3412 | #c4381c |
--figma-color-bg-danger-pressed | #dc3412 | #c4381c |
--figma-color-bg-danger-secondary | #bd2915 | #963323 |
--figma-color-bg-danger-tertiary | #ffe2e0 | #60332a |
--figma-color-bg-disabled | #d9d9d9 | #757575 |
--figma-color-bg-disabled-secondary | #b3b3b3 | #b3b3b3 |
--figma-color-bg-hover | #f5f5f5 | #383838 |
--figma-color-bg-inverse | #2c2c2c | #ffffff |
--figma-color-bg-onselected | #bde3ff | #667799 |
--figma-color-bg-onselected-hover | #bde3ff | #667799 |
--figma-color-bg-onselected-pressed | #bde3ff | #667799 |
--figma-color-bg-pressed | #f5f5f5 | #383838 |
--figma-color-bg-secondary | #f5f5f5 | #383838 |
--figma-color-bg-selected | #e5f4ff | #4a5878 |
--figma-color-bg-selected-hover | #bde3ff | #536383 |
--figma-color-bg-selected-pressed | #bde3ff | #536383 |
--figma-color-bg-selected-secondary | #f2f9ff | #394360 |
--figma-color-bg-selected-strong | #0d99ff | #0c8ce9 |
--figma-color-bg-selected-tertiary | #f2f9ff | #394360 |
--figma-color-bg-success | #14ae5c | #198f51 |
--figma-color-bg-success-hover | #009951 | #078348 |
--figma-color-bg-success-pressed | #009951 | #078348 |
--figma-color-bg-success-secondary | #008043 | #0a5c35 |
--figma-color-bg-success-tertiary | #cff7d3 | #476656 |
--figma-color-bg-tertiary | #e6e6e6 | #444444 |
--figma-color-bg-warning | #ffcd29 | #f3c11b |
--figma-color-bg-warning-hover | #ffc21a | #f2b50d |
--figma-color-bg-warning-pressed | #ffc21a | #f2b50d |
--figma-color-bg-warning-secondary | #fab815 | #e4a711 |
--figma-color-bg-warning-tertiary | #fff1c2 | #5c4100 |
Border
| Variable | Light Mode | Dark Mode |
|---|---|---|
--figma-color-border | #e6e6e6 | #444444 |
--figma-color-border-brand | #bde3ff | #105cad |
--figma-color-border-brand-strong | #007be5 | #7cc4f8 |
--figma-color-border-component | #e4ccff | #652ca8 |
--figma-color-border-component-hover | #9747ff | #8a38f5 |
--figma-color-border-component-strong | #8638e5 | #d6b6fb |
--figma-color-border-danger | #ffc7c2 | #963323 |
--figma-color-border-danger-strong | #dc3412 | #fca397 |
--figma-color-border-disabled | #e6e6e6 | #444444 |
--figma-color-border-disabled-strong | #0000004d | #ffffff66 |
--figma-color-border-onbrand | #007be5 | #0a6dc2 |
--figma-color-border-onbrand-strong | #ffffff | #ffffff |
--figma-color-border-oncomponent | #8638e5 | #7a2ed6 |
--figma-color-border-oncomponent-strong | #ffffff | #ffffff |
--figma-color-border-ondanger | #dc3412 | #c4381c |
--figma-color-border-ondanger-strong | #ffffff | #ffffff |
--figma-color-border-onselected | #bde3ff | #667799 |
--figma-color-border-onselected-strong | #000000e5 | #ffffffe5 |
--figma-color-border-onsuccess | #009951 | #078348 |
--figma-color-border-onsuccess-strong | #ffffff | #ffffff |
--figma-color-border-onwarning | #fab815 | #e4a711 |
--figma-color-border-onwarning-strong | #000000e5 | #000000e5 |
--figma-color-border-selected | #0d99ff | #0c8ce9 |
--figma-color-border-selected-strong | #007be5 | #7cc4f8 |
--figma-color-border-strong | #2c2c2c | #ffffffe5 |
--figma-color-border-success | #aff4c6 | #0a5c35 |
--figma-color-border-success-strong | #009951 | #79d297 |
--figma-color-border-warning | #ffe8a3 | #925711 |
--figma-color-border-warning-strong | #b86200 | #f7d15f |
Text
| Variable | Light Mode | Dark Mode |
|---|---|---|
--figma-color-text | #000000e5 | #ffffff |
--figma-color-text-brand | #007be5 | #7cc4f8 |
--figma-color-text-brand-secondary | #007be5 | #7cc4f8 |
--figma-color-text-brand-tertiary | #007be5 | #7cc4f8 |
--figma-color-text-component | #8638e5 | #d1a8ff |
--figma-color-text-component-pressed | #7c2bda | #d6b6fb |
--figma-color-text-component-secondary | #c5b2dc | #7f699b |
--figma-color-text-component-tertiary | #c5b2dc | #7f699b |
--figma-color-text-danger | #dc3412 | #fca397 |
--figma-color-text-danger-secondary | #dc3412 | #fca397 |
--figma-color-text-danger-tertiary | #dc3412 | #fca397 |
--figma-color-text-disabled | #0000004d | #ffffff66 |
--figma-color-text-hover | #000000e5 | #ffffff |
--figma-color-text-onbrand | #ffffff | #ffffff |
--figma-color-text-onbrand-secondary | #ffffffcc | #ffffffcc |
--figma-color-text-onbrand-tertiary | #ffffff66 | #ffffff66 |
--figma-color-text-oncomponent | #ffffff | #ffffff |
--figma-color-text-oncomponent-secondary | #ffffffcc | #ffffffcc |
--figma-color-text-oncomponent-tertiary | #ffffff66 | #ffffff66 |
--figma-color-text-ondanger | #ffffff | #ffffff |
--figma-color-text-ondanger-secondary | #ffffffcc | #ffffffcc |
--figma-color-text-ondanger-tertiary | #ffffff66 | #ffffff66 |
--figma-color-text-ondisabled | #ffffff | #2c2c2c |
--figma-color-text-oninverse | #ffffffe5 | #000000e5 |
--figma-color-text-onselected | #000000e5 | #ffffffe5 |
--figma-color-text-onselected-secondary | #00000080 | #ffffffb2 |
--figma-color-text-onselected-strong | #ffffff | #ffffff |
--figma-color-text-onselected-tertiary | #0000004d | #ffffff66 |
--figma-color-text-onsuccess | #ffffff | #ffffff |
--figma-color-text-onsuccess-secondary | #ffffffcc | #ffffffcc |
--figma-color-text-onsuccess-tertiary | #ffffff66 | #ffffff66 |
--figma-color-text-onwarning | #000000e5 | #000000e5 |
--figma-color-text-onwarning-secondary | #00000080 | #00000080 |
--figma-color-text-onwarning-tertiary | #0000004d | #0000004d |
--figma-color-text-secondary | #00000080 | #ffffffb2 |
--figma-color-text-secondary-hover | #000000e5 | #ffffff |
--figma-color-text-selected | #007be5 | #7cc4f8 |
--figma-color-text-selected-secondary | #007be5 | #7cc4f8 |
--figma-color-text-selected-tertiary | #007be5 | #7cc4f8 |
--figma-color-text-success | #009951 | #79d297 |
--figma-color-text-success-secondary | #009951 | #79d297 |
--figma-color-text-success-tertiary | #009951 | #79d297 |
--figma-color-text-tertiary | #0000004d | #ffffff66 |
--figma-color-text-tertiary-hover | #000000e5 | #ffffff |
--figma-color-text-warning | #b86200 | #f7d15f |
--figma-color-text-warning-secondary | #b86200 | #f7d15f |
--figma-color-text-warning-tertiary | #b86200 | #f7d15f |
Icon
| Variable | Light Mode | Dark Mode |
|---|---|---|
--figma-color-icon | #000000e5 | #ffffff |
--figma-color-icon-brand | #007be5 | #7cc4f8 |
--figma-color-icon-brand-pressed | #0768cf | #0c8ce9 |
--figma-color-icon-brand-secondary | #80caff | #0a6dc2 |
--figma-color-icon-brand-tertiary | #bde3ff | #394360 |
--figma-color-icon-component | #8638e5 | #d1a8ff |
--figma-color-icon-component-pressed | #7c2bda | #d6b6fb |
--figma-color-icon-component-secondary | #c5b2dc | #7f699b |
--figma-color-icon-component-tertiary | #c5b2dc | #7f699b |
--figma-color-icon-danger | #f24822 | #e03e1a |
--figma-color-icon-danger-hover | #bd2915 | #fbbcb6 |
--figma-color-icon-danger-pressed | #bd2915 | #fbbcb6 |
--figma-color-icon-danger-secondary | #f24822 | #e03e1a |
--figma-color-icon-danger-secondary-hover | #f24822 | #e03e1a |
--figma-color-icon-danger-tertiary | #f24822 | #e03e1a |
--figma-color-icon-disabled | #0000004d | #ffffff66 |
--figma-color-icon-hover | #000000e5 | #ffffff |
--figma-color-icon-onbrand | #ffffff | #ffffff |
--figma-color-icon-onbrand-secondary | #ffffffcc | #ffffffcc |
--figma-color-icon-onbrand-tertiary | #ffffff66 | #ffffff66 |
--figma-color-icon-oncomponent | #ffffff | #ffffff |
--figma-color-icon-oncomponent-secondary | #ffffffcc | #ffffffcc |
--figma-color-icon-oncomponent-tertiary | #ffffff66 | #ffffff66 |
--figma-color-icon-ondanger | #ffffff | #ffffff |
--figma-color-icon-ondanger-secondary | #ffffffcc | #ffffffcc |
--figma-color-icon-ondanger-tertiary | #ffffff66 | #ffffff66 |
--figma-color-icon-ondisabled | #ffffff | #2c2c2c |
--figma-color-icon-oninverse | #ffffffe5 | #000000e5 |
--figma-color-icon-onselected | #000000e5 | #ffffff |
--figma-color-icon-onselected-secondary | #00000080 | #ffffffb2 |
--figma-color-icon-onselected-strong | #ffffff | #ffffff |
--figma-color-icon-onselected-tertiary | #0000004d | #ffffff66 |
--figma-color-icon-onsuccess | #ffffff | #ffffff |
--figma-color-icon-onsuccess-secondary | #ffffffcc | #ffffffcc |
--figma-color-icon-onsuccess-tertiary | #ffffff66 | #ffffff66 |
--figma-color-icon-onwarning | #000000e5 | #000000e5 |
--figma-color-icon-onwarning-secondary | #00000080 | #00000080 |
--figma-color-icon-onwarning-tertiary | #0000004d | #0000004d |
--figma-color-icon-pressed | #007be5 | #0a6dc2 |
--figma-color-icon-secondary | #00000080 | #ffffffb2 |
--figma-color-icon-secondary-hover | #000000e5 | #ffffff |
--figma-color-icon-selected | #007be5 | #7cc4f8 |
--figma-color-icon-selected-secondary | #007be5 | #7cc4f8 |
--figma-color-icon-selected-tertiary | #007be5 | #7cc4f8 |
--figma-color-icon-success | #14ae5c | #198f51 |
--figma-color-icon-success-pressed | #008043 | #a1e8b9 |
--figma-color-icon-success-secondary | #14ae5c | #198f51 |
--figma-color-icon-success-tertiary | #14ae5c | #198f51 |
--figma-color-icon-tertiary | #0000004d | #ffffff66 |
--figma-color-icon-tertiary-hover | #000000e5 | #ffffff |
--figma-color-icon-warning | #ffcd29 | #f3c11b |
--figma-color-icon-warning-pressed | #b86200 | #f7d15f |
--figma-color-icon-warning-secondary | #ffcd29 | #f3c11b |
--figma-color-icon-warning-tertiary | #ffcd29 | #f3c11b |