diff --git a/fhem/webfrontend/pgm2/01_FHEMWEB.pm b/fhem/webfrontend/pgm2/01_FHEMWEB.pm
index ba7d82e75..b59eea099 100755
--- a/fhem/webfrontend/pgm2/01_FHEMWEB.pm
+++ b/fhem/webfrontend/pgm2/01_FHEMWEB.pm
@@ -87,7 +87,7 @@ FHEMWEB_Initialize($)
   $hash->{AttrList}= "loglevel:0,1,2,3,4,5,6 webname fwmodpath fwcompress " .
                      "plotmode:gnuplot,gnuplot-scroll,SVG plotsize refresh " .
                      "touchpad smallscreen plotfork basicAuth basicAuthMsg ".
-                     "stylesheet hiddenroom HTTPS longpoll";
+                     "stylesheetPrefix hiddenroom HTTPS longpoll";
 
   ###############
   # Initialize internal structures
@@ -334,7 +334,12 @@ FW_AnswerCall($)
     return 1;
 
   } elsif($arg =~ m,^$FW_ME/(.*).css,) {
-    open(FH, "$FW_dir/$1.css") || return 0;
+    my $cssName = $1;
+    my $prf = AttrVal($FW_wname, "stylesheetPrefix", "");
+    $prf = "smallscreen" if(!$prf && $FW_ss);
+    $prf = "touchpad"    if(!$prf && $FW_tp);
+    return 0 if(!open(FH, "$FW_dir/$prf$cssName.css") && 
+                !open(FH, "$FW_dir/$cssName.css"));
     pO join("", <FH>);
     close(FH);
     $FW_RETTYPE = "text/css";
@@ -459,10 +464,7 @@ FW_AnswerCall($)
 
   my $rf = AttrVal($FW_wname, "refresh", "");
   pO "<meta http-equiv=\"refresh\" content=\"$rf\">" if($rf);
-  my $stylecss = ($FW_ss ? "style_smallscreen.css" :
-                  $FW_tp ? "style_touchpad.css" : "style.css");
-  $stylecss = AttrVal($FW_wname, "stylesheet", $stylecss);
-  pO "<link href=\"$FW_ME/$stylecss\" rel=\"stylesheet\"/>";
+  pO "<link href=\"$FW_ME/style.css\" rel=\"stylesheet\"/>";
   pO "<script type=\"text/javascript\" src=\"$FW_ME/svg.js\"></script>"
                         if($FW_plotmode eq "SVG");
   pO "<script type=\"text/javascript\" src=\"$FW_ME/longpoll.js\"></script>"
@@ -698,8 +700,7 @@ FW_roomOverview($)
     return;
 
   } else {
-    my $logo = $FW_ss ? "fhem_smallscreen.png" : "fhem.png";
-    pO "<div id=\"logo\"><img src=\"$FW_ME/$logo\"></div>";
+    pO "<div id=\"logo\"></div>";
 
   }
 
@@ -749,6 +750,7 @@ FW_roomOverview($)
      "Details",    "$FW_ME/commandref.html",
      "Examples",   "$FW_ME/cmd=style%20examples",
      "Edit files", "$FW_ME/cmd=style%20list",
+     "Select style","$FW_ME/cmd=style%20select",
      "",           "");
   my $lastname = ","; # Avoid double "".
   for(my $idx = 0; $idx < @list; $idx+= 2) {
@@ -1166,7 +1168,7 @@ FW_showLog($)
     }
     $ret = fC("get $d $file INT $f $t " . join(" ", @{$flog}));
     ($cfg, $plot) = FW_substcfg(1, $wl, $cfg, $plot, $file, "<OuT>");
-    SVG_render($wl, $f, $t, $cfg, $internal_data, $plot, $FW_ss);
+    SVG_render($wl, $f, $t, $cfg, $internal_data, $plot, $FW_wname);
     $FW_RETTYPE = "image/svg+xml";
 
   }
@@ -1380,22 +1382,21 @@ FW_style($$)
   my ($cmd, $msg) = @_;
   my @a = split(" ", $cmd);
 
