Add dark mode (#378)

* Add dark mode classes * Add dark mode toggle interaction * Add dark mode toggle to nav * Add coockie script and detection * Update screen images and add darkmode imgs * Higher resolution screen images * Fix colors on mobile * Fix screen margin-top on mobile * Color adjustments on main CTAs * Add filters to images to invert on darkmode * Darker grey background panels * Invert features svgs * Missing seperator * Refine screen image * Remove language image paths * Refine screen images * Replace invert filter with contrast * Reduce image size * Adjust colors on dark mode * Correct quotes * Set cookie * Add condition to switch to dark mode based on system settings * Correct color of input markets currentcy selection * Add FAQ toogle close open icons * Scale image * Add icon to toggle * Correct logic for handeling cookie and os setting * Change img switch on darkmode from content to bg-img for wider support * Smooth dark mode transition * Update _layouts/default.html Co-authored-by: m52go <mfiver@gmail.com> * Update _layouts/default.html Co-authored-by: m52go <mfiver@gmail.com> * Update _layouts/default.html Co-authored-by: m52go <mfiver@gmail.com> Co-authored-by: m52go <mfiver@gmail.com>
bisq-network · Jul 31, 2020 · 307383b · 307383b
1 parent 3a438f2
commit 307383b
Show file tree

Hide file tree

Showing 20 changed files with 390 additions and 22 deletions.
diff --git a/_includes/main_nav.html b/_includes/main_nav.html
@@ -113,6 +113,11 @@
       </li>
       {% endif %}
 
+
+      <li class="nav-item">
+        <div class="mode-toggle nav-link"><img alt="mode toggle" src="/images/mode-toggle.svg" /></div>
+      </li>
+
     </ul>
   </div>
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -62,6 +62,7 @@
 
         <title>{{ page.title }}</title>
 
+        <script src="/js/js.cookie.min.js"></script>
         <script defer src="/js/jquery-3.3.1.min.js"></script>
         <script defer src="/js/popper.min.js"></script>
         <script defer src="/js/bootstrap.min.js"></script>
@@ -120,6 +121,20 @@
     </head>
 
     <body class="home page-template-default page page-id-6 custom-background">
+    <script>
+      if (Cookies.get('darkmode') === undefined && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        Cookies.set("darkmode", 0);
+      }else if(Cookies.get('darkmode') === undefined && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        document.body.classList.add("dark-mode");
+        Cookies.set("darkmode", 1);
+      }else if (Cookies.get('darkmode') == 1) {
+        Cookies.set("darkmode", 1);
+        document.body.classList.add("dark-mode");
+      }else{
+        Cookies.set("darkmode", 0);
+        document.body.classList.remove("dark-mode");
+      }
+    </script>
 
       {% include main_nav.html %}
 

diff --git a/_layouts/page_home.html b/_layouts/page_home.html
@@ -114,20 +114,19 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
                           {{ item.getStarted }}
                       </a>
 
-                      {% comment %}
 
+
+                      {% comment %}
                       <a id="play-video" href="/" class="btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn ">
                                 <img src="/images/icon-play-g.svg" class="os-icon os-icon-g" alt="Play Bisq video" loading="lazy">
                                 <img src="/images/icon-play-w.svg" class="os-icon os-icon-w" alt="Play Bisq video" loading="lazy">
                                 Play Video
                       </a>
-
                       <div id="video-overlay" style="display:none">
                         <div class="embed-responsive">
                           <iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
                         </div>
                       </div>
-
                       {% endcomment %}
 
                     </div>
@@ -149,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/bisq_screen0.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>
 
@@ -244,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/bisq_screen0.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/bisq_screen1.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/bisq_screen0.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/bisq_screen1.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>