diff --git a/fhem/www/images/darktouchpad/darklogo.png b/fhem/www/images/darktouchpad/darklogo.png
new file mode 100644
index 000000000..4f8329e18
Binary files /dev/null and b/fhem/www/images/darktouchpad/darklogo.png differ
diff --git a/fhem/www/pgm2/darktouchpadstyle.css b/fhem/www/pgm2/darktouchpadstyle.css
new file mode 100644
index 000000000..9e9ab75be
--- /dev/null
+++ b/fhem/www/pgm2/darktouchpadstyle.css
@@ -0,0 +1 @@
+@import url("darkstyle.css");
diff --git a/fhem/www/pgm2/darktouchpadsvg_defs.svg b/fhem/www/pgm2/darktouchpadsvg_defs.svg
new file mode 100644
index 000000000..aa4034ff4
--- /dev/null
+++ b/fhem/www/pgm2/darktouchpadsvg_defs.svg
@@ -0,0 +1,43 @@
+<!-- will be included in each svg plot -->
+<defs>
+  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>
+    <stop offset="100%" style="stop-color:#A7A7A7; stop-opacity:1"/>
+  </linearGradient>
+
+  <linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#f00; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#291; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#00f; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#f0f; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#ff0; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#0ff; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
+  </linearGradient>
+
+  <linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
+    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>
+    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
+  </linearGradient>
+
+</defs>
diff --git a/fhem/www/pgm2/darktouchpadsvg_style.css b/fhem/www/pgm2/darktouchpadsvg_style.css
new file mode 100644
index 000000000..0685c46d5
--- /dev/null
+++ b/fhem/www/pgm2/darktouchpadsvg_style.css
@@ -0,0 +1,31 @@
+/* Author: Volker */
+.background { fill:#444444; }
+
+text { font-family:Arial, Helvetica, sans-serif; font-size:12px; fill:#CCCCCC;}
+text.title {font-family:Arial, Helvetica, sans-serif; font-size:16px; fill:#CCCCCC;}
+text.copy { text-decoration:underline; stroke:none; fill:blue;}
+text.paste { text-decoration:underline; stroke:none; fill:blue;}
+
+polyline { stroke:black; fill:none; }
+.border { stroke:black; fill:url(#gr_bg);}
+.vgrid { stroke:gray; stroke-dasharray:2,6;}
+.hgrid { stroke:gray; stroke-dasharray:2,6;}
+.pasted { stroke:black; stroke-dasharray:1,1;}
+
+.l0 { stroke:red;     }  text.l0 { stroke:none; fill:red;     } 
+.l1 { stroke:green;   }  text.l1 { stroke:none; fill:green;   } 
+.l2 { stroke:blue;    }  text.l2 { stroke:none; fill:blue;    }
+.l3 { stroke:magenta; }  text.l3 { stroke:none; fill:magenta; }
+.l4 { stroke:brown;   }  text.l4 { stroke:none; fill:brown;   }
+.l5 { stroke:black;   }  text.l5 { stroke:none; fill:black;   }
+.l6 { stroke:olive;   }  text.l6 { stroke:none; fill:olive;   }
+.l7 { stroke:gray;    }  text.l7 { stroke:none; fill:gray;    }
+.l8 { stroke:yellow;  }  text.l8 { stroke:none; fill:yellow;  }
+
+.l0fill{ stroke:#f00; fill:url(#gr_0); }  text.l0fill{ stroke:none; fill:#f00; }
+.l1fill{ stroke:#291; fill:url(#gr_1); }  text.l1fill{ stroke:none; fill:#291; }
+.l2fill{ stroke:#00f; fill:url(#gr_2); }  text.l2fill{ stroke:none; fill:#00f; }
+.l3fill{ stroke:#f0f; fill:url(#gr_3); }  text.l3fill{ stroke:none; fill:#f0f; }
+.l4fill{ stroke:#ff0; fill:url(#gr_4); }  text.l4fill{ stroke:none; fill:#ff0; }
+.l5fill{ stroke:#0ff; fill:url(#gr_5); }  text.l5fill{ stroke:none; fill:#0ff; }
+.l6fill{ stroke:#000; fill:url(#gr_6); }  text.l6fill{ stroke:none; fill:#000; }