+  my $start = "<div id=\"content\"><table><tr><td>";
+  my $end   = "</td></tr></table></div>";
   if($a[1] eq "list") {
 
-    my @fl;
-    push(@fl, "fhem.cfg");
+    my @fl = ("fhem.cfg");
     push(@fl, "");
-    push(@fl, FW_fileList("$FW_dir/.*.sh"));
-    push(@fl, FW_fileList("$FW_dir/.*Util.*"));
-    push(@fl, FW_fileList("$FW_dir/.*.css"));
-    push(@fl, FW_fileList("$FW_dir/.*.js"));
+    push(@fl, FW_fileList("$FW_dir/(.*.sh|.*Util.*)"));
+    push(@fl, "");
+    push(@fl, FW_fileList("$FW_dir/.*.(css|svg|js)"));
     push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*.gplot"));
     push(@fl, "");
     push(@fl, FW_fileList("$FW_dir/.*html"));
 
-    pO "<div id=\"content\">";
-    pO "<table><tr><td>";
+    pO $start;
     pO "$msg<br><br>" if($msg);
     pO "<table class=\"block\" id=\"at\">";
     my $row = 0;
@@ -1409,17 +1410,37 @@ FW_style($$)
       pO "</tr>";
       $row = ($row+1)%2;
     }
