diff --git a/js/drupal.single_datetime.js b/js/drupal.single_datetime.js
index 47f1907bdbec691289bd78589ce48fbce9a2348d..917c15fa132f0c6da10b2309eb63a3af4c0e992b 100644
--- a/js/drupal.single_datetime.js
+++ b/js/drupal.single_datetime.js
@@ -82,6 +82,8 @@
 
         var inline = input.data('inline');
 
+        var theme = input.data('datetimepickerTheme');
+
         // If is date & time field.
         if (widgetType === 'datetime') {
           format = (hourFormat === '12h') ? 'Y-m-d h:i:s A' : 'Y-m-d H:i:s';
@@ -105,6 +107,7 @@
           maxDate,
           yearStart,
           yearEnd,
+          theme,
         });
       });
     },
diff --git a/src/Element/SingleDateTime.php b/src/Element/SingleDateTime.php
index c07d74716400a142e6fb32810c6e079abd118344..b77ee403946f523c1203b2841973b0a6f12146f8 100644
--- a/src/Element/SingleDateTime.php
+++ b/src/Element/SingleDateTime.php
@@ -83,6 +83,7 @@ class SingleDateTime extends FormElement {
       'data-disable-days' => Json::encode($disabled_days),
       'data-exclude-date' => $exclude_date,
       'data-inline' => !empty($element['#inline']) ? 1 : 0,
+      'data-datetimepicker-theme' => $element['#datetimepicker-theme'],
     ];
 
     // Year start.
diff --git a/src/Plugin/Field/FieldWidget/SingleDateTimeRangeWidget.php b/src/Plugin/Field/FieldWidget/SingleDateTimeRangeWidget.php
index 0c14849dfd5ddaebd851920df2918564abcf90e7..c762ee5d82a62f6c423098d7492e4c8091607a85 100644
--- a/src/Plugin/Field/FieldWidget/SingleDateTimeRangeWidget.php
+++ b/src/Plugin/Field/FieldWidget/SingleDateTimeRangeWidget.php
@@ -196,6 +196,7 @@ class SingleDateTimeRangeWidget extends SingleDateTimeWidget implements Containe
       '#disable_days' => $this->getSetting('disable_days'),
       '#exclude_date' => $this->getSetting('exclude_date'),
       '#inline' => $this->getSetting('inline'),
+      '#datetimepicker_theme' => $this->getSetting('datetimepicker_theme'),
       '#min_date' => $this->getSetting('min_date'),
       '#max_date' => $this->getSetting('max_date'),
       '#year_start' => $this->getSetting('year_start'),
diff --git a/src/Plugin/Field/FieldWidget/SingleDateTimeWidget.php b/src/Plugin/Field/FieldWidget/SingleDateTimeWidget.php
index 7abf4592832cc2e31d57f1dde6bfd1c4555b7cdd..e0aa1b28fc3dca0280d08f0da2863f252c81f9f2 100644
--- a/src/Plugin/Field/FieldWidget/SingleDateTimeWidget.php
+++ b/src/Plugin/Field/FieldWidget/SingleDateTimeWidget.php
@@ -35,6 +35,7 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
       'disable_days' => [],
       'exclude_date' => '',
       'inline' => FALSE,
+      'datetimepicker_theme' => 'default',
       'min_date' => '',
       'max_date' => '',
       'year_start' => '',
@@ -103,6 +104,17 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
       '#default_value' => $this->getSetting('inline'),
       '#required' => FALSE,
     ];
+    $elements['datetimepicker_theme'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Theme'),
+      '#description' => $this->t('Setting a color scheme. Now only supported default and dark theme'),
+      '#options' => [
+        'default' => $this->t('Default'),
+        'dark' => $this->t('Dark'),
+      ],
+      '#default_value' => $this->getSetting('datetimepicker_theme'),
+      '#required' => FALSE,
+    ];
     $elements['min_date'] = [
       '#type' => 'textfield',
       '#title' => $this->t('Set a limit to the minimum date/time allowed to pick.'),
@@ -174,6 +186,8 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
 
     $summary[] = t('Display inline widget: @render_widget', ['@render_widget' => !empty($this->getSetting('inline')) ? t('Yes') : t('No')]);
 
+    $summary[] = t('Theme: @theme', ['@theme' => ucfirst($this->getSetting('datetimepicker_theme'))]);
+
     $summary[] = t('Minimum date/time: @min_date', ['@min_date' => !empty($min_date) ? $min_date : t('None')]);
 
     $summary[] = t('Maximum date/time: @max_date', ['@max_date' => !empty($max_date) ? $max_date : t('None')]);
@@ -309,6 +323,7 @@ class SingleDateTimeWidget extends DateTimeWidgetBase implements ContainerFactor
     $element['value']['#disable_days'] = $this->getSetting('disable_days');
     $element['value']['#exclude_date'] = $this->getSetting('exclude_date');
     $element['value']['#inline'] = $this->getSetting('inline');
+    $element['value']['#datetimepicker-theme'] = $this->getSetting('datetimepicker_theme');
     $element['value']['#min_date'] = $this->getSetting('min_date');
     $element['value']['#max_date'] = $this->getSetting('max_date');
     $element['value']['#year_start'] = $this->getSetting('year_start');