diff --git a/bootstrap_cloud.libraries.yml b/bootstrap_cloud.libraries.yml
index d660c25..a211b71 100755
--- a/bootstrap_cloud.libraries.yml
+++ b/bootstrap_cloud.libraries.yml
@@ -1,11 +1,16 @@
 global-scripts:
   js:
-    js/fonts.js: {}
+    js/bootstrap_for_cloud.js: {}
   dependencies:
     - core/jquery
     - core/drupal
     - core/drupalSettings
 
+red-color-theme:
+  css:
+    theme:
+      css/red-theme.css: {}
+
 framework:
   css:
     theme:
@@ -16,7 +21,6 @@ framework:
       css/views.css: {}
       css/media.css: {}
       css/fonts.css: {}
-      css/red-theme.css: {}
   js:
     js/menu.js: {}
 
diff --git a/bootstrap_cloud.theme b/bootstrap_cloud.theme
index add3d7b..66fca91 100755
--- a/bootstrap_cloud.theme
+++ b/bootstrap_cloud.theme
@@ -21,13 +21,18 @@ function bootstrap_cloud_form_system_theme_settings_alter(&$form, FormStateInter
   $form['cdn']['#weight'] = 4;
   $form['advanced']['#weight'] = 6;
 
-  $form['font'] = [
+  $form['bootstrap_for_cloud'] = [
     '#type' => 'details',
-    '#title' => 'Font',
+    '#title' => 'Bootstrap for cloud',
     '#group' => 'bootstrap',
     '#weight' => 5,
   ];
 
+  $theme_color_option = [
+    'blue' => t('Blue'),
+    'red' => t('Red'),
+  ];
+
   $font_family_option = [
     'lucida_grande' => t('Lucida Grande'),
     'lato' => t('Lato'),
@@ -48,14 +53,21 @@ function bootstrap_cloud_form_system_theme_settings_alter(&$form, FormStateInter
     'extra_large_text' => t('Extra Large'),
   ];
 
-  $form['font']['font_family'] = [
+  $form['bootstrap_for_cloud']['theme_color'] = [
+    '#type' => 'select',
+    '#title' => ('Theme'),
+    '#options' => $theme_color_option,
+    '#default_value' => theme_get_setting('theme_color'),
+  ];
+
+  $form['bootstrap_for_cloud']['font_family'] = [
     '#type' => 'select',
     '#title' => ('Font Family'),
     '#options' => $font_family_option,
     '#default_value' => theme_get_setting('font_family'),
   ];
 
-  $form['font']['font_size'] = [
+  $form['bootstrap_for_cloud']['font_size'] = [
     '#type' => 'select',
     '#title' => ('Font Size'),
     '#options' => $font_size_option,
@@ -64,11 +76,14 @@ function bootstrap_cloud_form_system_theme_settings_alter(&$form, FormStateInter
 
   $form['#attached']['library'][] = 'bootstrap_cloud/global-scripts';
 
-  $font_size = empty(theme_get_setting('font_size')) ? 'medium_text' : theme_get_setting('font_size');
+  $theme_color = empty(theme_get_setting('theme_color')) ? 'blue' : theme_get_setting('theme_color');
   $font_family = empty(theme_get_setting('font_family')) ? 'lucida_grande' : theme_get_setting('font_family');
+  $font_size = empty(theme_get_setting('font_size')) ? 'medium_text' : theme_get_setting('font_size');
+
   // Set text resize option in drupalSettings.
-  $form['#attached']['drupalSettings']['font']['font_size'] = $font_size_option[$font_size];
-  $form['#attached']['drupalSettings']['font']['font_family'] = $font_family_option[$font_family];
+  $form['#attached']['drupalSettings']['bootstrap_for_cloud']['theme_color'] = $theme_color_option[$theme_color];
+  $form['#attached']['drupalSettings']['bootstrap_for_cloud']['font_family'] = $font_family_option[$font_family];
+  $form['#attached']['drupalSettings']['bootstrap_for_cloud']['font_size'] = $font_size_option[$font_size];
 }
 
 /**
@@ -89,6 +104,23 @@ function bootstrap_cloud_preprocess_html(&$variables) {
   ];
 
   $font_family = empty(theme_get_setting('font_family')) ? 'lucida_grande' : theme_get_setting('font_family');
-  $variables['#attached']['drupalSettings']['font']['font_family'] = $font_family_option[$font_family];
+  $variables['#attached']['drupalSettings']['bootstrap_for_cloud']['font_family'] = $font_family_option[$font_family];
+
+  // Set selected font family in drupal settings.
+  $variables['#attached']['drupalSettings']['bootstrap_for_cloud']['font_family'] = $font_family_option[theme_get_setting('font_family')];
+
+  $theme_color_option = [
+    'blue' => t('Blue'),
+    'red' => t('Red'),
+  ];
+
+  $theme_color = empty(theme_get_setting('theme_color')) ? 'blue' : theme_get_setting('theme_color');
+
+  // Set selected theme color in drupal settings.
+  $variables['#attached']['drupalSettings']['bootstrap_for_cloud']['theme_color'] = $theme_color_option[$theme_color];
+
+  if (theme_get_setting('theme_color') == 'red') {
+    $variables['#attached']['library'][] = 'bootstrap_cloud/red-color-theme';
+  }
   $variables['#attached']['library'][] = 'bootstrap_cloud/global-scripts';
 }
diff --git a/config/install/bootstrap_cloud.settings.yml b/config/install/bootstrap_cloud.settings.yml
index 19d1298..8ed7224 100755
--- a/config/install/bootstrap_cloud.settings.yml
+++ b/config/install/bootstrap_cloud.settings.yml
@@ -28,3 +28,4 @@ logo:
 tooltip_placement: 'auto top'
 font_size: medium_text
 font_family: lucida_grande
+theme_color: blue
diff --git a/js/bootstrap_for_cloud.js b/js/bootstrap_for_cloud.js
new file mode 100755
index 0000000..9bc1427
--- /dev/null
+++ b/js/bootstrap_for_cloud.js
@@ -0,0 +1,73 @@
+/**
+ * @file
+ * Text resize options display.
+ */
+(function ($) {
+  'use strict';
+  Drupal.behaviors.fontBehavior = {
+    attach: function () {
+      // Get text resize option.
+      let font_size = (drupalSettings.bootstrap_for_cloud.font_size === null) ? 'Medium' : drupalSettings.bootstrap_for_cloud.font_size;
+      // Get font family option.
+      let font_family = (drupalSettings.bootstrap_for_cloud.font_family === null) ? 'Lucida Grande' : drupalSettings.bootstrap_for_cloud.font_family;
+      // Get theme color option.
+      let theme_color = (drupalSettings.bootstrap_for_cloud.theme_color === null) ? 'Blue' : drupalSettings.bootstrap_for_cloud.theme_color;
+
+      $('li a[href="#edit-bootstrap-for-cloud"]').find('strong').siblings('span').html('Theme: ' + theme_color +'<br /> ' + 'Font family: ' + font_family +'<br /> ' + 'Font size: ' + font_size);
+
+      $('#edit-theme-color').change(function() {
+        let font_family = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-font-family').children('option:selected').text();
+        let font_size = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-font-size').children('option:selected').text();
+        let theme_color_value = $(this).children('option:selected').text();
+
+        if (theme_color_value === '' || theme_color_value === null) {
+          theme_color_value = 'Blue';
+        }
+        $('li a[href="#edit-bootstrap-for-cloud"]').find('strong').siblings('span').html('Theme: ' + theme_color_value +'<br /> ' + 'Font family: ' + font_family +'<br /> ' + 'Font size: ' + font_size);
+      });
+
+      $('#edit-font-size').change(function() {
+        let theme_color = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-theme-color').children('option:selected').text();
+        let font_family = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-font-family').children('option:selected').text();
+        let font_size_value = $(this).children('option:selected').text();
+
+        if (font_size_value === '' || font_size_value === null) {
+          font_size_value = 'Medium';
+        }
+        $('li a[href="#edit-bootstrap-for-cloud"]').find('strong').siblings('span').html('Theme: ' + theme_color +'<br /> ' + 'Font family: ' + font_family + '<br /> ' + 'Font size: ' + font_size_value);
+      });
+
+      $('#edit-font-family').change(function() {
+        let theme_color = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-theme-color').children('option:selected').text();
+        let font_size = $(this).parents('#edit-bootstrap-for-cloud').find('#edit-font-size').children('option:selected').text();
+        let font_family_value = $(this).children('option:selected').text();
+
+        if (font_family_value === '' || font_family_value === null) {
+          font_family_value = 'Lucida Grande';
+        }
+        $('li a[href="#edit-bootstrap-for-cloud"]').find('strong').siblings('span').html('Theme: ' + theme_color +'<br /> ' + 'Font family: ' + font_family_value + '<br /> ' + 'Font size: ' + font_size);
+      });
+
+      // Change body font family.
+      let body_font_family = $('body').css('font-family');
+      let replace_body_font_family = ' ' + body_font_family.replace(/\"/g,'');
+      let font_family_array = replace_body_font_family.split(',');
+
+      if (font_family !== '') {
+        // Get index of selected font family.
+        let index = font_family_array.indexOf(' '+font_family);
+        if (index !== '') {
+          [font_family_array[0], font_family_array[index]] = [font_family_array[index], font_family_array[0]];
+        }
+      }
+      // Get updated font family.
+      let updated_font_family = font_family_array.toString();
+      if (updated_font_family !== '') {
+         $('body').css('font-family', updated_font_family);
+      }
+
+    }
+  }
+
+})(jQuery);
+
diff --git a/js/fonts.js b/js/fonts.js
deleted file mode 100755
index 00561c9..0000000
--- a/js/fonts.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @file
- * Text resize options display.
- */
-(function ($) {
-  'use strict';
-  Drupal.behaviors.fontBehavior = {
-    attach: function () {
-      // Get text resize option.
-      let font_size = (drupalSettings.font.font_size === null) ? 'Medium' : drupalSettings.font.font_size;
-      // Get font family option.
-      let font_family = (drupalSettings.font.font_family === null) ? 'Lucida Grande' : drupalSettings.font.font_family;
-
-      $('li a[href="#edit-font"]').find('strong').siblings('span').html('Font family: ' + font_family +"<br /> " + 'Font size: ' + font_size);
-
-      $('#edit-font-size').change(function() {
-        let font_family = $(this).parents('#edit-font').find('#edit-font-family').children('option:selected').text();
-        let font_size_value = $(this).children('option:selected').text();
-
-        if (font_size_value === '' || font_size_value === null) {
-          font_size_value = 'Medium';
-        }
-
-        $('li a[href="#edit-font"]').find('strong').siblings('span').html('Font family: ' + font_family + '<br /> ' + 'Font size: ' + font_size_value);
-      });
-
-      $('#edit-font-family').change(function() {
-        let font_size = $(this).parents('#edit-font').find('#edit-font-size').children('option:selected').text();
-        let font_family_value = $(this).children('option:selected').text();
-
-        if (font_family_value === '' || font_family_value === null) {
-          font_family_value = 'Lucida Grande';
-        }
-        $('li a[href="#edit-font"]').find('strong').siblings('span').html('Font family: ' + font_family_value + '<br /> ' + 'Font size: ' + font_size);
-      });
-
-      // Change body font family.
-      let body_font_family = $('body').css('font-family');
-      let replace_body_font_family = ' ' + body_font_family.replace(/\"/g,'');
-      let font_family_array = replace_body_font_family.split(',');
-
-      if (font_family !== '') {
-        // Get index of selected font family.
-        let index = font_family_array.indexOf(' '+font_family);
-        if (index !== '') {
-          [font_family_array[0], font_family_array[index]] = [font_family_array[index], font_family_array[0]];
-        }
-      }
-      // Get updated font family.
-      let updated_font_family = font_family_array.toString();
-      if (updated_font_family !== '') {
-         $('body').css('font-family', updated_font_family);
-      }
-    }
-  }
-
-})(jQuery);