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
  • Jean Costa commented
    22 Sep 18:15

    This has been done

  • Ömür Yanıkoğlu commented
    July 25, 2023 07:08

    Or maybe they can add ability to add color swatches as variables in embed popup so we can configure them as we want in our global custom code component.

  • Ömür Yanıkoğlu commented
    July 25, 2023 06:57

    Maybe they can add a checkbox in the color swatch settings like "Public" so we can select which color swatches will be available in front-end.

  • Duncan Hamra commented
    April 24, 2023 12:56

    Yes please 😁

  • John Fallot commented
    July 12, 2022 16:41

    I second this: styles & global classes should appear/work as global vars in the CSS

  • Felicia Forbes commented
    August 17, 2021 04:36

    Totally agree and it supports best practices and cleaner use to include variables

  • +4