feat: clean up code

priceybot2/sass/dark-mode.scss

@@ -21,15 +21,19 @@
         transform: scale(0.75);
         color: hsl(40, 100%, 50%);
         box-shadow:
-                inset 0 0 0 var(--size),
+            inset 0 0 0 var(--size),
-                calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+            calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
-                var(--offset-orthogonal) 0 0 var(--ray-size),
+            var(--offset-orthogonal) 0 0 var(--ray-size),
-                0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+            0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
-                0 var(--offset-orthogonal) 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),
+            calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
-                var(--offset-diagonal) var(--offset-diagonal) 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),
+            calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
-                var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
+            var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size),
     ;
     }
 }
+
+.dark-toggle-animation {
+    transition: background 500ms;
+}

priceybot2/static/css/main.css

@@ -17,6 +17,9 @@
     color: #ffaa00;
     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; }
+
 /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
 /* Bulma Utilities */
 .button, .input, .textarea, .select select, .file-cta,

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,16 +1,16 @@
 <!DOCTYPE html>
 <html class="is-clipped" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
     <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>
+        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css', version='0.1') }}">
     </head>
 
-    <body data-theme="dark" onload="init()">
+    <body data-theme="light" onload="init()">
-        <section class="hero is-primary is-fullheight">
+        <section class="hero is-primary is-fullheight dark-toggle-animation">
             <div class="hero-head">
                 <nav class="navbar">
                     <div class="container">
@@ -51,57 +51,10 @@
             </div>
 
             <div class="hero-foot">
-                <label class="is-right">
+                <label class="is-pulled-right p-4">
                     <input name="dark-mode-toggle" class="dark-toggle" onclick="darkLight()" type="checkbox">
                 </label>
             </div>
         </section>
     </body>
-
-    <script>
-        function init() {
-            let theme = localStorage.getItem("theme") ?? "dark";
-            document.body.dataset.theme = theme;
-
-            applyTheme(theme);
-        }
-
-        function darkLight() {
-            let element = document.body;
-            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);
-        }
-
-        function applyTheme(theme) {
-            console.log(theme)
-            let primaryElements
-            switch (theme) {
-                case 'dark':
-                    primaryElements = Array.from(document.querySelectorAll('.is-primary-invert'));
-                    console.log(primaryElements)
-                    primaryElements.forEach((element) => {
-                        element.classList.remove('is-primary-invert');
-                        element.classList.add('is-primary');
-                    });
-                    break;
-                case 'light':
-                    primaryElements = Array.from(document.querySelectorAll('.is-primary'));
-                    console.log(primaryElements)
-                    primaryElements.forEach((element) => {
-                        element.classList.remove('is-primary');
-                        element.classList.add('is-primary-invert');
-                    });
-                    break;
-            }
-        }
-    </script>
 </html>