From a79bc031529962d5bedb74b8a582a15120ac2d85 Mon Sep 17 00:00:00 2001
From: Stefan <svill33@gmail.com>
Date: Fri, 12 Jan 2024 11:09:21 +0100
Subject: [PATCH] feat: lightmode toggle

---
 WebSocketClient/assets/dark.svg    | 12 +++++
 WebSocketClient/assets/light.svg   | 13 ++++++
 WebSocketClient/index.html         | 74 +++++++++++++++++++++++++++++-
 WebSocketClient/src/intro.ts       |  6 ++-
 WebSocketClient/src/main.ts        |  2 +-
 WebSocketClient/style/dropdown.css | 26 ++++++++---
 WebSocketClient/style/split.css    |  2 -
 WebSocketClient/style/style.css    | 70 +++++++++++++++++++---------
 8 files changed, 171 insertions(+), 34 deletions(-)
 create mode 100644 WebSocketClient/assets/dark.svg
 create mode 100644 WebSocketClient/assets/light.svg
diff --git a/WebSocketClient/assets/dark.svg b/WebSocketClient/assets/dark.svg
new file mode 100644
index 0000000..ecc5786
--- /dev/null
+++ b/WebSocketClient/assets/dark.svg
@@ -0,0 +1,12 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" role="img" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <rect x="8" y="8" width="32" height="32" rx="16" fill="#1B1B1B"/>
+    <circle cx="24" cy="24" r="10" fill="#fff"/>
+    <circle cx="32" cy="16" r="12" fill="#1B1B1B"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <rect x="8" y="8" width="32" height="32" rx="16" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/WebSocketClient/assets/light.svg b/WebSocketClient/assets/light.svg
new file mode 100644
index 0000000..c5ff431
--- /dev/null
+++ b/WebSocketClient/assets/light.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" role="img" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <rect x="8" y="8" width="32" height="32" rx="16" fill="#fff"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M32.58 16.835a1 1 0 0 0-1.415-1.415l-1.037 1.038a1 1 0 1 0 1.415 1.414l1.037-1.037ZM17.872 31.542a1 1 0 1 0-1.415-1.414l-1.037 1.037a1 1 0 0 0 1.415 1.415l1.037-1.037ZM23 35.133a1 1 0 1 0 2 0v-1.466a1 1 0 1 0-2 0v1.466Zm0-20.8a1 1 0 1 0 2 0v-1.466a1 1 0 1 0-2 0v1.466ZM36.133 24a1 1 0 0 1-1 1h-1.466a1 1 0 1 1 0-2h1.466a1 1 0 0 1 1 1Zm-20.8 0a1 1 0 0 1-1 1h-1.466a1 1 0 1 1 0-2h1.466a1 1 0 0 1 1 1Zm15.832 8.58a1 1 0 0 0 1.415-1.415l-1.037-1.037a1 1 0 1 0-1.415 1.415l1.037 1.037ZM16.458 17.872a1 1 0 1 0 1.414-1.414l-1.037-1.037a1 1 0 0 0-1.415 1.414l1.037 1.037Z" fill="#1B1B1B"/>
+    <circle cx="24" cy="24" r="5" fill="#1B1B1B"/>
+    <circle cx="47" cy="5" r="12" fill="#fff"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <rect x="8" y="8" width="32" height="32" rx="16" fill="#fff"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
index 1163df0..a720263 100644
--- a/WebSocketClient/index.html
+++ b/WebSocketClient/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="dark">
 <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
@@ -13,6 +13,11 @@
 </head>
 <body>
 <div class="header">
+    <button
+    id="theme-toggle"
+    type="button"
+    data-theme-toggle
+    aria-label="Change to light theme">🌙</button>
     <h1>UVL Playground</h1>
     <div class="tutorials">
         <div id="tutorialButton">
@@ -84,6 +89,73 @@ <h1>Get the UVLS VSCode Extension</h1>
         use all features use the UVLS - Universal Variability Language Server extension for visual studio code. </p>
 </div>
 