-    pO "</table>";
-    pO "</td></tr></table>";
-    pO "</div>";
+    pO "</table>$end";
+
+  } elsif($a[1] eq "select") {
+
+    my @fl = FW_fileList("$FW_dir/.*style.css");
+
+    pO "$start<table class=\"block\" id=\"at\">";
+    my $row = 0;
+    foreach my $file (@fl) {
+      next if($file =~ m/(svg_|smallscreen|touchpad)style.css/);
+      $file =~ s/style.css//;
+      $file = "Default" if($file eq "");
+      pO "<tr class=\"" . ($row?"odd":"even") . "\">";
+      pH "cmd=style set $file", "$file", 1;
+      pO "</tr>";
+      $row = ($row+1)%2;
+    }
+    pO "</table>$end";
+
+  } elsif($a[1] eq "set") {
+    if($a[2] eq "Default") {
+      delete($attr{$FW_wname}{stylesheetPrefix});
+    } else {
+      $attr{$FW_wname}{stylesheetPrefix} = $a[2];
+    }
+    pO "${start}Reload the page in the browser.$end";
 
   } elsif($a[1] eq "examples") {
 
     my @fl = FW_fileList("$FW_dir/example.*");
-    pO "<div id=\"content\">";
-    pO "<table><tr><td>";
-    pO "$msg<br><br>" if($msg);
-    pO "<table class=\"block\" id=\"at\">";
+    pO "$start<table class=\"block\" id=\"at\">";
     my $row = 0;
     foreach my $file (@fl) {
       pO "<tr class=\"" . ($row?"odd":"even") . "\">";
@@ -1427,9 +1448,7 @@ FW_style($$)
       pO "</tr>";
       $row = ($row+1)%2;
     }
-    pO "</table>";
-    pO "</td></tr></table>";
-    pO "</div>";
+    pO "</table>$end";
 
   } elsif($a[1] eq "edit") {
 
diff --git a/fhem/webfrontend/pgm2/98_SVG.pm b/fhem/webfrontend/pgm2/98_SVG.pm
index 5a1789af6..89e28f0c4 100755
--- a/fhem/webfrontend/pgm2/98_SVG.pm
+++ b/fhem/webfrontend/pgm2/98_SVG.pm
@@ -34,8 +34,9 @@ SVG_render($$$$$$$)
   my $confp = shift; # lines from the .gplot file, w/o FileLog and plot
   my $dp = shift;    # pointer to data (one string)
   my $plot = shift;  # Plot lines from the .gplot file
-  my $SVG_ss = shift;  # small screen
+  my $FW_wname = shift;  # FHEMWEB instance name
 
+  my $SVG_ss = AttrVal($FW_wname, "smallscreen", 0);
   return "" if(!defined($dp));
   my $th = 16;                          # "Font" height
   my ($x, $y) = (($SVG_ss ? 2 : 3)*$th,  1.2*$th);      # Rect offset
@@ -58,8 +59,10 @@ SVG_render($$$$$$$)
   pO '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" '.
          'xmlns:xlink="http://www.w3.org/1999/xlink" >';
 
+  my $prf = AttrVal($FW_wname, "stylesheetPrefix", "");
   pO "<style type=\"text/css\"><![CDATA[";
-  if(open(FH, "$FW_dir/svg_style.css")) {
+  if(open(FH, "$FW_dir/${prf}svg_style.css") ||
+     open(FH, "$FW_dir/svg_style.css")) {
     pO join("", <FH>);
     close(FH);
   } else {
@@ -67,7 +70,8 @@ SVG_render($$$$$$$)
   }
   pO "]]></style>";
 
-  if(open(FH, "$FW_dir/svg_defs.svg")) { # gradient definitions
+  if(open(FH, "$FW_dir/${prf}svg_defs.svg") ||
+     open(FH, "$FW_dir/svg_defs.svg")) { # gradient definitions
     pO join("", <FH>);
     close(FH);
   } else {
diff --git a/fhem/webfrontend/pgm2/darklogo.png b/fhem/webfrontend/pgm2/darklogo.png
new file mode 100644
index 000000000..8d69a439d
Binary files /dev/null and b/fhem/webfrontend/pgm2/darklogo.png differ
diff --git a/fhem/webfrontend/pgm2/darkstyle.css b/fhem/webfrontend/pgm2/darkstyle.css
new file mode 100644
index 000000000..de065c9a4
--- /dev/null
+++ b/fhem/webfrontend/pgm2/darkstyle.css
@@ -0,0 +1,36 @@
+/* Author: Till */
+body     { background-color: #444444; background-image:url(darklogo.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
+#logo    { position:absolute; top:10px; left:20px; width:140px; visibility:hidden; }
+#menu    { position:absolute; top:170px;left:20px; width:140px; }
+#hdr     { position:absolute; top:10px; left:180px; }
+#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
+
+a { color: #CCCCCC; text-decoration: none;}
+a:hover { color: #ffffff; }
+table.block { border:1px solid #ffffff; width: 100%; background: #333333; box-shadow:5px 5px 5px #000; }
+table.block tr.odd { background: #111111; }
+table.block tr.sel { background: red; }
+table { -moz-border-radius:8px; border-radius:8px; border-spacing: 0px; padding-bottom: 6px; padding-top: 6px;}
+
+table#room { background: #111111; width: 140px;}
+table#room a { color: #CCCCCC; text-decoration: none; }
+table#room a:hover { color: #ffffff; }        
+table#room tr.sel { background: red; }
+th {color:red; text-align: left; padding-left: 10px; font-weight: bold;}
+td {padding-left: 10px; padding-right: 10px; padding-top: 3px; padding-bottom: 3px;}
+input {outline:none; background-color: #111111; border: 1px solid #ffffff; color: #cccccc; padding:5px; margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
+input:focus {border: 1px solid red;}
+
+textarea {min-width:1000px; background-color: #111111; border: 1px solid #ffffff; color: #cccccc; padding:5px; margin-left: 10px; border-radius:8px; box-shadow: 5px 5px 5px #000000;}
+
+/*
+next lines are for commandref and faq
+*/
+#left  { position:absolute; top:140px; left:60px; width:140px; }
+#right { position:absolute; top:20px; left:200px; bottom:20px;
+right:10px; }
+body>div#left { position:fixed; }
+div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
+div#dist { padding-top:0.3em; }
+h2,h3,h4 { color:#EEE; line-height:1.3; margin-top:1.5em;
+font-family:Verdana; } 
diff --git a/fhem/webfrontend/pgm2/darksvg_defs.svg b/fhem/webfrontend/pgm2/darksvg_defs.svg
new file mode 100644
index 000000000..246e389a6
--- /dev/null
+++ b/fhem/webfrontend/pgm2/darksvg_defs.svg
@@ -0,0 +1,7 @@
+<!-- will be included in each svg plot -->
+<defs>
+  <linearGradient id="grad1" 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>
+</defs>
diff --git a/fhem/webfrontend/pgm2/darksvg_style.css b/fhem/webfrontend/pgm2/darksvg_style.css
new file mode 100644
index 000000000..964786e7a
--- /dev/null
+++ b/fhem/webfrontend/pgm2/darksvg_style.css
@@ -0,0 +1,32 @@
+/* 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;}
+text.l0 { text-decoration:underline; stroke:none; fill:red;}
+text.l1 { text-decoration:underline; stroke:none; fill:green;}
+text.l2 { text-decoration:underline; stroke:none; fill:blue;}
+text.l3 { text-decoration:underline; stroke:none; fill:magenta;}
+text.l4 { text-decoration:underline; stroke:none; fill:brown;}
+text.l5 { text-decoration:underline; stroke:none; fill:black;}
+text.l6 { text-decoration:underline; stroke:none; fill:olive;}
+text.l7 { text-decoration:underline; stroke:none; fill:gray;}
+text.l8 { text-decoration:underline; stroke:none; fill:yellow;}
+
+polyline { stroke:black; fill:none; }
+.border { stroke:black; fill:url(#grad1);}
+.vgrid { stroke:gray; stroke-dasharray:2,6;}
+.hgrid { stroke:gray; stroke-dasharray:2,6;}
+.pasted { stroke:black; stroke-dasharray:1,1;}
+
+.l0 { stroke:red;}
+.l1 { stroke:green;}
+.l2 { stroke:blue;}
+.l3 { stroke:magenta;}
+.l4 { stroke:brown;}
+.l5 { stroke:black;}
+.l6 { stroke:olive;}
+.l7 { stroke:gray;}
+.l8 { stroke:yellow;}
diff --git a/fhem/webfrontend/pgm2/style_smallscreen.css b/fhem/webfrontend/pgm2/smallscreenstyle.css
similarity index 76%
rename from fhem/webfrontend/pgm2/style_smallscreen.css
rename to fhem/webfrontend/pgm2/smallscreenstyle.css
index d0713f275..43b8a6b9f 100644
--- a/fhem/webfrontend/pgm2/style_smallscreen.css
+++ b/fhem/webfrontend/pgm2/smallscreenstyle.css
@@ -1,11 +1,11 @@
 body     { background-color: #FFFFE7; 
-           font-family:Arial, sans-serif; font-size:24px;
-           }
+           font-family:Arial, sans-serif; font-size:24px; }
 textarea { font-family:Arial, sans-serif; font-size:16px;}
 input    { font-family:Arial, sans-serif; font-size:16px;}
 select   { font-family:Arial, sans-serif; font-size:16px;}
 #back    { position:absolute; top: 2px; left:18px; }
-#logo    { position:absolute; top: 2px; left: 2px; }
+#logo    { position:absolute; top: 2px; left: 2px; 
+           width:64px;  height:67px; background-image:url(fhem_smallscreen.png); }
 #menu    { position:absolute; top: 2px; left:65px; }
 #hdr     { position:absolute; top:40px; left:65px; }
 #content { position:absolute; top:85px; left: 0px; right: 0px;}
@@ -50,3 +50,11 @@ table { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }
+
+#menu #block { visibility: hidden; }
+#right { position:absolute; top:85px; left: 0px; right: 0px;
+           font-family:Arial, sans-serif; font-size:16px; }
+h2,h3,h4 { color:#52865D; line-height:1.3;
+           margin-top:1.5em; font-family:Arial,Sans-serif; }
+div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
+div#dist { padding-top:0.3em; }
diff --git a/fhem/webfrontend/pgm2/style.css b/fhem/webfrontend/pgm2/style.css
index 5de1a6571..2e564c340 100644
--- a/fhem/webfrontend/pgm2/style.css
+++ b/fhem/webfrontend/pgm2/style.css
@@ -3,8 +3,9 @@ body     { background-color: #FFFFE7;
 input    { font-family:Arial, sans-serif; font-size:16px; }
 select   { font-family:Arial, sans-serif; font-size:16px; }
 
-#logo    { position:absolute; top:10px; left:20px; width:140px; }
-#menu    { position:absolute; top:120px;left:20px; width:140px; }
+#logo    { position:fixed; top:10px; left:20px;
+            width:100px;  height:105px; background-image:url(fhem.png); }
+#menu    { position:fixed; top:120px;left:20px; width:140px; }
 #hdr     { position:absolute; top:10px; left:180px; }
 #content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
 
@@ -21,3 +22,10 @@ table { -moz-border-radius:8px; border-radius:8px; }
 
 table#room { border:1px solid gray; width: 100%; background: #D7FFFF; }
 table#room tr.sel { background: #A0FFFF; }
+
+#right { position:absolute; top:20px; left:180px; bottom:20px; right:10px; }
+h2,h3,h4 { color:#52865D; line-height:1.3;
+           margin-top:1.5em; font-family:Arial,Sans-serif; }
+div#block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
+div#dist { padding-top:0.3em; }
+
diff --git a/fhem/webfrontend/pgm2/style_touchpad.css b/fhem/webfrontend/pgm2/touchpadstyle.css
similarity index 88%
rename from fhem/webfrontend/pgm2/style_touchpad.css
rename to fhem/webfrontend/pgm2/touchpadstyle.css
index e94592abe..02f39962b 100644
--- a/fhem/webfrontend/pgm2/style_touchpad.css
+++ b/fhem/webfrontend/pgm2/touchpadstyle.css
@@ -4,7 +4,8 @@ body     { background-color: #FFFFE7;
 textarea { font-family:Arial, sans-serif; font-size:16px}
 input    { font-family:Arial, sans-serif; font-size:16px}
 select   { font-family:Arial, sans-serif; font-size:16px}
-#logo    { position:absolute; top:10px; left:10px; width:100px; }
+#logo    { position:absolute; top:10px; left:10px;
+            width:100px;  height:105px; background-image:url(fhem.png); }
 #menu    { position:absolute; top:120px;left:10px; width:100px; }
 #hdr     { position:absolute; top:10px; left:140px; }
 #content { position:absolute; top:50px; left:140px; bottom:20px; right:10px; }