Add dark theme expermients

doc/html-styles.qdocconf

@@ -4,7 +4,8 @@
 
 HTML.templatedir = .
 
-HTML.stylesheets = main.css
+HTML.stylesheets = main.css \
+                   main-dark.css
 
 HTML.scripts     = main.js
 
@@ -14,7 +15,7 @@ extraimages.HTML = images/logo.png \
 # Include the style sheets and scripts used.
 
 HTML.headerstyles = \
-    "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/main.css\" /> \n" \
+    "  <link rel=\"stylesheet\" type=\"text/css\" href=\"style/main-dark.css\" id=\"theme\"/> \n" \
     "  <script src=\"scripts/main.js\" /></script> \n" \
     "  <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"apple-touch-icon-57x57.png\" /> \n" \
     "  <link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"apple-touch-icon-114x114.png\" /> \n" \

doc/html-template.qdocconf

@@ -13,19 +13,25 @@ HTML.postheader = \
     "          </ul>\n" \
     "        </div>\n" \
     "      </div>\n" \
-    "      <a href=\"index.html\" class=\"indexref nymea-logo\"><img src=\"images/main-logo.svg\" class=\"nymea-main-logo\"/></a>\n" \
+    "      <a href=\"index.html\" class=\"indexref nymea-logo\"> <img src=\"images/main-logo.svg\" class=\"nymea-main-logo\"/> </a> \n" \
     "      <div class=\"nymea-navbar-center-right\">\n" \
     "        <div>\n" \
     "          <ul class=\"nymea-navbar-nav\">\n" \
     "            <li><a href=\"interfaces.html\">Interfaces</a></li>\n" \
     "            <li><a href=\"jsonrpc.html\">API</a></li>\n" \
     "            <li><a href=\"write-plugins.html\">Write Plugins</a></li>\n" \
+    "            <li>\n" \
+    "              <label class=\"switch\">\n " \
+    "                <input type=\"checkbox\">\n" \
+    "                <span class=\"slider round\"></span>\n" \
+    "              </label>\n" \
+    "            </li>\n" \
     "          </ul>\n" \
     "        </div>\n" \
     "      </div>\n" \
     "    </div>\n" \
     "  </nav>\n" \
-    "</div>\n"
+    "</div>\n" \
 
 
 HTML.postpostheader = \

doc/main.css

@@ -712,6 +712,7 @@ div.table {
     text-decoration: none;
 }
 
+
 div.header + li {
     color: #408a83;
     font-size: 1.115rem;
@@ -835,14 +836,6 @@ div.header + li {
     text-align: left;
 }
 
-/*
-.content .sidebar .level2:before {
-    content: "#";
-    background-image: none;
-    text-align: right;
-}
-*/
-
 .content .sidebar .level1 {
     font-size: 1.2rem;
     line-height: 1.5;
@@ -863,15 +856,6 @@ div.header + li {
     list-style: "→ ";
 }
 
-
-/*
-.content .sidebar .level2:before {
-    content: "-";
-    background-image: none;
-    text-align: right;
-}
-
-*/
 .content .context {
     width: 90%;
     margin: 0 -120px 0 auto;
@@ -1032,3 +1016,60 @@ div.footer p {
         margin: 0 -40px 0 auto;
     }
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padd
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #57baaef3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #57baaef3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

doc/main.js

@@ -259,4 +259,4 @@
     return zenscroll
 
 
-}));
+}));