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
  • Ömür Yanıkoğlu commented
    25 Jul, 2023 07:08am

    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
    25 Jul, 2023 06:57am

    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
    24 Apr, 2023 12:56pm

    Yes please 😁

  • John Fallot commented
    12 Jul, 2022 04:41pm

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

  • Felicia Forbes commented
    17 Aug, 2021 04:36am

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

  • +4