Again, thanks for a great theme.
I have been looking around and as yet have not found a reference for AT. I would like to add additional color setting support over and above those that exist in AT 8.x, say for instance setting the background colors of the regions. My client needs to white label a product with different theme colors for different clients. Any advice greatly appreciated.

Comments

PatrickMichael created an issue. See original summary.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Well, it's using the standard Color module system in Drupal.

So you have to declare color variables in:

YourTheme/color/color.inc

The most important colors are in the "default" schema. These must be unique in that schema - you can't have two colors the same in default. Make sure each schema has an entry for the new field (array item).

You take those default color hex values and use them in:

YourTheme/styles/css/components/color.css

Or is using SASS:

YourTheme/styles/uikit/components/partials/theme/_color.scss

Now - one VERY important point I need to make. AT makes heavy use of the "shift" feature in color module - by using neutral greys only we can get pretty good shifts relative to a base color selected by the user.

This is how i get away with only having a few declared colors in our basic schemas yet nearly everything will "shift" when you select a different color scheme.

If you need very specific colors, then yes you need to declare new variables and hex values in color.inc and map those precisely to elements in color.css. You need to be very precise, for example do not use uppercase hex in the color.inc and then lowercase in the color.css file.

PatrickMichael’s picture

PatrickMichael CreditAttribution: PatrickMichael commented

Great, thanks for the direction.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented
Status: Active » Fixed

You're welcome!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

PatrickMichael’s picture

PatrickMichael CreditAttribution: PatrickMichael commented

Hi, if i may re-open this, i am a bit stumped. I have added additional field and a gradient as per instruction above and from various tutorials. I have created two test blocks to test, these can be seen at dev4.digitalsolace.co.za. Technically all is working as when saving color settings, the test content is having styles applied to it from color.css in sites/default/files and the color changes when selecting different values.

$config = \Drupal::config('color.theme.cumii_at')->get();
  dpm($config);

Is also showing correct data.

However it is seems that the color module _color_shift is being applied as the resultant hex output is not as per the settings, and this is possibly working as expected.

However i do not want my custom fields to be influenced by color shift. I need to be able to add additional color fields and gradients and not have these altered. Is this possible, and how would i go about doing that?

Additional to this I have 2 new questions if i may.

How would i add an additional gradients?
The gradients in my design use rgba values as per below, is this possible to achieve with AT and color module?

background: -moz-linear-gradient(top, rgba(183,164,206,0) 0%, rgba(183,164,206,0.98) 56%, rgba(183,164,206,1) 57%, rgba(183,164,206,0) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(183,164,206,0) 0%,rgba(183,164,206,0.98) 56%,rgba(183,164,206,1) 57%,rgba(183,164,206,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(183,164,206,0) 0%,rgba(183,164,206,0.98) 56%,rgba(183,164,206,1) 57%,rgba(183,164,206,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

I have been hitting my head with this and any help would be greatly appreciated.

Added to color.inc

$info = array(
  // Available colors and color labels used in theme.
  'fields' => array(
    'base' => t('Base'),
    'text' => t('Text color'),
    'link' => t('Link color'),
    'gradienttop' => t('Gradient top'),
    'gradientbottom' => t('Gradient bottom'),
    'cumiigrey' => t('Cumii grey'),
  ),
  // Pre-defined color schemes.
  'schemes' => array(
    'default' => array(
      'title' => t('Carbon Neutral'),
      'colors' => array(
        'base' => '#000000',
        'text' => '#555555', // $text-color
        'link' => '#0066cc', // $link-color
        'gradienttop' => '#1E5799',
        'gradientbottom' => '#7DB9E8',
        'cumiigrey' => '#CCCCCC',
      ),
    ),
    'goodearth' => array(
      'title' => t('The Good Earth'),
      'colors' => array(
        'base' => '#4ba943',
        'text' => '#555555',
        'link' => '#8dd087',
        'gradienttop' => '#1E5555',
        'gradientbottom' => '#7D4488',
        'cumiigrey' => '#C2C2C2',
      ),
    ),
    'tippingpoint' => array(
      'title' => t('Tipping Point'),
      'colors' => array(
        'base' => '#e65200',
        'text' => '#1b1918',
        'link' => '#ff792f',
        'gradienttop' => '#1E6633',
        'gradientbottom' => '#7D5577',
        'cumiigrey' => '#C5C5C5',
      ),
    ),
  ),



  // Gradient definitions.
  'gradients' => array(
    array(
      // (x, y, width, height).
      'dimension' => array(0, 0, 0, 0),
      // Direction of gradient ('vertical' or 'horizontal').
      'direction' => 'vertical',
      // Keys of colors to use for the gradient.
      'colors' => array('gradienttop', 'gradientbottom'),
    ),
  ),
);

And added to color.css (this is just to test, gradient is not rgba)

#block-homepagetest {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bb2424+0,7db9e8+100 */
  background-color: #1E5788; /* Old browsers */
  background-image: -moz-linear-gradient(top, #1E5799 0%, #7DB9E8 100%); /* FF3.6-15 */
  background-image: -webkit-linear-gradient(top, #1E5799 0%,#7DB9E8 100%); /* Chrome10-25,Safari5.1-6 */
  background-image: linear-gradient(to bottom, #1E5799 0%,#7DB9E8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb2424', endColorstr='#ea8c8c',GradientType=0 ); /* IE6-9 */
}
#block-testcolour {
  background-color: #CCCCCC;
}