add dark theme

static/css/style.css

@@ -302,7 +302,6 @@ header .site-menu a{
 
 .content h3 {
     font-size: 1em;
-    padding-left: 2em;
 }
 
 .flex-page {
@@ -626,10 +625,7 @@ ul.errorlist {
     font-size: 2.5em;
     font-weight: bold;
     margin: 2.75em 0.5em;
-
+    color: #000;
-    -webkit-text-fill-color: #D99C7E;
-    -webkit-text-stroke-width: 1px;
-    -webkit-text-stroke-color: #1c619a;
     letter-spacing: 0.045em;
 }
 
@@ -680,9 +676,6 @@ ul.errorlist {
 .homepage .map {
     display: block;
 }
-#worldmap svg {
-    stroke-width: 0.5;
-}
 
 #map {
     display: block;
@@ -916,8 +909,8 @@ table.flat-table {
     font-size: 1.1em;
     border: 1px solid #bbb;
     border-top: 0;
-    color: #1c619a;
     background: #ddd;
+    font-weight: bold;
 }
 .flat-table thead tr td:first-child {
     border-left: 0;
@@ -1156,6 +1149,113 @@ div.ticket-message-private {
 }
 
 
+/***************************************************/
+/********************* Dark mode overrides         */
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #333;
+        color: #eee;
+    }
+    header #logo {
+        filter: brightness(1.9);
+        /* #35b8ff */
+    }
+    .icon-wireguard {
+        filter: brightness(7) saturate(0);
+    }
+    a,
+    .content-box a,
+    .homepage .title,
+    header .site-menu a {
+        color: #35b8ff;
+    }
+    a.pure-button { /* the previous rule makes buttons ugly */
+        color: #fff;
+    }
+    .install-guides li a, 
+    .install-guides li a i {
+        color: #ddd;
+    }
+    .left-menu a { color: #ccc; }
+    .homepage h2, .content h2 {
+        color: #eee;
+    }
+
+    .content-box {
+        background: #272727;
+        border-color: #777;
+    }
+
+    .flat-table thead td {
+        border-color: #777;
+        background: #222;
+        color: #ccc;
+    }
+    .flat-table tbody tr:nth-child(2n) {
+        background: #2d2d2d;
+    }
+    .flat-table tbody tr td {
+        border-color: #777;
+    }
+
+    .bandwidth {
+        background: #222;
+    }
+    .bandwidth .inner {
+        background: #1c619a;
+    }
+
+    .account-status table td:first-child,
+    .account-status table tr:not(:first-child) {
+        border-color: #777;
+    }
+
+    .account-payment-tab [id^="tab"]:checked + label,
+    .account-payment-tab [id^="tab"]:checked + label span {
+        background: #222;
+    }
+    .account-payment-tab > label {
+        background: #393939;
+        border-color: #777;
+    }
+    .account-payment-tab .tab-content p {
+        color: #bbb;
+    }
+    .account-aff-box {
+        background: #22222b;
+    }
+
+    #map svg {
+        fill: #999;
+    }
+    #map .signalcircle {
+        fill: #1c619a;
+    }
+
+    .button {
+        border: 2px solid #35b8ff;
+    }
+    .button:hover {
+        background: #35b8ff;
+        color: #000;
+    }
+    .button.inverted  {
+        border: 2px solid #1c619a;
+
+    }
+    .button, .button.inverted:hover {
+        color: #35b8ff;
+    }
+
+    .pure-form input[type="text"], .pure-form input[type="password"], .pure-form input[type="email"], .pure-form input[type="url"], .pure-form input[type="date"], .pure-form input[type="month"], .pure-form input[type="time"], .pure-form input[type="datetime"], .pure-form input[type="datetime-local"], .pure-form input[type="week"], .pure-form input[type="number"], .pure-form input[type="search"], .pure-form input[type="tel"], .pure-form input[type="color"], .pure-form select, .pure-form textarea {
+        background: #222;
+        border-color: #888;
+        box-shadow: inset 0 1px 3px #000;
+    }
+
+}
+
+
 /***************************************************/
 /********************* Live chat                   */
 

static/img/world.svg

@@ -30,6 +30,14 @@ changes:
 - ahhh it's viewBox not viewbox. +preserveAspectRatio. ~a
 -->
 <svg baseprofile="tiny" fill="#ececec" height="857" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" version="1.2" viewBox="0 0 2000 857" width="2000" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+  <![CDATA[
+    @media (prefers-color-scheme: dark) {
+        svg { fill: #666; }
+        circle { filter: brightness(1.5) saturate(1.4); }
+    }
+    ]]>
+  </style>
  <path d="M1383 261.6l1.5 1.8-2.9 0.8-2.4 1.1-5.9 0.8-5.3 1.3-2.4 2.8 1.9 2.7 1.4 3.2-2 2.7 0.8 2.5-0.9 2.3-5.2-0.2 3.1 4.2-3.1 1.7-1.4 3.8 1.1 3.9-1.8 1.8-2.1-0.6-4 0.9-0.2 1.7-4.1 0-2.3 3.7 0.8 5.4-6.6 2.7-3.9-0.6-0.9 1.4-3.4-0.8-5.3 1-9.6-3.3 3.9-5.8-1.1-4.1-4.3-1.1-1.2-4.1-2.7-5.1 1.6-3.5-2.5-1 0.5-4.7 0.6-8 5.9 2.5 3.9-0.9 0.4-2.9 4-0.9 2.6-2-0.2-5.1 4.2-1.3 0.3-2.2 2.9 1.7 1.6 0.2 3 0 4.3 1.4 1.8 0.7 3.4-2 2.1 1.2 0.9-2.9 3.2 0.1 0.6-0.9-0.2-2.6 1.7-2.2 3.3 1.4-0.1 2 1.7 0.3 0.9 5.4 2.7 2.1 1.5-1.4 2.2-0.6 2.5-2.9 3.8 0.5 5.4 0z" id="AF" name="Afghanistan">
  </path>
  <path class="Angola" d="M 1121.2 572 1121.8 574 1121.1 577.1 1122 580.1 1121.1 582.5 1121.5 584.7 1109.8 584.6 1109 605.1 1112.6 610.3 1116.2 614.3 1105.8 616.9 1092.3 616 1088.5 613 1065.8 613.2 1065 613.7 1061.7 610.8 1058.1 610.6 1054.7 611.7 1052 612.9 1051.5 608.9 1052.4 603.2 1054.4 597.3 1054.7 594.6 1056.6 588.8 1058 586.2 1061.3 582 1063.2 579.1 1063.8 574.4 1063.5 570.7 1061.9 568.4 1060.4 564.5 1059.1 560.7 1059.4 559.3 1061.1 556.8 1059.5 550.6 1058.3 546.3 1055.5 542.2 1056.1 541 1058.4 540.1 1060.1 540.2 1062.1 539.5 1078.8 539.6 1080.1 544.3 1081.7 548.2 1083 550.3 1085.1 553.6 1088.9 553.1 1090.7 552.2 1093.8 553.1 1094.7 551.5 1096.2 547.8 1099.7 547.5 1100 546.4 1102.9 546.4 1102.4 548.7 1109.2 548.6 1109.3 552.7 1110.4 555.1 1109.5 559 1109.9 563 1111.7 565.4 1111.3 573 1112.7 572.4 1115.1 572.6 1118.6 571.6 1121.2 572 Z">