fix: improved theming and colors (#852)

Adaptable modal title color. Defaults to text color. Fixes title text in dark mode under Android is too dark to be legible and the color is not manually configurable #829
Divider color uses text color by default (adapting to theme)
Text color defaults to white at dark theme. Fixes Title, Confirm and Cancel in Dark mode is not visible #720

android/src/main/java/com/henninghall/date_picker/DatePickerModuleImpl.java

@@ -4,10 +4,13 @@
 import android.app.AlertDialog;
 import android.content.Context;
 import android.content.DialogInterface;
+import android.content.res.Resources;
 import android.graphics.Color;
+import android.util.TypedValue;
 import android.view.View;
 import android.widget.LinearLayout;
 import android.widget.RelativeLayout;
+import android.widget.TextView;
 
 import com.facebook.react.bridge.Callback;
 import com.facebook.react.bridge.Dynamic;
@@ -53,14 +56,13 @@ public void closePicker(){
 
     private AlertDialog createDialog(
             ReadableMap props, final PickerView picker, final Callback onConfirm, final Callback onCancel) {
-        String title = props.getString("title");
         String confirmText = props.getString("confirmText");
         final String cancelText = props.getString("cancelText");
-        String buttonColor = props.getString("buttonColor");
+        final String buttonColor = props.getString("buttonColor");
         final View pickerWithMargin = withTopMargin(picker);
 
-        AlertDialog dialog = new AlertDialog.Builder(DatePickerPackage.context.getCurrentActivity(), getTheme(props))
-                .setTitle(title)
+        AlertDialog dialog = new AlertDialogBuilder(DatePickerPackage.context.getCurrentActivity(), getTheme(props))
+                .setColoredTitle(props)
                 .setCancelable(true)
                 .setView(pickerWithMargin)
                 .setPositiveButton(confirmText, new DialogInterface.OnClickListener() {
@@ -154,4 +156,31 @@ private View withTopMargin(PickerView view) {
         return linearLayout;
     }
 
+    static class AlertDialogBuilder extends AlertDialog.Builder {
+        public AlertDialogBuilder(Context context, int themeResId) {
+            super(context, themeResId);
+        }
+        public AlertDialogBuilder setColoredTitle(ReadableMap props){
+            String textColor = props.getString("textColor");
+            String title = props.getString("title");
+            if(textColor == null){
+                this.setTitle(title);
+                return this;
+            }
+            TextView coloredTitle = new TextView(DatePickerPackage.context.getCurrentActivity());
+            coloredTitle.setText(title);
+            TypedValue typedValue = new TypedValue();
+            Resources.Theme theme = DatePickerPackage.context.getCurrentActivity().getTheme();
+            theme.resolveAttribute(R.attr.dialogPreferredPadding, typedValue, true);
+            int paddingInPixels = TypedValue.complexToDimensionPixelSize(typedValue.data, DatePickerPackage.context.getResources().getDisplayMetrics());
+            coloredTitle.setPadding(paddingInPixels, paddingInPixels, paddingInPixels, 0);
+            coloredTitle.setTextSize(20F);
+            int color = Color.parseColor(textColor);
+            coloredTitle.setTextColor(color);
+            this.setCustomTitle(coloredTitle);
+            return this;
+        }
+    }
+
+
 }

src/index.js

@@ -18,7 +18,7 @@ const DatePickerWrapper = (props) => {
     <DatePicker
       {...props}
       textColor={colorToHex(getTextColor(props))}
-      dividerColor={colorToHex(props.dividerColor)}
+      dividerColor={colorToHex(getDividerColor(props))}
       theme={getTheme(props)}
       title={getTitle(props)}
       confirmText={props.confirmText ? props.confirmText : 'Confirm'}
@@ -43,10 +43,20 @@ const getTheme = (props) => {
   return scheme
 }
 
+/** @param {Props} props **/
+const getDividerColor = (props) => {
+  if (props.dividerColor) return props.dividerColor
+  const theme = getTheme(props)
+  if (theme === 'dark') return 'white'
+  if (theme === 'light') return 'black'
+  return undefined
+}
+
 /** @param {Props} props **/
 const getTextColor = (props) => {
-  const darkTheme = getTheme(props) === 'dark'
-  if (darkTheme) return 'white'
+  const theme = getTheme(props)
+  if (theme === 'dark') return 'white'
+  if (theme === 'light') return 'black'
   return undefined
 }