Creating advanced theme settings drupal

In the Drupal administration section, each theme has its own settings page at admin/appearance/settings/themeName. This page has a form with standard settings like “Logo image settings” and “Shortcut icon settings.”

In Drupal 8, themes can modify the entire theme settings form by adding a PHP function to either the THEMENAME.theme file or to a theme-settings.php file. In one of those files, a theme should use THEMENAME_form_system_theme_settings_alter(&$form, $form_state) hook function. See the “Form API in Drupal 8+” and the complete list of Form and render elements, as well as the hook_form_FORM_ID_alter() docs to learn the full flexibility of Forms API.

Here’s an example if you had a foo theme and wanted to add a textfield whose default value was blue bikeshed. Add the following to the foo/foo.theme file or to the themeName/theme-settings.php file:

function themeName_form_system_theme_settings_alter(&$form, FormStateInterface $form_state, $form_id) {
 
  $form['field_name'] = array(
    '#type'          => 'textfield',
    '#title'         => t('My field'),
    '#default_value' => theme_get_setting('field_name'),
    '#description'   => t("Place this description"),
  );

  $form['field_email'] = array(
    '#type'          => 'email',
    '#title'         => t('My Email'),
    '#default_value' => theme_get_setting('field_email'),
    '#description'   => t("Place this description"),
  );
}

In any of your theme’s PHP files, you can retrieve the value the user set by calling:

$field_name= theme_get_setting('field_name');
$field_email= theme_get_setting('field_email');

In order to use a setting in a Twig file, you'll have to add a new variable to the Twig file by adding it with a preprocess function in your THEMENAME.theme file: $variables['name'] = theme_get_setting('field_name')

For example, to add our themeName_example setting to the page.html.twig file, add this to the themeName.theme file:

<?php
function themeName_preprocess_page(&$variables) {
  $variables['name'] = theme_get_setting('field_name');
  $variables['email'] = theme_get_setting('field_email');
}

Then in the page.html.twig file, you can access themeName_example like any normal Twig variable:

{{ name }}
{{ email }}