diff --git a/examples/Advanced/Advanced.ino b/examples/Advanced/Advanced.ino
index f47b021..7bc3795 100644
--- a/examples/Advanced/Advanced.ino
+++ b/examples/Advanced/Advanced.ino
@@ -30,6 +30,9 @@ void setup() {
   // wm.setMenu(menu,6);
   std::vector<const char *> menu = {"wifi","info","param","sep","restart","exit"};
   wm.setMenu(menu);
+
+  // set dark theme
+  // wm.setClass("invert");
   
   //set static ip
   // wm.setSTAStaticIPConfig(IPAddress(10,0,1,99), IPAddress(10,0,1,1), IPAddress(255,255,255,0)); // set static ip,gw,sn
diff --git a/extras/WiFiManager.template.html b/extras/WiFiManager.template.html
index e4dc77f..ecb09de 100644
--- a/extras/WiFiManager.template.html
+++ b/extras/WiFiManager.template.html
@@ -11,13 +11,14 @@
 body.invert,
 body.invert a,
 body.invert h1 {
-	background-color:black;
+	background-color:#060606;
 	color:white;
 }
 body.invert .msg{
-	border-top: 1px solid #696969;
-	border-right: 1px solid #696969;
-	border-bottom: 1px solid #696969;
+	background-color: #282828;
+	border-top: 1px solid #555;
+	border-right: 1px solid #555;
+	border-bottom: 1px solid #555;
 }
 body.invert .q[role=img] {
     -webkit-filter: invert(1);
@@ -46,7 +47,7 @@ input {
 button {
     border: 0;
     border-radius: .3rem;
-    background-color: #1fa3ec;
+    background-color: #9933CC;
     color: #fff;
     line-height: 2.4rem;
     font-size: 1.2rem;
@@ -58,7 +59,7 @@ a {
     text-decoration: none;
 }
 a:hover {
-    color: #1fa3ec;
+    color: #9933CC;
     text-decoration: underline;
 }
 .h {
@@ -123,10 +124,10 @@ a:hover {
 	margin-bottom: 5px;
 }
 .msg.P {
-    border-left-color: #1fa3ec;
+    border-left-color: #9933CC;
 }
 .msg.P h4 {
-    color: #1fa3ec;
+    color: #9933CC;
 }
 /*.msg.S {
     border-left-color: #5cb85c;
@@ -135,10 +136,10 @@ a:hover {
     color: #5cb85c;
 }*/
 .msg.D {
-    border-left-color: #d9534f;
+    border-left-color: #dc3630;
 }
 .msg.D h4 {
-    color: #d9534f;
+    color: #dc3630;
 }
 
 dt {
@@ -152,7 +153,7 @@ td {
 	vertical-align: top;
 }
 button.D{
-	background-color:#d9534f;
+	background-color:#dc3630;
 }
 
 </style>
diff --git a/strings_en.h b/strings_en.h
index 097d971..2ef052e 100644
--- a/strings_en.h
+++ b/strings_en.h
@@ -73,15 +73,15 @@ const char HTTP_STYLE[]            PROGMEM = "<style>"
 "background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAAgCAMAAACfM+KhAAAALVBMVEX///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAOrOgAAAADnRSTlMAESIzRGZ3iJmqu8zd7gKjCLQAAACmSURBVHgB7dDBCoMwEEXRmKlVY3L//3NLhyzqIqSUggy8uxnhCR5Mo8xLt+14aZ7wwgsvvPA/ofv9+44334UXXngvb6XsFhO/VoC2RsSv9J7x8BnYLW+AjT56ud/uePMdb7IP8Bsc/e7h8Cfk912ghsNXWPpDC4hvN+D1560A1QPORyh84VKLjjdvfPFm++i9EWq0348XXnjhhT+4dIbCW+WjZim9AKk4UZMnnCEuAAAAAElFTkSuQmCC');"
 "background-size: 95px 16px;}}"
 // msg callouts
-".msg{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px;border-left-color:#777}.msg h4{margin-top:0;margin-bottom:5px}.msg.P{border-left-color:#1fa3ec}.msg.P h4{color:#1fa3ec}.msg.D{border-left-color:#d9534f}.msg.D h4{color:#d9534f}"
+".msg{padding:20px;margin:20px 0;border:1px solid #eee;border-left-width:5px;border-radius:3px;border-left-color:#777}.msg h4{margin-top:0;margin-bottom:5px}.msg.P{border-left-color:#1fa3ec}.msg.P h4{color:#1fa3ec}.msg.D{border-left-color:#dc3630}.msg.D h4{color:#dc3630}"
 // lists
 "dt{font-weight:bold}dd{margin:0;padding:0 0 0.5em 0;min-height:12px}"
 "td{vertical-align: top;}"
 ".h{display:none}"
-"button.D{background-color:#d9534f}"
+"button.D{background-color:#dc3630}"
 // invert
-"body.invert,body.invert a,body.invert h1 {background-color:black;color:#fff;}"
-"body.invert .msg{border-top:1px solid #696969;border-right:1px solid #696969;border-bottom:1px solid #696969;}"
+"body.invert,body.invert a,body.invert h1 {background-color:black;color:#060606;}"
+"body.invert .msg{	background-color: #282828;border-top:1px solid #555;border-right:1px solid #555;border-bottom:1px solid #555;}"
 "body.invert .q[role=img]{-webkit-filter:invert(1);filter:invert(1);}"
 "</style>";