Dark by default, added dimmer switches to clock #7

siznax · Mar 5, 2021 · fe6d4b6 · fe6d4b6
1 parent 15a5bd7
commit fe6d4b6
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 25 deletions.
diff --git a/Moo/play/lib.py b/Moo/play/lib.py
@@ -25,10 +25,12 @@
 EMOJI = {
     'app': '&#x1F3B7;',
     'base': '&#x1F3B5;',
+    'dark': '&#x1F505;',  # &#x1F505; U+1F505 Dim Button
     'fleuron': '&#x2766;',
     'heart': '&#x2661;',
     'hearted': '&#x1F49C;',
     'help': '&#x2754;',
+    'light': '&#x1F506;',  # &#x1F506; U+1F506 Bright Button
     'next': '&#x23ED;',
     'none': '&#x1F6AB;',
     'notfound': '&#x1F62D;',

diff --git a/Moo/play/static/custom-dark.css b/Moo/play/static/custom-dark.css
@@ -8,17 +8,17 @@
     5: rgb(227,227,227) <= play button
 */
 
-.bg-1 { background-color: rgb(36,36,36);    }
-.bg-2 { background-color: rgb(76,76,76);    }
-.bg-3 { background-color: rgb(135,135,135); }
-.bg-4 { background-color: rgb(156,156,156); }
-.bg-5 { background-color: rgb(227,227,227); }
+body.dark .bg-1 { background-color: rgb(36,36,36);    }
+body.dark .bg-2 { background-color: rgb(76,76,76);    }
+body.dark .bg-3 { background-color: rgb(135,135,135); }
+body.dark .bg-4 { background-color: rgb(156,156,156); }
+body.dark .bg-5 { background-color: rgb(227,227,227); }
 
-.clr-1 { color: rgb(36,36,36);    }
-.clr-2 { color: rgb(76,76,76);    }
-.clr-3 { color: rgb(135,135,135); }
-.clr-4 { color: rgb(156,156,156); }
-.clr-5 { color: rgb(227,227,227); }
+body.dark .clr-1 { color: rgb(36,36,36);    }
+body.dark .clr-2 { color: rgb(76,76,76);    }
+body.dark .clr-3 { color: rgb(135,135,135); }
+body.dark .clr-4 { color: rgb(156,156,156); }
+body.dark .clr-5 { color: rgb(227,227,227); }
 
 /*
   Highlight colors (shades of pink)
@@ -28,37 +28,37 @@
     c: rgb(254,168,252)
 */
 
-.bg-a { background-color: rgb(255,96,178); }
-.bg-b { background-color: rgb(255,75,161); }
-.bg-c { background-color: rgb(254,168,252); }
+body.dark .bg-a { background-color: rgb(255,96,178); }
+body.dark .bg-b { background-color: rgb(255,75,161); }
+body.dark .bg-c { background-color: rgb(254,168,252); }
 
-.clr-a { color: rgb(255,96,178); }
-.clr-b { color: rgb(255,75,161); }
-.clr-c { color: rgb(254,168,252); }
+body.dark .clr-a { color: rgb(255,96,178); }
+body.dark .clr-b { color: rgb(255,75,161); }
+body.dark .clr-c { color: rgb(254,168,252); }
 
 
-html, body {
+body.dark {
     background-color: black;
     color: rgb(76,76,76);
     font-family: sans-serif;
 }
 
-a {
+body.dark a {
     color: rgb(135,135,135);
 }
 
-b, i {
+body.dark b, body.dark i {
     color: white;
 }
 
-.box, .button {
+body.dark .box, body.dark .button {
     background-color: rgb(36,36,36);
 }
 
-#audio-table {
+body.dark #audio-table {
     background-color: black;
 }
 
-#track-title {
+body.dark #track-title {
     text-shadow: 0px 0px 16px magenta;
 }
diff --git a/Moo/play/static/js/audio.js b/Moo/play/static/js/audio.js
@@ -22,6 +22,19 @@ function adjustLayout() {
     }
 }
 
+
+function Bright() {
+    let body = document.querySelector("body")
+    body.classList.remove("dark")
+}
+
+function Dark() {
+    let body = document.querySelector("body")
+    body.classList.add("dark")
+}
+
+
+
 function gotoNext() {
     let next = control.getAttribute('next')
     if (next > 0) { 

diff --git a/Moo/play/templates/clock.html b/Moo/play/templates/clock.html
@@ -15,3 +15,12 @@
      style="margin-left: 8px;">{{ emoji.random | safe }}</a>
   {%- endif -%}
 </div>
+
+<div style="position: fixed; top: 8px; left: 12px;">
+  <a href="#"
+     id="dimmer-dark"
+     onclick="Dark()">{{ emoji.dark | safe }}</a>
+  <a href="#"
+     id="dimmer-light"
+     onclick="Bright()">{{ emoji.light | safe }}</a>
+</div>
diff --git a/Moo/play/templates/layout.html b/Moo/play/templates/layout.html
@@ -12,8 +12,7 @@
        href="{{ url_for('static', filename='ico/moo.ico') }}">
 
     <link rel="stylesheet" href="/static/style.css">
-
-    <!-- <link rel="stylesheet" href="/static/custom-dark.css"> -->
+    <link rel="stylesheet" href="/static/custom-dark.css">
 
     {% if request.path == '/' %}
     <title>moo {{ config.VERSION }}</title>
@@ -54,7 +53,7 @@
     {% endif %}
 
   </head>
-  <body onload="init({{ config.VERSION }});">
+  <body onload="init({{ config.VERSION }});" class="dark">
 
     {% block body %}{% endblock %}