Dark Mode Support

dolweb/static/css/dolphin-dark.css

@@ -0,0 +1,227 @@
+@media (prefers-color-scheme: dark) {
+    body{
+        background-color: #2b2b2b;
+    /*
+        outer color
+        #2b2b2b
+        or
+        #000000
+        or
+        #111111 / #121212;
+        */
+        color: #fff;
+    }
+
+    .jumbotron{
+    background-color: #1e1e1e;   
+    }
+
+    .well a{
+        color: #07b9ff;
+    }
+
+    .well{
+    /*
+    Inner color
+        #1e1e1e
+
+        inner color background-image gradient
+        linear-gradient(to bottom, #121212 0, #1e1e1e 100%)
+        or 
+        linear-gradient(to bottom, #000000 0, #1e1e1e 100%)
+        border-color
+        #313131
+
+    */
+
+        background-image: linear-gradient(to bottom, #000000 0, #1e1e1e 100%);
+        background-image: -webkit-linear-gradient(top, #000000 0, #1e1e1e 100%);
+        background-image: -o-linear-gradient(top, #000000 0, #1e1e1e 100%);
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), to(#1e1e1e));
+        border-color: #313131
+
+        /*
+        background-image: linear-gradient(to bottom, #1e1e1e 0, #272727 100%);*/
+    }
+
+    /*
+        Carousel edit
+        add border radius of 20px (more like 15px)
+    */
+
+    .carousel-inner, .carousel-control.right, .carousel-control.left{
+        border-radius: 10px;
+    }
+
+    /*
+        carousel gallery
+        add border radius of 5px
+        .img.fp-sshot
+    */
+    .img.fp-sshot{
+        border-radius: 5px;
+    }
+
+    .form-control{
+        background-color: #000;
+        color: #fff;
+        border: 1px solid #616161;
+    }
+
+    .input-group-btn>.btn{
+        background-color: #66afe9;
+    }
+    .dropdown-menu>li>a{
+        color: #fff;
+    }
+
+    .dropdown-menu{
+        background-color: #000;
+
+    /* background-color: #1e1e1e;*/
+    }
+
+    .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.active>a{
+        background-image: linear-gradient(to bottom, #797979 0, #101010 100%);
+        background-image: -webkit-linear-gradient(top, #797979 0, #101010 100%);
+        background-image: -o-linear-gradient(top, #797979 0, #101010 100%);
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #797979), to(#101010));
+    }
+
+
+
+    /*
+        Addition rule when in mobile hamburger mode
+        PLACE BUTTON BELOW HAMBURGER TOGGLE
+        float: right;
+        margin-right: 10px;
+    */
+
+
+    /*Implement dark mode css media query*/
+    /*
+    @media (prefers-color-scheme: dark) {
+    body {
+        color: #eee;
+        background: #121212;
+    }
+
+    a {
+        color: #809fff;
+    }
+    }*/
+
+
+    /* Filter (dim) image brightness for better viewing
+    Or apply it via media query */
+    img {
+        filter: brightness(.95);
+    }
+
+    h4.modal-title {
+        color: black;
+    }
+
+    .navbar-logo>img:hover {
+        filter: brightness(2);
+    }
+
+
+    /*Downloads Page*/
+    pre.always-ltr{
+        color: #fff;
+        background-color: #000000;
+    }
+
+    .alert-info{
+        background-image: linear-gradient(to bottom, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -o-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353434), to(#1f1f1f));
+        border-width: medium;
+        color: #00b5ff;
+        border-color: #00b5ff;
+    }
+
+    .alert-danger{
+        background-image: linear-gradient(to bottom, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -o-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353434), to(#1f1f1f));
+        border-width: medium;
+        color: #ff4040;
+        border-color: #ff4040;
+    }
+
+    .alert-warning{
+        background-image: linear-gradient(to bottom, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -o-linear-gradient(top, #353434 0, #1f1f1f 100%);
+        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #353434), to(#1f1f1f));
+        border-width: medium;
+        color: #f5e79e;
+        border-color: #f5e79e;
+    }
+
+
+    /*Blog pages*/
+    .breadcrumb{
+        background-color: #1b1b1b;
+    }
+
+
+    /* compatibility page */
+    td.category>img{
+        filter: invert(1) !important;
+    }
+
+    .compat-list tbody tr:nth-child(2n) {
+        background-color: #0c0c0c;
+    }
+
+    .compat-list tbody tr:nth-child(2n+1) {
+        background-color: #2b2b2b;
+    }
+
+    .pagination>li>a, .pagination>li>span{
+        background-color: #2b2b2b;
+    }
+
+
+    .pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{
+        color: af471d;
+    }
+
+
+    /* guide pages */
+    .toc{
+        background-color: #1e1e1e;
+    }
+
+    div.thumbinner{
+        background: #1e1e1e;
+    }
+
+    kbd{
+        color: #000;
+        background-color: #fcfcfc;
+    }
+
+    code{
+        color: #ff0041;
+        background-color: #3c0000;
+    }
+
+    pre{
+        color: #ffffff;
+        background-color: #000000;
+    }
+
+    table.wikitable, table.prettytable{
+        background-color: #2b2b2b;
+    }
+
+    table.wikitable > tr > th, table.wikitable > * > tr > th{
+        background-color: #1e1e1e;
+    }
+} /* End of main media query*/

dolweb/static/css/dolphin-light.css

@@ -0,0 +1,3 @@
+/*
+Empty css file used to revert style to original/light
+*/

dolweb/static/css/dolphin.css

@@ -671,6 +671,23 @@ div.draft-warning {
     background: #ff9100;
 }
 
+/*toggle svg*/
+svg.feather{
+    stroke: #999;
+    margin-left: 10px;
+    margin-top: 13px;
+    cursor:pointer;
+    float:right;
+}
+
+svg.feather:hover {
+    stroke: white;
+}
+
+button.navbar-toggle {
+    margin-left: 10px;
+}
+
 /* "Stolen" from Zinnia's base CSS. */
 .container ul.paginator {
   margin: 0;

dolweb/static/js/toggle-mode.js

@@ -0,0 +1,110 @@
+// Mode toggling built with help from https://css-tricks.com/author/mohamedadhuham/ 
+// on https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
+
+
+
+//////////// Var Initialization //////////////
+
+// Select the icon
+const sunMoon = document.querySelector("#sunMoon")
+
+// set alternative icon styles
+const sun = ' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'
+const moon =' <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>'
+
+// select the current css theme
+const cssSheet = document.querySelector("#theme-link")
+
+// Check for dark mode preference on the browser/os preference
+// returns boolean in ".matches" attribute
+const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)")
+
+// Get the user's theme preference from local storage, if there
+const currentTheme = localStorage.getItem("theme")
+
+
+/////// Check for theme on intial page load (local storage or os/browser preference) /////////
+
+// run on page load
+$(document).ready(function(){
+  // 1. if the user has a set mode in their local storage use it
+  if (currentTheme == "dark") {
+    sunMoon.innerHTML = sun
+    cssSheet.href = "../m/static/css/dolphin-dark.css"
+
+  // 2. Otherwise check if light mode is set in localstorage
+  } else if (currentTheme=="light"){
+    sunMoon.innerHTML = moon
+    cssSheet.href = "../m/static/css/dolphin-light.css"
+  }
+
+  // 3. Otherwise check if the user has a default OS/Browser mode preference
+  // could remove os/browser checks as desired and just default to light in above step 2
+  else if (prefersDarkScheme.matches==true){
+    sunMoon.innerHTML = sun
+    cssSheet.href = "../m/static/css/dolphin-dark.css"
+  }
+  // 4. default to light mode
+  else {
+    sunMoon.innerHTML = moon
+    cssSheet.href = "../m/static/css/dolphin-light.css"
+  }
+});
+
+
+///////// Handle icon click events/requests to change the mode to light or dark //////////
+
+// Event that activates when sun or moon is clicked. 
+// Minor optimization of # of resize calls can be done with throttle wrapper around 
+// After testing, didn't seem worth it
+sunMoon.addEventListener("click", function() {
+  // If light mode is already set as the href, then change it to dark mode
+  if (!cssSheet.href.includes("dolphin-light.css")) {
+    sunMoon.innerHTML = moon
+    cssSheet.href = "../m/static/css/dolphin-light.css"
+    var theme = 'light'
+
+  // otherwise the theme is currently dark and needs to change it to light mode
+  } else {
+    sunMoon.innerHTML = sun
+    cssSheet.href = "../m/static/css/dolphin-dark.css"
+    var theme = 'dark'
+  }
+  // Lastly, save the  current preference to localStorage to keep using it on new page requests/other pages
+  localStorage.setItem("theme", theme)
+
+})
+
+
+
+////// Move light/dark icons between mobile and desktop view ///////
+
+// toggle where the dark/light mode icon appears
+const lastNavbarLi = document.querySelector("#lastNavbarLi")
+const hamburger = document.querySelector("#hamburger")
+
+function moveSunMoon(){
+  // if window width indicates mobile view
+  if  (window.innerWidth < 768) {
+    sunMoon.remove()
+    hamburger.after(sunMoon)
+ }
+ // else in desktop view
+  else {
+    sunMoon.remove()
+    lastNavbarLi.after(sunMoon)
+  }
+}
+
+// bootstrap switches between mobile and desktop at 768 px by default
+// call moveSunMoon function when first loading the page and when the page is resized
+
+// if window resize call 
+$(window).resize(function() {
+  moveSunMoon()
+});
+
+// run when document loads
+$(document).ready(function() {
+  moveSunMoon()
+});