+<script type="module">
+    import {
+    updateUserConfiguration
+} from '@codingame/monaco-vscode-configuration-service-override';
+    // get theme on page load
+    let theme = localStorage.getItem("theme");
+    if(theme === null){
+        theme = "dark";
+        localStorage.setItem("theme", "dark");
+    }
+    document.querySelector("html").setAttribute("data-theme", theme);
+
+    const button = document.querySelector("[data-theme-toggle]");
+    const newCta = theme === "dark" ? "🌙" : "☀️";
+        button.innerText = newCta;  
+    setTimeout(() => {
+        if(theme === "dark"){
+            updateUserConfiguration(`{
+                "editor.fontSize": 14,
+                "workbench.colorTheme": "Default Dark Modern",
+                theme: "vs-dark"
+            }`);
+        }else{
+            updateUserConfiguration(`{
+                "editor.fontSize": 14,
+                "workbench.colorTheme": "Default Light Modern",
+                theme: "vs-light"
+            }`);
+        }
+    }, 500);
+
+
+    button.addEventListener("click", () => {
+        console.log("hello");
+        let newTheme = theme === "dark" ? "light" : "dark";
+        // update the button text
+        const newCta = newTheme === "dark" ? "🌙" : "☀️";
+        button.innerText = newCta;  
+
+        // use an aria-label if you are omitting text on the button
+        // and using sun/moon icons, for example
+        button.setAttribute("aria-label", newCta);
+
+        // update theme attribute on HTML to switch theme in CSS
+        document.querySelector("html").setAttribute("data-theme", newTheme);
+        if(newTheme === "dark"){
+            updateUserConfiguration(`{
+                "editor.fontSize": 14,
+                "workbench.colorTheme": "Default Dark Modern",
+                theme: "vs-dark"
+            }`);
+        }else{
+            updateUserConfiguration(`{
+                "editor.fontSize": 14,
+                "workbench.colorTheme": "Default Light Modern",
+                theme: "vs-light"
+            }`);
+        }
+
+
+        // update in local storage
+        localStorage.setItem("theme", newTheme);
+
+        theme = newTheme;
+    });
+</script>
+
 <script type="module">
     import {startUvlClient} from "./src/main.ts";
     startUvlClient();
diff --git a/WebSocketClient/src/intro.ts b/WebSocketClient/src/intro.ts
index cc91799..b4a530c 100644
--- a/WebSocketClient/src/intro.ts
+++ b/WebSocketClient/src/intro.ts
@@ -44,7 +44,11 @@ export const initIntroJS = () => {
         const helperLayer = document.getElementsByClassName("tmpClass");
         setTimeout(() => {
             if(helperLayer[0] instanceof HTMLElement){
-                helperLayer[0].style["box-shadow"] = "rgb(255, 255, 255) 0px 0px 1px 2px, rgba(230, 230, 230, 0.44) 0px 0px 0px 5000px";
+                if(document.documentElement.getAttribute('data-theme') === "dark"){
+                    helperLayer[0].style["box-shadow"] = "rgb(255, 255, 255) 0px 0px 1px 2px, rgba(230, 230, 230, 0.44) 0px 0px 0px 5000px";
+                }else{
+                    helperLayer[0].style["box-shadow"] = "rgb(0, 0, 0) 0px 0px 1px 2px, rgba(0, 0, 0, 0.8) 0px 0px 0px 5000px";
+                }
             }
         }, 100);
     });
diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
index b5f5b4c..f69b11c 100644
--- a/WebSocketClient/src/main.ts
+++ b/WebSocketClient/src/main.ts
@@ -255,7 +255,7 @@ export const startUvlClient = async () => {
         "editor.fontSize": 14,
         "workbench.colorTheme": "Default Dark Modern",
         theme: "vs-dark"
-    }`);
+    }`);    
 
     const fileSystemProvider = new RegisteredFileSystemProvider(false);
     fileID = uuidv4();
