feat: lightmode toggle

SoftVarE-Group · Jan 12, 2024 · a79bc03 · a79bc03
1 parent eb677e8
commit a79bc03
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 34 deletions.
diff --git a/WebSocketClient/assets/dark.svg b/WebSocketClient/assets/dark.svg
diff --git a/WebSocketClient/assets/light.svg b/WebSocketClient/assets/light.svg
diff --git 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
@@ -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
@@ -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
@@ -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,15 +32,15 @@
 .dropdown-wrapper {
     padding: 0 20px 5px;
     & span {
-        color: white;
+        color: var(--color-fg);
     }
 }
 
 /* Dropdown Content (Hidden by Default) */
 .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
@@ -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
@@ -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,17 +239,17 @@ a:active {
 }
 
 .tutorials {
-    color: white;
+    color: var(--color-fg);
 
     & div {
         display: flex;
         flex-direction: row-reverse;
         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;
-}
+    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;
+}