Get Colors from Theme

Hey @jonroc804. Sadly there is no standardized way of defining theme colors (or at least not that I would know about). That’s why we can’t just reuse the colors defined in your theme. For most Bootstrap-based themes the colors are defined in the variables.scss which there is also not a way to access them.

The only thing we could offer is to provide a way to define the theme colors in the plugin settings.

Sorry that I can give you a better answer. But hopefully you manage to define your theme colors for the plugin.

Is it possible to define the theme colors based on the themes CSS variables:

:root {
    --primary: #12212e;
    --secondary: #8FAECE;
    --tertiary: #B53631;
    --light: #EDF0F4;
    --dark: #212529;
    --black: #000;
    --white: #fff;
    --transparent: rgba(0, 0, 0, 0);
    --gray-light: #DEE2E8;
    --gray-med-light: #CACFD4;
    --gray-med: #707479;
    --gray-med-dark: #464B4F;
    --gray-dark: #212529;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Yeah true, but since they’re probably defined in the frontend theme we don’t really know them in the Gutenberg editor where we would need to generate Select-Options for them. Also we can’t really know which ones of those variables are theme colors and which not.

Ok, for anyone else who needs a quick way to assign colors I’ve got it working to pull in theme colors via CSS variables in the root CSS declaration. Please keep in mind I had to specifically load the CSS variables in a CSS script that is used on WP admin (most themes will only have their theme colors on the front end). This approach allows me to build new themes without having to declare my colors again just for this plugin:

function myColumnBgColorOptions( bgColorOptions ) {
    var style = getComputedStyle(document.documentElement);
    var primary = style.getPropertyValue('--primary');
    var secondary = style.getPropertyValue('--secondary');
    var tertiary = style.getPropertyValue('--tertiary');

    bgColorOptions.length = 0; //remove default colors
  	bgColorOptions.push(
      {name: 'Primary', color: primary},
      {name: 'Secondary', color: secondary},
      {name: 'Tertiary', color: tertiary},
    );
  	return bgColorOptions;
  }
  wp.hooks.addFilter(
  	'wpBootstrapBlocks.column.bgColorOptions',
  	'myplugin/wp-bootstrap-blocks/column/bgColorOptions',
  	myColumnBgColorOptions
  );