Merge pull request 'feat/20-add-dark-mode-support' (#21) from feat/20-add-dark-mode-support into main

Reviewed-on: #21

priceybot2/sass/branding.scss

@@ -1,3 +1,5 @@
+@import "../node_modules/bulma/sass/utilities/functions.sass";
+
 //brand colors
 $nexi-white: #f8fafb; // Made up
 $nexi-lighter-black: #353535; // Made up
@@ -14,11 +16,10 @@ $nexi-orange: #F17C25;
 $nexi-darker-orange: #F44336;
 $nexi-yellow: #FFC107;
 
-$custom-colors:
+$custom-colors: (
-    (
+        "nexi-white": ($nexi-white, $nexi-black),
-        "nexi-white": ($nexi-white, findColorInvert($nexi-white)),
         "nexi-lighter-black": ($nexi-lighter-black, findColorInvert($nexi-lighter-black)),
-        "nexi-black": ($nexi-black, findColorInvert($nexi-black)),
+        "nexi-black": ($nexi-black, $nexi-white),
         "nexi-lighter-red": ($nexi-lighter-red, findColorInvert($nexi-lighter-red)),
         "nexi-red": ($nexi-red, findColorInvert($nexi-red)),
         "nexi-darker-red": ($nexi-darker-red, findColorInvert($nexi-darker-red)),
@@ -30,7 +31,7 @@ $custom-colors:
         "nexi-orange": ($nexi-orange, findColorInvert($nexi-orange)),
         "nexi-darker-orange": ($nexi-darker-orange, findColorInvert($nexi-darker-orange)),
         "nexi-yellow": ($nexi-yellow, findColorInvert($nexi-yellow)),
-    );
+);
 
 // Used for texts etc.
 $grey: $nexi-lighter-black;
@@ -47,7 +48,8 @@ $purple: $nexi-purple;
 $red: $nexi-red;
 
 // https://github.com/jgthms/bulma/blob/master/sass/utilities/derived-variables.sass
-$primary: $nexi-white;
+$primary: $nexi-black;
+$primary-invert: $nexi-white;
 
 //$info: $cyan;
 //$success: $green;

priceybot2/sass/dark-mode.scss

@@ -0,0 +1,39 @@
+.dark-toggle {
+    --size: 2rem;
+
+    appearance: none;
+    outline: none;
+    cursor: pointer;
+
+    width: var(--size);
+    height: var(--size);
+    box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+    border-radius: 999px;
+    color: hsl(240, 100%, 95%);
+
+    transition: all 500ms;
+
+    &:checked {
+        --ray-size: calc(var(--size) * -0.4);
+        --offset-orthogonal: calc(var(--size) * 0.65);
+        --offset-diagonal: calc(var(--size) * 0.45);
+
+        transform: scale(0.75);
+        color: hsl(40, 100%, 50%);
+        box-shadow:
+            inset 0 0 0 var(--size),
+            calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+            var(--offset-orthogonal) 0 0 var(--ray-size),
+            0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+            0 var(--offset-orthogonal) 0 var(--ray-size),
+            calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+            var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+            calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+            var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+    ;
+    }
+}
+
+.dark-toggle-animation {
+    transition: background 500ms;
+}

priceybot2/sass/main.scss

@@ -2,6 +2,7 @@
 
 // Our scss files
 @import "branding";
+@import "dark-mode";
 
 // Import after our branding so colors work.
 @import "../node_modules/bulma/bulma.sass";

priceybot2/static/scripts/dark-mode.js

@@ -0,0 +1,72 @@
+// Set theme on load.
+function init() {
+    // Default to light theme.
+    let theme = 'light'
+
+    // Check media query prefer and set it as dark.
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        theme = 'dark';
+    }
+
+    // Add event handler so if they change media query it'll update. overkill? yes.
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+        let theme = event.matches ? "dark" : "light";
+
+        applyTheme(theme);
+    });
+
+    // If they have manually changed it use that theme instead.
+    theme = localStorage.getItem("theme") ?? theme
+
+    // Set it on body.
+    document.body.dataset.theme = theme;
+
+    // If dark-mode was toggle above we need to fix the icon.
+    let toggle = document.getElementsByName("dark-mode-toggle")[0];
+
+    // if it's already dark check it.
+    toggle.checked = theme === 'dark';
+
+    applyTheme(theme);
+}
+
+// Toggle the theme.
+function darkLight() {
+    // Get current theme.
+    let element = document.body;
+
+    // Invert it.
+    switch (element.dataset.theme) {
+        case "light":
+            element.dataset.theme = "dark";
+            break;
+        case "dark":
+            element.dataset.theme = "light";
+            break;
+    }
+    localStorage.setItem("theme", element.dataset.theme);
+
+    applyTheme(element.dataset.theme);
+}
+
+// Apply theme
+function applyTheme(theme) {
+    let primaryElements
+    // Find elements and update class.
+    switch (theme) {
+        case 'dark':
+            primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
+            primaryElements.forEach((element) => {
+                element.classList.remove('is-primary-invert');
+                element.classList.add('is-primary');
+            });
+            break;
+        case 'light':
+            primaryElements = Array.from(document.querySelectorAll('.is-primary'));
+            primaryElements.forEach((element) => {
+                element.classList.remove('is-primary');
+                element.classList.add('is-primary-invert');
+            });
+            break;
+    }
+}

priceybot2/templates/base.html

@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
+    <head>
-<head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Flask Auth Example</title>
+        <title>Pricey Bot</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.3') }}">
+        <script type="application/javascript" src="{{ url_for('static', filename='scripts/dark-mode.js', version='0.1') }}"></script>
-</head>
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.1') }}">
-
+    </head>
-<body>
-    <section class="hero is-primary is-fullheight">
 
+    <body data-theme="light" onload="init()">
+        <section class="hero is-primary is-fullheight dark-toggle-animation">
             <div class="hero-head">
                 <nav class="navbar">
                     <div class="container">
@@ -50,7 +49,12 @@
                     {% endblock %}
                 </div>
             </div>
-    </section>
-</body>
 
+            <div class="hero-foot">
+                <label class="is-pulled-right p-4">
+                    <input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
+                </label>
+            </div>
+        </section>
+    </body>
 </html>

start.sh

@@ -0,0 +1,2 @@
+export FLASK_APP=priceybot2
+flask run --host=0.0.0.0