diff --git a/WebSocketClient/style/dropdown.css b/WebSocketClient/style/dropdown.css
index e85c5be..1f83e2f 100644
--- a/WebSocketClient/style/dropdown.css
+++ b/WebSocketClient/style/dropdown.css
@@ -1,6 +1,18 @@
+[data-theme="dark"] {
+    --color-bg: #1e1e1e;
+    --color-fg: #ffffff;
+    --color-hover: #222;
+}
+
+[data-theme="light"] {
+    --color-bg: #ffffff;
+    --color-fg: #1e1e1e;
+    --color-hover: #a3a3a3;
+}
+
 .dropbtn {
-    background-color: #1e1e1e;
-    color: white;
+    background-color: var(--color-bg);
+    color: var(--color-fg);
     font-size: 32px;
     border: none;
     padding: 0;
@@ -20,7 +32,7 @@
 .dropdown-wrapper {
     padding: 0 20px 5px;
     & span {
-        color: white;
+        color: var(--color-fg);
     }
 }
 
@@ -28,7 +40,7 @@
 .dropdown-content {
     display: none;
     position: absolute;
-    background-color: #1e1e1e;
+    background-color: var(--color-bg);
     box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5);
     justify-content: right;
     z-index: 100;
@@ -37,16 +49,16 @@
 
 /* Links inside the dropdown */
 .dropdown-content button {
-    background-color: #1e1e1e;
+    background-color: var(--color-bg);
     border: none;
-    color: darkgrey;
+    color: var(--color-fg);
     padding: 12px 16px;
     text-decoration: none;
     display: block;
 }
 
 /* Change color of dropdown links on hover */
-.dropdown-content button:hover {background-color: #222;}
+.dropdown-content button:hover {background-color: var(--color-hover);}
 
 /* Show the dropdown menu on hover */
 .dropdown-wrapper:hover .dropdown-content {
diff --git a/WebSocketClient/style/split.css b/WebSocketClient/style/split.css
index 3a74169..00591bb 100644
--- a/WebSocketClient/style/split.css
+++ b/WebSocketClient/style/split.css
@@ -21,14 +21,12 @@
 }
 
 #first {
-    background-color: rgb(255, 255, 255);
     width: 100%;
     height: 100%;
     min-width: 10px;
 }
 
 #second {
-    background-color: rgb(255, 255, 255);
     width: 0;
     height: 100%;
     min-width: 10px;
diff --git a/WebSocketClient/style/style.css b/WebSocketClient/style/style.css
index 4e6a3a8..52dac19 100644
--- a/WebSocketClient/style/style.css
+++ b/WebSocketClient/style/style.css
@@ -1,3 +1,13 @@
+[data-theme="dark"] {
+    --color-bg: #1e1e1e;
+    --color-fg: #ffffff;
+}
+
+[data-theme="light"] {
+    --color-bg: #ffffff;
+    --color-fg: #1e1e1e;
+}
+
 /* Reset default browser styles */
 body, h1, p {
     margin: 0;
@@ -6,7 +16,7 @@ body, h1, p {
 
 body {
     font-family: Arial, sans-serif;
-    background-color: #1e1e1e; /* Dark background color */
+    background-color: var(--color-bg); /* Dark background color */
 }
 
 h2 {
@@ -27,7 +37,7 @@ h2 {
     display: flex;
     margin: 10px;
     justify-content: space-between;
-    color: #ffffff; /* Light text color */
+    color: var(--color-fg); /* Light text color */
 
     & h1 {
         margin: auto 20px;
@@ -36,12 +46,12 @@ h2 {
 
 .footer {
     text-align: center;
-    color: #ffffff; /* Light text color */
+    color: var(--color-fg); /* Light text color */
 }
 
 .graph {
     overflow: scroll;
-    background: #1e1e1e;
+    background: var(--color-bg);
     height: 100%;
 }
 
@@ -51,8 +61,8 @@ h2 {
 }
 
 .tooltip * {
-    background-color: #1e1e1e;
-    color: white;
+    background-color: var(--color-bg);
+    color: var(--color-fg);
 
     & button {
         border: 2px solid red;
@@ -75,8 +85,8 @@ h2 {
 }
 
 dialog {
-    background: #1e1e1e;
-    color: white;
+    background: var(--color-bg);
+    color: var(--color-fg);
     width: 50vw;
     height: 70vh;
 
@@ -91,8 +101,8 @@ dialog {
         text-align: right;
 
         & button {
-            color: white;
-            background: #1e1e1e;
+            color: var(--color-fg);
+            background: var(--color-bg);
             border: none;
             font-size: 20pt;
         }
@@ -104,7 +114,7 @@ dialog {
 }
 
 #uvl-tutorial-div {
-    color: white;
+    color: var(--color-fg);
     position: relative;
     width: 100%;
     height: 100%;
@@ -160,9 +170,9 @@ dialog {
     }
 
     & button {
-        background-color: #1e1e1e;
-        color: #fff;
-        border: 2px solid #fff;
+        background-color: var(--color-bg);
+        color: var(--color-fg);
+        border: 2px solid var(--color-fg);
         border-radius: 10%;
         padding: 10px 20px;
         cursor: pointer;
@@ -179,7 +189,7 @@ h1 {
 }
 
 .editor {
-    background-color: #2d2d2d;
+    background-color: var(--color-bg);
     border-radius: 5px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     min-width: 50%;
@@ -219,7 +229,7 @@ a:visited {
 }
 
 a:hover {
-    color: #ffffff;
+    color: var(--color-fg);
 }
 
 a:active {
@@ -229,7 +239,7 @@ a:active {
 }
 
 .tutorials {
-    color: white;
+    color: var(--color-fg);
 
     & div {
         display: flex;
@@ -237,9 +247,9 @@ a:active {
         padding: 5px;
 
         & div {
-            background-color: #1e1e1e; /* Light gray color for dark mode */
-            color: white; /* Dark text color for dark mode */
-            border: 2px solid #fff;
+            background-color: var(--color-bg); /* Light gray color for dark mode */
+            color: var(--color-fg); /* Dark text color for dark mode */
+            border: 2px solid var(--color-fg);
             border-radius: 50%;
             padding: 10px;
 
@@ -267,5 +277,21 @@ a:active {
 }
 
 .tutorial {
-    color: white;
-}
\ No newline at end of file
+    color: var(--color-fg);
+}
+
+#theme-toggle {
+    display: block;
+    background-color: var(--color-bg);
+    color: var(--color-fg);
+    border: 2px solid var(--color-fg);
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 16px;
+    height: 40px;
+    width: 40px;
+}
+
+#theme-toggle:hover {
+    background-color: #95a5a6;
+}
