dark mode (inverted colors)

Author: michaelkolesidis

css/style.min.css

@@ -50,6 +50,7 @@ body {
   font-family: "Spartan", sans-serif;
   // overflow: hidden; /* Hide scrollbars */
   font-size: 90%;
+  background-color: #fff;
 }
 
 a,
@@ -144,7 +145,7 @@ a:link {
     background: white;
   }
 
-  #dark {
+  #dark-button {
     font-size: 1.9rem;
     padding-top: 0.5rem;
     img {
@@ -844,6 +845,24 @@ a:link {
   font-size: 3rem;
 }
 
+/* --------------------------------------------------------------------- */
+/* Inverted Colors */
+/* --------------------------------------------------------------------- */
+#overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: none;
+  background-color: white;
+  opacity: 0.9;
+  mix-blend-mode: difference;
+  height: 100vh;
+  pointer-events: none; // So that elements below element are clickable
+  z-index: 5;
+}
+
 /* --------------------------------------------------------------------- */
 /* Media Queries */
 /* --------------------------------------------------------------------- */

css/style.min.css.map

@@ -47,6 +47,11 @@ export default function header(darkMode) {
 
 <div id="buttons">
 
+  <button type="button" id="dark-button">
+    <img src="./assets/icons/contrast.svg">
+  </button>
+  <button id="button-placeholder"></button>
+
   <div id="nav-container">
     <div class="bg"></div>
     <div class="button" tabindex="0">

sass/style.scss

@@ -56,6 +56,10 @@ export default function index() {
     <!-- Footer -->
     <!--------------------------------------------------------------------->
     <div id="footer"></div>
+    <!--------------------------------------------------------------------->
+    <!-- Inverted Colors -->
+    <!--------------------------------------------------------------------->
+    <div id="overlay"></div>
 </div>
 `;
 }

src/elements/header.ts

@@ -0,0 +1,23 @@
+/*
+ * Invert Colors
+ * Part of the JSS-01 | JavaScript Software Synthesizer project
+ * Copyright (c) 2022 Michael Kolesidis
+ * GNU General Public License v3.0
+ *
+ * The Invert Colors functions inverts the colors
+ * of the whole application, mimicking dark mode
+ * toggle functionality.
+ */
+
+export default function invertColors() {
+  const darkButton = document.getElementById("dark-button");
+  const overlay = document.getElementById("overlay");
+  let inverted = false;
+
+  darkButton.addEventListener("click", () => {
+    inverted
+      ? (overlay.style.display = "none")
+      : (overlay.style.display = "block");
+    inverted = !inverted;
+  });
+}

src/elements/index.ts

@@ -3,7 +3,7 @@
  *  Copyright (c) 2022 Michael Kolesidis
  *  GNU General Public License v3.0
  *
- */ 
+ */
 
 // ---------------------------------------------------------------------
 // ---------------------------------------------------------------------
@@ -35,6 +35,7 @@ import consoleIntro from "./functions/consoleIntro.js";
 import midiToNoteString from "./functions/midiToNoteString.js";
 import keyMapper from "./functions/keyMapper.js";
 import showHide from "./functions/showHide.js";
+import invertColors from "./functions/invertColors.js";
 
 // ---------------------------------------------------------------------
 // ---------------------------------------------------------------------
@@ -1917,18 +1918,9 @@ let modulationEnvelope = document.getElementById("modulation-envelope");
 let effectsTitle = document.getElementById("effects-title");
 let effectsContent = document.getElementById("effects-content");
 
-let filtersTitle = document.getElementById("filters-title");
-let filtersContent = document.getElementById("filters-content");
-
-let highLowPassTitle = document.getElementById("high-low-pass-title");
-let highLowPassContent = document.getElementById("high-low-pass-content");
-
 let autoFilterTitle = document.getElementById("auto-filter-title");
 let autoFilterContent = document.getElementById("auto-filter-content");
 
-let delayTitle = document.getElementById("delay-title");
-let delayContent = document.getElementById("delay-content");
-
 let feedbackDelayTitle = document.getElementById("feedback-delay-title");
 let feedbackDelayContent = document.getElementById("feedback-delay-content");
 
@@ -1973,8 +1965,6 @@ showHide(modulationEnvelopeTitle, modulationEnvelope, "flex", "none");
 
 // Effects Section
 showHide(effectsTitle, effectsContent, "block", "none");
-// showHide(filtersTitle, filtersContent, "grid", "none");
-// showHide(highLowPassTitle, highLowPassContent, "flex", "none");
 showHide(autoFilterTitle, autoFilterContent, "grid", "none");
 showHide(feedbackDelayTitle, feedbackDelayContent, "none", "flex");
 showHide(pingPongDelayTitle, pingPongDelayContent, "none", "flex");
@@ -1988,6 +1978,13 @@ showHide(freqShifterTitle, freqShifterContent, "none", "flex");
 showHide(bitCrusherTitle, bitCrusherContent, "none", "flex");
 showHide(chebyshevTitle, chebyshevContent, "none", "flex");
 
+// ---------------------------------------------------------------------
+// ---------------------------------------------------------------------
+// Inverted Colors Mode
+// ---------------------------------------------------------------------
+// ---------------------------------------------------------------------
+invertColors();
+
 // ---------------------------------------------------------------------
 // ---------------------------------------------------------------------
 // Recorder