Make Global Swatches available to reference in custom CSS

The idea is to make the Global Swatches available in the css to be manipulated via custom css or javascript outside of the designer by utilizing CSS Custom Properties.

For example, if I setup a few color swatches as global; webflow could include them in the CSS like this: 

:root {
/*Global Swatches*/ --primary: #000000; --secondary: #111111;
--tertiary: #222222;
--quaternary: #333333;
--info: #444444;
--warning: #555555;
--danger: #666666;
--success: #777777;
--background: #888888; }

This should be simple to implement and would open up many possibilities.

This way in your custom css code if you needed to reference a color swatch for something that webflow doesn't have any UI for changing, like webkit scrollbars as an example:

::-webkit-scrollbar-track {
  background-color: var(--primary);
}
::-webkit-scrollbar {
  width: 6px;
  background-color: var(--primary);
}
::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
}
  • James Vreeken
  • Sep 12 2017