add Dark mode and allow to change colors

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

README.md

@@ -5,16 +5,20 @@ To use the Script, you have to Download the App "Scriptable" from the App Store:
 Then you have to copy & paste the desired script into the Scriptable App. Now you can create a Sciptable widget and select the script in the widget settings.
 
 ## Vodafone DE data usage
-![Vodafone Widget](https://raw.githubusercontent.com/ThisIsBenny/iOS-Widgets/main/VodafoneDE/preview.jpeg)
+![Vodafone Widget Preview light](https://raw.githubusercontent.com/ThisIsBenny/iOS-Widgets/main/VodafoneDE/previewLight.jpeg)
+![Vodafone Widget Preview dark](https://raw.githubusercontent.com/ThisIsBenny/iOS-Widgets/main/VodafoneDE/previewDark.jpeg)
 
 This widget loads the remaining data volume via the MyVodafone API. For this purpose, an automatic login via the cell phone network is performed, therefore it is necessary that the WIFI is not active for the first usage.
 After the first usage, the informations are cached and will be used in case of an active WIFI Connection. The cached information will be also used to prevent the API from a lot of request. The TTL (Time To Live) of the Cache can be setup at the beginning of the script (default is 60 min)
 
+It is possible to overwrite the used colors of the widget. To overwrite the color, you have to add four color codes separated by | to the widget parameter option: BackgroundColor|TextColor|CircleFillColor|CircleStrokeColor
+Example: D32D1F|EDEDED|EDEDED|B0B0B0
+
+If no parameter are set or not four colors are set the default color set for light or dark Mode will be used.
+
 [[Download]](https://raw.githubusercontent.com/ThisIsBenny/iOS-Widgets/main/VodafoneDE/VodafoneDE.js)
 
 _Roadmap_:
-* Change Background Color
-* Add diagramm
 * Add GigaDepot volume
 
 _Credits_:

VodafoneDE/VodafoneDE.js

@@ -9,10 +9,35 @@
 // How many minutes should the cache be valid
 let cacheMinutes = 60;
 
-const canvFillColor = '#EDEDED';
+let backColor; //Widget background color
-const canvStrokeColor = '#121212';
+let textColor; //Widget text color
-const canvBackColor = '#FD0000'; //Widget background color
+let fillColor;
-const canvTextColor = '#FFFFFF'; //Widget text color
+let strokeColor;
+
+let widgetInputRAW = args.widgetParameter;
+let widgetInput = null;
+
+if (widgetInputRAW !== null) {
+  widgetInput = widgetInputRAW.toString().split("|");
+}
+
+// BackgroundColor|TextColor|CircleFillColor|CircleStrokeColor
+if (widgetInput !== null && widgetInput.length == 4) {
+  backColor = widgetInput[0];
+  textColor = widgetInput[1];
+  fillColor = widgetInput[2];
+  strokeColor = widgetInput[3];
+} else if (Device.isUsingDarkAppearance()) {
+  backColor = '222222';
+  textColor = 'EDEDED';
+  fillColor = 'EDEDED';
+  strokeColor = '121212';
+} else {
+  backColor = 'D32D1F';
+  textColor = 'EDEDED';
+  fillColor = 'EDEDED';
+  strokeColor = 'B0B0B0';
+}
 
 const canvas = new DrawContext();
 const canvSize = 200;
@@ -39,11 +64,11 @@ function drawArc(ctr, rad, w, deg) {
   bgr = new Rect(bgx, bgy, bgd, bgd);
 
   bgc = new Rect(0, 0, canvSize, canvSize);
-  canvas.setFillColor(new Color(canvBackColor));
+  canvas.setFillColor(new Color(backColor));
   canvas.fill(bgc);
 
-  canvas.setFillColor(new Color(canvFillColor));
+  canvas.setFillColor(new Color(fillColor));
-  canvas.setStrokeColor(new Color(canvStrokeColor));
+  canvas.setStrokeColor(new Color(strokeColor));
   canvas.setLineWidth(w);
   canvas.strokeEllipse(bgr);
 
@@ -150,10 +175,11 @@ try {
 let widget = new ListWidget();
 
 widget.setPadding(10, 10, 10, 10)
-widget.backgroundColor = new Color(canvBackColor)
+widget.backgroundColor = new Color(backColor)
 
 let provider = widget.addText("Vodafone")
 provider.font = Font.mediumSystemFont(12)
+provider.color = new Color(textColor)
 
 widget.addSpacer()
 
@@ -173,7 +199,7 @@ const canvTextRect = new Rect(
   canvTextSize
 );
 canvas.setTextAlignedCenter();
-canvas.setTextColor(new Color(canvTextColor));
+canvas.setTextColor(new Color(textColor));
 canvas.setFont(Font.boldSystemFont(canvTextSize));
 canvas.drawTextInRect(`${remainingPercentage}%`, canvTextRect);
 
@@ -189,6 +215,7 @@ let totalGB = (data.total / 1024).toFixed(0)
 let totalValuesText = widget.addText(`${remainingGB} GB von ${totalGB} GB`)
 totalValuesText.font = Font.mediumSystemFont(12)
 totalValuesText.centerAlignText()
+totalValuesText.color = new Color(textColor)
 
 // Last Update
 widget.addSpacer(5)
@@ -196,7 +223,7 @@ let lastUpdateText = widget.addDate(lastUpdate)
 lastUpdateText.font = Font.mediumSystemFont(10)
 lastUpdateText.centerAlignText()
 lastUpdateText.applyTimeStyle()
-lastUpdateText.textColor = Color.darkGray()
+lastUpdateText.textColor = Color.lightGray()
 
 if(!config.runsInWidget) {
   await widget.presentSmall()