Dark mode

_layouts/page_home.html

@@ -148,7 +148,7 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
               </div>
               <div class="col-md-12 order-md-1 text-md-left homepage-hero">
-                <img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="{% lingual_link image %}images/screens/bisq_hero_light.png" loading="lazy">
+                <img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" style="width: 100%; display: block;" src="/images/screens/bisq_hero_light.png" loading="lazy">
               </div>
             </div>
 
@@ -243,10 +243,10 @@ <h2>{{ item.hGetStarted }}</h2>
       </ol>
     </div>
     <div class="col-12 col-md-7 offset-0 offset-md-1">
-      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="{% lingual_link image %}images/screens/step1_light.png" loading="lazy"></div>
-      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="{% lingual_link image %}images/screens/step2_light.png" loading="lazy"></div>
-      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="{% lingual_link image %}images/screens/step3_light.png" loading="lazy"></div>
-      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="{% lingual_link image %}images/screens/step4_light.png" loading="lazy"></div>
+      <div class="getting-started-img step-image step-image-1 d-block"><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/screens/step1_light.png" loading="lazy"></div>
+      <div class="getting-started-img step-image step-image-2 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/screens/step2_light.png" loading="lazy"></div>
+      <div class="getting-started-img step-image step-image-3 d-none" ><img class="img-fluid shadow-lg" alt="Offer Book view inside Bisq" src="/images/screens/step3_light.png" loading="lazy"></div>
+      <div class="getting-started-img step-image step-image-4 d-none" ><img class="img-fluid shadow-lg" alt="Open Trades view inside Bisq" src="/images/screens/step4_light.png" loading="lazy"></div>
 
     </div>
   </div>

css/styles.scss

@@ -625,7 +625,7 @@ nav .mobile-language-selector button {
 }
 
 .getting-started-img {
-  width: 210%
+  width: 180%
 }
 
 .features-pic {
@@ -1323,7 +1323,7 @@ getting started page
 
 
 body.dark-mode, body.dark-mode .dropdown-menu {
-    background: #0a0a0a;
+    background: #101010;
     color: #f3f3f3;
 }
 
@@ -1373,12 +1373,14 @@ body.dark-mode .more-info-desktop .dropdown-menu .dropdown-item {
 }
 
 body.dark-mode .navbar {
-    border-bottom: #222 1px solid;
-    background-color: #000 !important;
+    border-bottom: #101010 1px solid;
+    background-color: #101010 !important;
 }
 
 body.dark-mode .navbar-light .navbar-nav .nav-item .nav-link {
-    border-bottom: #222 1px solid;
+    border-bottom: #101010 1px solid;
+    padding-left: 0;
+    padding-right: 0;
 }
 
 body.dark-mode .navbar-light .navbar-nav .nav-link {
@@ -1389,8 +1391,9 @@ body.dark-mode .navbar-light .navbar-nav .nav-item.current .nav-link {
     color: #fff;
 }
 
-body.dark-mode .navbar-light .navbar-nav .nav-item.current .nav-link, body.dark-mode .navbar-light .navbar-nav .nav-item:hover .nav-link {
-    border-bottom: #25B135 1px solid;
+body.dark-mode .navbar-light .navbar-nav .nav-item.current .nav-link,
+body.dark-mode .navbar-light .navbar-nav .nav-item:hover .nav-link {
+    border-bottom: #6f6f6f 1px solid;
 }
 
 body.dark-mode .grey {
@@ -1430,7 +1433,12 @@ body.dark-mode #tables tbody tr {
 }
 
 body.dark-mode .split-first {
-    background: #0c0c0c;
+    background: #101010;
+}
+
+body.dark-mode .split-last {
+    -webkit-filter: brightness(0.8);
+            filter: brightness(0.8);
 }
 
 body.dark-mode .conclusion {
@@ -1457,12 +1465,16 @@ body.dark-mode .btn-secondary:hover {
 
 
 
-body.dark-mode .community-links li img,
-body.dark-mode .badge-img {
+body.dark-mode .community-links li img {
   -webkit-filter: invert(1);
           filter: invert(1);
 }
 
+body.dark-mode .badge-img {
+  -webkit-filter: contrast(0.8);
+          filter: contrast(0.8);
+}
+
 
 body.dark-mode #getting-started .admonition.grey {
     background-color: #151515;
@@ -1481,6 +1493,10 @@ body.dark-mode .chart-stat-container .stat-chart, body.dark-mode #container {
     background: #1d1d1d;
 }
 
+body.dark-mode .plain-stat-container .stat-label {
+    color: #888888;
+}
+
 
 body.dark-mode rect.highcharts-plot-background, body.dark-mode svg.highcharts-root rect{
     fill: #1d1d1d;
@@ -1522,7 +1538,7 @@ body.dark-mode .chosen-container-single .chosen-search input[type="text"] {
 
 @media (max-width: 991px) {
     body.dark-mode ul.navbar-nav.ml-auto {
-      background: #000;
+      background: #101010;
     }
     body.dark-mode .navbar-light .navbar-nav .nav-item .nav-link {
         border-bottom: none;