Skip to main content

Working With Colors

Particle defines multiple color schemes that work in conjunction with themes. These colors are exposed as CSS variables that consuming stylesheets can reference to apply specific colors. Referencing CSS variables ensures these elements adapt to the current color scheme. For example:

.my-awesome-element {
  background-color: var(--color--gray-5);
  color: var(--color--main);
}

Transparency​

Particle colors can be applied with transparency by referencing -rgb variants of each variable. For example:

.my-awesome-element {
  background-color: rgba(var(--color--dscout-rgb), 0.3);
}

Generating derivative colors via Sass color functions​

In the vast majority of use cases, CSS variables should be referenced by the consuming stylesheet to apply colors to an element. This ensures that colors adapt dynamically to the current color scheme. However, there may be cases where a derivative color is needed that doesn't already exist in the Particle color palette. For these use cases, an escape hatch is provided via a Sass function that can be imported via the @use directive. For example:

@use 'sass:color';
@use '~@dscout/particle/styles/functions/colors' as particle-colors;

.color--extremely-dark-dscout {
  $-color--dscout: particle-colors.get-color('dscout');

  color: color.scale($-color--dscout, $lightness: -60%);
}

By default the get-particle-color() function returns the color value from Particle's base color palette. To reference a value from a specific color scheme, pass a second argument specifying the color scheme:

@use 'sass:color';
@use '~@dscout/particle/styles/functions/colors' as particle-colors;

.color--even-lighter-bandit-gray-6 {
  $-color--bandit-light-gray-6: particle-colors.get-color('gray-6', 'bandit-light');

  color: color.scale($-color--bandit-light-gray-6, $lightness: 25%);
}
info

When referencing a Sass color value via this escape hatch, keep in mind that the color won't dynamically adapt with the color scheme.