Drupal 8 Theme Color Palate Selector

D8_color_palate_selector.php

<?php

function yourthemename_form_system_theme_settings_alter(&$form, Drupal\Core\Form\FormStateInterface $form_state) {

  // add the proper js and css files from your admin them and the color_field module
  $form['#attached']['library'][] = 'myadmintheme/color-field-widget-box';
  $form['#attached']['library'][] = 'color_field/color-field-widget-box';

  // define the dark colors to be used in the palette
  $default_dark_colors = array(
    1 => '#1F48A3',
    2 => '#2B2C66',
    3 => '#8E1110',
    4 => '#DD4F00',
    5 => '#154F4A',
    6 => '#2E82B8',
    7 => '#1E2480',
    8 => '#AA0D07',
    9 => '#E07400',
    10 => '#27776F',
    11 => '#379EE6',
    12 => '#4452B8',
    13 => '#CB0F07',
    14 => '#D07F00',
    15 => '#48A59B',
    16 => '#341378',
    17 => '#4E4D0E',
    18 => '#275E1C',
    19 => '#0B0B0B',
    20 => '#3C2622',
    21 => '#443098',
    22 => '#717210',
    23 => '#2B9225',
    24 => '#616161',
    25 => '#5B4037',
    26 => '#633AD1',
    27 => '#969A13',
    28 => '#6E9F31',
    29 => '#949494',
    30 => '#765546',
  );

  $dark_box_id = 'color-box-' . 'dark-colors';

  $dark_settings[$dark_box_id] = array(
    'required' => FALSE,
  );

  // define the light colors to be used in the palette
  $default_light_colors = array(
    1 => '#3F97F6',
    2 => '#97B6DE',
    3 => '#E36660',
    4 => '#F79700',
    5 => '#FCEA1D',
    6 => '#71B6F8',
    07 => '#65D0E3',
    8 => '#E99899',
    9 => '#F9B643',
    10 => '#FDF16D',
    11 => '#BFDEFB',
    12 => '#B9EBF3',
    13 => '#FBCDD2',
    14 => '#FACB7B',
    15 => '#FEF9C2',
    16 => '#A644CA',
    17 => '#70BB66',
    18 => '#3CAD9B',
    19 => '#C6CCD4',
    20 => '#BB8A0A',
    21 => '#BC78D0',
    22 => '#89C680',
    23 => '#57D1BC',
    24 => '#E0E0E0',
    25 => '#E5B964',
    26 => '#DEBEE9',
    27 => '#CBE6C9',
    28 => '#A6FFEF',
    29 => '#F5F5F5',
    30 => '#E7DFB6',
  );

  $light_box_id = 'color-box-' . 'light-colors';

  $light_settings[$light_box_id] = array(
    'required' => FALSE,
  );

  foreach ($default_light_colors as $color) {
    $light_settings[$light_box_id]['palette'][] = $color;
  }

  foreach ($default_dark_colors as $color) {
    $dark_settings[$dark_box_id]['palette'][] = $color;
  }

  // restrict form access to users with the permission
  if (\Drupal::currentUser()->hasPermission('change school settings')) {

    // Make settings a collapsible field - this should be set in your themes settings - mytheme_settings
    $form['mytheme_settings']['theme_colors'] = array(
      '#type' => 'details',
      '#title' => t('Theme Color Settings'),
      '#open' => TRUE,
    );

    $form['mytheme_settings']['theme_colors']['dark_color'] = array(
      '#title' => t('Dark color'),
      '#description' => '<p>' . t('Choose a dark color from among the swatches by clicking on the swatch') . '</p>',
      '#attributes' => array('class' => array('visually-hidden')),
      '#theme_wrappers' => array('color_field_widget_box'),
      // setting will be set in mytheme settings
      '#default_value' => theme_get_setting('dark_color', 'mytheme'),
      '#attached' => array(
        'drupalSettings' => array(
          'color_field' => array(
            'color_field_widget_box' => array(
              'settings' => $dark_settings,
            )
          )
        )
      ),
      'color' => (array(
        '#type' => 'textfield',
        // Setting will be set in mytheme settings
        '#default_value' => theme_get_setting('dark_color', 'mytheme'),
        '#suffix' => "<div class='color-field-widget-box-form' id='$dark_box_id'></div>",
        '#attributes' => array('class' => array('visually-hidden')),
        '#parents' => array('dark_color'),
      )
      ),
    );

    $form['mytheme_settings']['theme_colors']['light_color'] = array(
      '#title' => t('Light color'),
      '#description' => '<p>' . t('Choose a light color from among the swatches by clicking on the swatch') . '</p>',
      '#attributes' => array('class' => array('visually-hidden')),
      '#theme_wrappers' => array('color_field_widget_box'),
      // Setting will be set in mytheme settings
      '#default_value' => theme_get_setting('light_color', 'mytheme'),
      '#attached' => array(
        'drupalSettings' => array(
          'color_field' => array(
            'color_field_widget_box' => array(
              'settings' => $light_settings,
            )
          )
        )
      ),
      'color' => (array(
        '#type' => 'textfield',
        '#default_value' => theme_get_setting('light_color', 'mytheme'),
        '#suffix' => "<div class='color-field-widget-box-form' id='$light_box_id'></div>",
        '#attributes' => array('class' => array('visually-hidden')),
        '#parents' => array('light_color'),
      )
      ),
    );
   // A custom function to clear the cache is helpful when this form is set
   // $form['#submit']['cache_clear'] =  'mytheme_site_settings_cache_clear_on_form_submit';
  }
}