Merge pull request #39 from defeated/dark-mode

feat: dark mode
ublue-os · Nov 11, 2024 · 3165a5f · 3165a5f
2 parents 6b5d978 + f0aac46
commit 3165a5f
Show file tree

Hide file tree

Showing 10 changed files with 185 additions and 11 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,6 +1,10 @@
 source "https://rubygems.org"
 ruby RUBY_VERSION
 
+# fix for error https://github.com/ffi/ffi/issues/1103:
+#   ffi-1.17.0-x86_64-linux-musl requires rubygems version >= 3.3.22, which is
+gem "ffi", "< 1.17"
+
 # Hello! This is where you manage which Jekyll version is used to run.
 # When you want to use a different version, change it below, save the
 # file and run `bundle install`. Run Jekyll with `bundle exec`, like so:

diff --git a/_config.yml b/_config.yml
@@ -21,7 +21,7 @@ description: > # this means to ignore newlines until "baseurl:"
   The next generation Linux workstation, designed for reliability, performance, and sustainability. Built for the love of the game. Welcome to indie Cloud Native.
 
 # Add your baseurl here (your repository) but DO NOT CHANGE THE LINE NUMBER without editing .circleci/circle_urls.sh
-baseurl: "/" # the subpath of your site, e.g. /blog
+baseurl: "" # the subpath of your site, e.g. /blog
 
 # This is mostly for testing
 url: "https://docs.projectbluefin.io" # the base hostname & protocol for your site

diff --git a/_includes/footer.html b/_includes/footer.html
@@ -2,7 +2,12 @@
   <div class="container-fluid mx-sm-5">
     <div class="row">
       <div class="col-6 col-sm-4 text-xs-center order-sm-2">
-        <ul class="list-inline mb-0">  
+        <ul class="list-inline mb-0">
+          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
+            <a class="text-white" target="_blank" href="{{ site.repo }}">
+              <i class="fab fa-github"></i>
+            </a>
+          </li>
           {% if site.twitter %}
             <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Twitter" data-original-title="Twitter">
               <a class="text-white" target="_blank" href="https://twitter.com/{{ site.twitter }}">
@@ -20,17 +25,22 @@
         </ul>
       </div>
       <div class="col-6 col-sm-4 text-right text-xs-center order-sm-3">
-        <ul class="list-inline mb-0">  
-          <li class="list-inline-item mx-2 h3" data-toggle="tooltip" data-placement="top" title="" aria-label="GitHub" data-original-title="GitHub">
-            <a class="text-white" target="_blank" href="{{ site.repo }}">
-              <i class="fab fa-github"></i>
+        <ul class="list-inline mb-0">
+          <li class="list-inline-item h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Toggle Light Theme" data-original-title="Toggle Light Theme">
+            <a class="text-white" href="#" data-theme-toggle="light">
+              <i class="fas fa-sun"></i>
+            </a>
+          </li>
+          <li class="list-inline-item h3" data-toggle="tooltip" data-placement="top" title="" aria-label="Toggle Dark Theme" data-original-title="Toggle Dark Theme">
+            <a class="text-white" href="#" data-theme-toggle="dark">
+              <i class="fas fa-moon"></i>
             </a>
           </li>
         </ul>
       </div>
       <div class="col-12 col-sm-4 text-center py-2 order-sm-2">
         <small class="text-white">© {{ 'now' | date: "%Y" }} {{ site.author }} All Rights Reserved</small>
-        <p class="text-white">Bluefin is built with <a href=https://universal-blue.org">Universal Blue</a>. Evolve.</p>	
+        <p class="text-white">Bluefin is built with <a href=https://universal-blue.org">Universal Blue</a>. Evolve.</p>
       </div>
     </div>
   </div>

diff --git a/_includes/head.html b/_includes/head.html
@@ -36,6 +36,7 @@
 
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/palette.css">
+<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/palette-dark.css">
 <script
   src="{{ site.baseurl }}/assets/js/jquery-3.3.1/jquery-3.3.1.min.js"
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8= sha256-T+aPohYXbm0fRYDpJLr+zJ9RmYTswGsahAoIsNiMld4="

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="no-js">
+<html lang="en" class="no-js dark">
   <!-- Copyright 2019-2021 Vanessa Sochat-->
   {% include head.html %}
   {% include google-analytics.html %}

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -18614,5 +18614,50 @@ footer {
         margin-top: 30px;
         margin-bottom: 30px;
     }
