diff --git a/package.json b/package.json
index 5d34c349..26f5caf6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.5.3",
+  "version": "5.5.4",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
diff --git a/src/theme/dark/colors.js b/src/theme/dark/colors.js
index e944d369..6cab2ab2 100644
--- a/src/theme/dark/colors.js
+++ b/src/theme/dark/colors.js
@@ -111,6 +111,11 @@ const appColors = {
 
   topBarBg: rawColors.neutral.grey35,
   elevationLevelOne: rawColors.neutral.grey60,
+  // Date picker
+  datePickerPausedBg: rawColors.neutral.grey35,
+  datePickerPlayBg: rawColors.green.green20,
+  dateTimePickerChipBg: rawColors.violet.violet20,
+  dateTimePickerChipAccent: rawColors.violet.violet120,
   // Input colors
   inputBg: rawColors.neutral.grey55,
   inputBorder: rawColors.neutral.grey65,
diff --git a/src/theme/default/colors.js b/src/theme/default/colors.js
index 1cea86a9..47b42477 100644
--- a/src/theme/default/colors.js
+++ b/src/theme/default/colors.js
@@ -110,6 +110,12 @@ const appColors = {
   topBarBg: rawColors.neutral.grey190,
   elevationLevelOne: rawColors.neutral.grey185,
 
+  // Date picker
+  datePickerPausedBg: rawColors.neutral.grey170,
+  datePickerPlayBg: rawColors.green.green180,
+  dateTimePickerChipBg: rawColors.violet.violet190,
+  dateTimePickerChipAccent: rawColors.violet.violet130,
+
   // Input colors
   inputBg: rawColors.neutral.grey190,
   inputBorder: rawColors.neutral.grey185,
diff --git a/src/theme/index.d.ts b/src/theme/index.d.ts
index e425d430..08f58fdc 100644
--- a/src/theme/index.d.ts
+++ b/src/theme/index.d.ts
@@ -38,6 +38,10 @@ export type AppColorsT = {
   placeholder: string
   key: string
   panel: string
+  datePickerPausedBg: string
+  datePickerPlayBg: string
+  dateTimePickerChipBg: string
+  dateTimePickerChipAccent: string
 }
 
 export type NumberOrStringT = number | string