diff --git a/packages/primevue/src/datepicker/style/DatePickerStyle.js b/packages/primevue/src/datepicker/style/DatePickerStyle.js
index e3ed8374b..246e07ab2 100644
--- a/packages/primevue/src/datepicker/style/DatePickerStyle.js
+++ b/packages/primevue/src/datepicker/style/DatePickerStyle.js
@@ -226,6 +226,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.date.selected.color')};
 }
 
+.p-datepicker-day-selected-range {
+    background: ${dt('datepicker.date.range.selected.background')};
+    color: ${dt('datepicker.date.range.selected.color')};
+}
+
 .p-datepicker-today > .p-datepicker-day {
     background: ${dt('datepicker.today.background')};
     color: ${dt('datepicker.today.color')};
@@ -236,6 +241,11 @@ const theme = ({ dt }) => `
     color: ${dt('datepicker.date.selected.color')};
 }
 
+.p-datepicker-today > .p-datepicker-day-selected-range {
+    background: ${dt('datepicker.date.range.selected.background')};
+    color: ${dt('datepicker.date.range.selected.color')};
+}
+
 .p-datepicker-weeknumber {
     text-align: center
 }
diff --git a/packages/themes/src/presets/aura/datepicker/index.js b/packages/themes/src/presets/aura/datepicker/index.js
index ada80cb3f..292caa68c 100644
--- a/packages/themes/src/presets/aura/datepicker/index.js
+++ b/packages/themes/src/presets/aura/datepicker/index.js
@@ -67,10 +67,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2rem',
         height: '2rem',
         borderRadius: '50%',
diff --git a/packages/themes/src/presets/lara/datepicker/index.js b/packages/themes/src/presets/lara/datepicker/index.js
index 6bf29d95d..bceeaf4d4 100644
--- a/packages/themes/src/presets/lara/datepicker/index.js
+++ b/packages/themes/src/presets/lara/datepicker/index.js
@@ -65,10 +65,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2.5rem',
         height: '2.5rem',
         borderRadius: '50%',
diff --git a/packages/themes/src/presets/nora/datepicker/index.js b/packages/themes/src/presets/nora/datepicker/index.js
index b4aa6c90a..c9c9226ff 100644
--- a/packages/themes/src/presets/nora/datepicker/index.js
+++ b/packages/themes/src/presets/nora/datepicker/index.js
@@ -69,10 +69,12 @@ export default {
     },
     date: {
         hoverBackground: '{content.hover.background}',
-        selectedBackground: '{highlight.background}',
+        selectedBackground: '{primary.color}',
+        rangeSelectedBackground: '{highlight.background}',
         color: '{content.color}',
         hoverColor: '{content.hover.color}',
-        selectedColor: '{highlight.color}',
+        selectedColor: '{primary.contrast.color}',
+        rangeSelectedColor: '{highlight.color}',
         width: '2rem',
         height: '2rem',
         borderRadius: '50%',