Date Range picker dark mode support

Author: kevzlou7979

src/main/java/gwt/material/design/incubator/client/dark/IncubatorDarkThemeLoader.java

@@ -20,6 +20,7 @@
 package gwt.material.design.incubator.client.dark;
 
 import gwt.material.design.client.theme.dark.DarkThemeLoader;
+import gwt.material.design.incubator.client.daterange.DateRangeDarkTheme;
 import gwt.material.design.incubator.client.google.addresslookup.AddressLookupDarkTheme;
 import gwt.material.design.incubator.client.placeholder.PlaceholderDarkTheme;
 import gwt.material.design.incubator.client.progress.ProgressLineBarDarkTheme;
@@ -30,6 +31,7 @@ public class IncubatorDarkThemeLoader extends DarkThemeLoader {
 
     public IncubatorDarkThemeLoader() {
         super(new AddressLookupDarkTheme(),
+            new DateRangeDarkTheme(),
             new GroupToggleDarkTheme(),
             new PlaceholderDarkTheme(),
             new ProgressLineBarDarkTheme(),

src/main/java/gwt/material/design/incubator/client/daterange/DateRangeClientBundle.java

@@ -41,4 +41,7 @@ public interface DateRangeClientBundle extends ClientBundle {
 
     @Source("resources/css/daterangepicker-materialize.min.css")
     TextResource dateRangePickerOverrideCss();
+
+    @Source("resources/css/daterangepicker-dark.min.css")
+    TextResource dateRangeDarkCss();
 }

src/main/java/gwt/material/design/incubator/client/daterange/DateRangeClientDebugBundle.java

@@ -40,4 +40,7 @@ public interface DateRangeClientDebugBundle extends ClientBundle {
 
     @Source("resources/css/daterangepicker-materialize.css")
     TextResource dateRangePickerOverrideDebugCss();
+
+    @Source("resources/css/daterangepicker-dark.css")
+    TextResource dateRangeDarkCss();
 }

src/main/java/gwt/material/design/incubator/client/daterange/DateRangeDarkTheme.java

@@ -0,0 +1,13 @@
+package gwt.material.design.incubator.client.daterange;
+
+import gwt.material.design.addins.client.dark.AddinsWidgetDarkTheme;
+import gwt.material.design.incubator.client.AddinsIncubator;
+import gwt.material.design.incubator.client.tag.TagClientBundle;
+import gwt.material.design.incubator.client.tag.TagDebugClientBundle;
+
+public class DateRangeDarkTheme extends AddinsWidgetDarkTheme {
+
+    public DateRangeDarkTheme() {
+        super(AddinsIncubator.isDebug() ? DateRangeClientDebugBundle.INSTANCE.dateRangeDarkCss() : DateRangeClientBundle.INSTANCE.dateRangeDarkCss());
+    }
+}

src/main/java/gwt/material/design/incubator/client/daterange/DateRangePicker.java

@@ -47,6 +47,7 @@
 import gwt.material.design.client.ui.html.Label;
 import gwt.material.design.incubator.client.AddinsIncubator;
 import gwt.material.design.incubator.client.base.matcher.DateMonthMatcher;
+import gwt.material.design.incubator.client.dark.IncubatorDarkThemeReloader;
 import gwt.material.design.incubator.client.daterange.constants.DateRangeElementSelector;
 import gwt.material.design.incubator.client.daterange.events.*;
 import gwt.material.design.incubator.client.daterange.events.SelectionEvent;
@@ -182,6 +183,8 @@ protected void load() {
         getHandlerRegistry().registerHandler(Window.addResizeHandler(event -> detectPosition()));
 
         setId(DOM.createUniqueId());
+
+        IncubatorDarkThemeReloader.get().reload(DateRangeDarkTheme.class);
     }
 
     protected void detectPosition() {

src/main/resources/gwt/material/design/incubator/client/daterange/resources/css/daterangepicker-dark.css

@@ -0,0 +1,61 @@
+.daterangepicker,
+.daterangepicker .calendar-table,
+.daterangepicker td.off,
+.daterangepicker td.off.in-range,
+.daterangepicker td.off.start-date,
+.daterangepicker td.off.end-date {
+    background-color: #2e3033;
+    border-color: #2e3033;
+}
+
+.daterangepicker:after {
+    border-bottom: 6px solid #2e3033;
+}
+
+.daterangepicker:before {
+    border-bottom: 7px solid #2e3033;
+}
+
+.daterangepicker th.month {
+    color: rgba(255, 255, 255, .6);
+}
+
+.daterangepicker .calendar-table .next span,
+.daterangepicker .calendar-table .prev span {
+    border: solid white;
+    border-width: 0 2px 2px 0;
+}
+
+.daterangepicker .drp-buttons {
+    border-top: 1px solid #3d3d3d;
+}
+
+.daterangepicker td.active,
+.daterangepicker td.active:hover,
+.daterangepicker td.in-range.active:not(.off) {
+    background-color: #bb86fc;
+    color: #292929;
+}
+
+.daterangepicker td.available:hover,
+.daterangepicker th.available:hover {
+    background-color: #2e3033;
+}
+
+.daterangepicker td.available:hover:after {
+    border: 2px solid #bb86fc;
+}
+
+.daterangepicker td.in-range,
+.daterangepicker td.available.in-range:hover:not(.active) {
+    background-color: rgba(187, 134, 252, .08);
+    color: #bb86fc;
+}
+
+button.cancelBtn {
+    color: #bb86fc;
+}
+
+.daterangepicker:not(.single) .drp-buttons {
+    background-color: #2e3033;
+}

src/main/resources/gwt/material/design/incubator/client/daterange/resources/css/daterangepicker-dark.min.css

@@ -26,12 +26,10 @@
 .daterangepicker .calendar-table th.next {
     position: absolute;
     right: 0;
-    top: 12px;
 }
 
 .daterangepicker .calendar-table th.prev {
     position: absolute;
-    top: 12px;
     left: 0px;
 }
 
@@ -65,6 +63,7 @@
 .daterangepicker td.in-range,
 .daterangepicker td.available.in-range:hover:not(.active) {
     background-color: #e3f2fd;
+    color: #42a5f5;
 }
 
 .daterangepicker td.available:hover {