Add dark mode style to datepicker icon

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -90,8 +90,8 @@
           new QuestionModel({
             id: 'first_name',
             tagline: 'Hi! Welcome to our demo survey 😊',
-            title: 'What is your first name?',
-            type: QuestionType.Text,
+            title: 'What is your birthday?',
+            type: QuestionType.Date,
             required: true,
             placeholder: 'Start typing here...'
           }),

src/assets/css/themes/theme-green.css

@@ -226,6 +226,11 @@ header.vff-header svg.f-logo {
     color: var(--vff-main-accent-color);
   }
 
+  .vff ::-webkit-calendar-picker-indicator {
+    filter: invert(100%);
+  }
+
+
   .vff span.f-answered{
     color: var(--vff-main-accent-color);
   }
@@ -239,7 +244,7 @@ header.vff-header svg.f-logo {
   }
 
   /*footer*/
-  .vff-footer .footer-inner-wrap{
+  .vff-footer .footer-inner-wrap {
     background-color: var(--vff-bg-color);
   }
 
@@ -253,12 +258,12 @@ header.vff-header svg.f-logo {
     fill: var(--vff-main-text-color);
   }
 
-  .vff-footer .footer-inner-wrap{
+  .vff-footer .footer-inner-wrap {
     background-color: rgba(49,54,64,0.75);
   }
 
   .vff-footer .f-prev:hover,
-  .vff-footer .f-next:hover{
+  .vff-footer .f-next:hover {
     background-color: rgba(0,0,0,0.2);
   }
 
@@ -272,11 +277,11 @@ header.vff-header svg.f-logo {
   }
 
   /*field-multiplechoicetype*/
-  .vff ul.f-radios li{
+  .vff ul.f-radios li {
     color: var(--vff-secondary-text-color);
   }
 
-  .vff .f-key{
+  .vff .f-key {
     color: var(--vff-main-accent-color);
     font-weight: 300;
   }

src/assets/css/themes/theme-minimal.css

@@ -233,6 +233,10 @@ header.vff-header svg.f-logo{
     color: var(--vff-main-accent-color);
   }
 
+  .vff input[type=date]::-webkit-calendar-picker-indicator {
+    filter: invert(100%);
+  }
+
   .vff span.f-answered{
     color: var(--vff-main-accent-color);
   }

src/assets/css/themes/theme-purple.css

@@ -246,6 +246,10 @@ header.vff-header svg.f-logo{
   .vff span.f-answered{
     color: var(--vff-main-accent-color);
   }
+  
+  .vff ::-webkit-calendar-picker-indicator {
+    filter: invert(100%);
+  }
 
   /*footer*/
   .vff-footer .f-prev.f-disabled svg,