diff --git a/tine20/Tinebase/css/darkmode.less b/tine20/Tinebase/css/darkmode.less
index ea24081c08b..206574d2cec 100644
--- a/tine20/Tinebase/css/darkmode.less
+++ b/tine20/Tinebase/css/darkmode.less
@@ -208,10 +208,7 @@ body.dark-mode {
   .x-form-field-wrap .x-form-trigger,
   .x-form-trigger.x-form-arrow-trigger,
   .x-form-trigger
-  .x-form-twin-triggers + .x-form-trigger.x-form-trigger-plugin,
-  .x-toolbar-cell .ux-pp-range,
-  .x-toolbar-cell .ux-pp-controls div,
-  .x-form-field-wrap .ux-pp-field {
+  .x-form-twin-triggers + .x-form-trigger.x-form-trigger-plugin {
     filter: invert(1) hue-rotate(180deg);
   }
 
diff --git a/tine20/Tinebase/css/ux/form/PeriodPicker.css b/tine20/Tinebase/css/ux/form/PeriodPicker.less
similarity index 93%
rename from tine20/Tinebase/css/ux/form/PeriodPicker.css
rename to tine20/Tinebase/css/ux/form/PeriodPicker.less
index b0642a5f2d8..4ec4c26ae48 100644
--- a/tine20/Tinebase/css/ux/form/PeriodPicker.css
+++ b/tine20/Tinebase/css/ux/form/PeriodPicker.less
@@ -76,3 +76,8 @@
 .ux-pp-this .ux-pp-period {
     font-weight: bold;
 }
+
+.dark-mode .ux-pp-range,
+.dark-mode .ux-pp-controls div {
+    filter: invert(1) hue-rotate(180deg);
+}
\ No newline at end of file
diff --git a/tine20/Tinebase/js/Tinebase.js b/tine20/Tinebase/js/Tinebase.js
index e9dd3a00c8e..3a4cbcce0cd 100644
--- a/tine20/Tinebase/js/Tinebase.js
+++ b/tine20/Tinebase/js/Tinebase.js
@@ -324,7 +324,6 @@ require("../css/ux/form/ImageField.css");
 require("../css/ux/form/Spinner.css");
 require("../css/ux/form/HtmlEditor.css");
 require("../css/ux/form/LayerCombo.css");
-require("../css/ux/form/PeriodPicker.css");
 require("../css/ux/display/DisplayPanel.css");
 require("../css/ux/layout/CenterLayout.css");
 require("../css/ux/tree/treegrid.css");
diff --git a/tine20/Tinebase/js/ux/form/PeriodPicker.js b/tine20/Tinebase/js/ux/form/PeriodPicker.js
index 55a154c963d..888c301fd9d 100644
--- a/tine20/Tinebase/js/ux/form/PeriodPicker.js
+++ b/tine20/Tinebase/js/ux/form/PeriodPicker.js
@@ -9,8 +9,9 @@
 
 /*global Ext*/
 
-Ext.ns('Ext.ux', 'Ext.ux.form');
+require("../../../css/ux/form/PeriodPicker.less");
 
+Ext.ns('Ext.ux', 'Ext.ux.form');
 /**
  * A combination range and paging control
  *