-
+}
+
+/* Dark mode overrides */
+:root {
+    --dark-300: #cbd5e1;
+    --dark-500: #64748b;
+    --dark-700: #334155;
+    --dark-800: #1e293b;
+    --dark-900: #0f172a;
+    --dark-950: #020617;
+}
+
+html.dark body {
+    background-color: var(--dark-900);
+    color: var(--dark-500);
+}
+
+html.dark .td-sidebar-nav__section-title a {
+    color: var(--dark-500);
+
+    &:hover {
+        color: var(--dark-300);
+    }
+}
+
+html.dark .td-toc {
+    border-color: var(--dark-700);
+}
+
+[data-theme-toggle] {
+    transition: color 300ms ease-in;
+}
+
+html:not(.dark) [data-theme-toggle=dark] {
+    color: var(--dark-500) !important;
+}
+
+html.dark [data-theme-toggle=light] {
+    color: var(--dark-500) !important;
+}
+
+@media(min-width:768px) {
+    html.dark .td-sidebar {
+        background-color: var(--dark-800);
+        border-color: var(--dark-700);
+    }
 }
diff --git a/assets/css/palette-dark.css b/assets/css/palette-dark.css
@@ -0,0 +1,85 @@
+html.dark {
+
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight, .highlight .w {
+  color: #f8f8f2;
+  background-color: #272822;
+}
+.highlight .err {
+  color: #272822;
+  background-color: #f92672;
+}
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
+  color: #75715e;
+}
+.highlight .cp {
+  color: #f4bf75;
+}
+.highlight .nt {
+  color: #f4bf75;
+}
+.highlight .o, .highlight .ow {
+  color: #f8f8f2;
+}
+.highlight .p, .highlight .pi {
+  color: #f8f8f2;
+}
+.highlight .gi {
+  color: #a6e22e;
+}
+.highlight .gd {
+  color: #f92672;
+}
+.highlight .gh {
+  color: #66d9ef;
+  background-color: #272822;
+  font-weight: bold;
+}
+.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+  color: #ae81ff;
+}
+.highlight .kc {
+  color: #fd971f;
+}
+.highlight .kt {
+  color: #fd971f;
+}
+.highlight .kd {
+  color: #fd971f;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+  color: #a6e22e;
+}
+.highlight .sa {
+  color: #ae81ff;
+}
+.highlight .sr {
+  color: #a1efe4;
+}
+.highlight .si {
+  color: #cc6633;
+}
+.highlight .se {
+  color: #cc6633;
+}
+.highlight .nn {
+  color: #f4bf75;
+}
+.highlight .nc {
+  color: #f4bf75;
+}
+.highlight .no {
+  color: #f4bf75;
+}
+.highlight .na {
+  color: #66d9ef;
+}
+.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #a6e22e;
+}
+.highlight .ss {
+  color: #a6e22e;
+}
+
+}
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -58,3 +58,34 @@ layout: null
     };
     Search.init();
 }(jQuery));
+(function ($) {
+    'use strict';
+    var Theme = {
+        init: function() {
+            const htmlClasses = document.documentElement.classList;
+            const savedTheme = localStorage.theme;
+            const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+            const klass = "dark";
+
+            if (savedTheme === klass || (!savedTheme && prefersDark)) {
+                htmlClasses.add(klass);
+            } else {
+                htmlClasses.remove(klass);
+            }
+
+            $(document).ready(function() {
+                $(document).on("click", "[data-theme-toggle]", function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    const mode = e.currentTarget.dataset.themeToggle;
+                    htmlClasses.remove(klass);
+                    htmlClasses.toggle(mode);
+
+                    localStorage.theme = mode;
+                });
+            });
+        },
+    };
+    Theme.init();
+}(jQuery));
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -1,4 +1,3 @@
-version: '3.7'
 services:
   site:
     container_name: docsy

diff --git a/pages/search.html b/pages/search.html
@@ -7,7 +7,6 @@
 ---
 
 <input class="form-control td-search-input" type="search" name="q" id="search-input" placeholder="&#xf002 Search this site…"  style="margin-top:5px" autofocus>
-<i style="color:white; margin-right:8px; margin-left:5px" class="fa fa-search"></i>
 
 <p><span id="search-process">Loading</span> results <span id="search-query-container" style="display: none;">for "<strong id="search-query"></strong>"</span></p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,6 @@ @@
     ---
     <input class="form-control td-search-input" type="search" name="q" id="search-input" placeholder="&#xf002 Search this site…"  style="margin-top:5px" autofocus>
-    <i style="color:white; margin-right:8px; margin-left:5px" class="fa fa-search"></i>
     <p><span id="search-process">Loading</span> results <span id="search-query-container" style="display: none;">for "<strong id="search-query"></strong>"</span></p>
@@ Expand Down @@