feat: extended theme switching #87

html/status.html

@@ -72,6 +72,11 @@
         align-items: center;
         flex: 0 0 auto;
       }
+      li.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
       button {
         width: 32px;
         height: 32px;
@@ -138,6 +143,9 @@
       };
 
       const registerReceiveEvents = () => {
+        ipcRenderer.on("button-disabled", (e, button) => {
+          document.getElementById(button.id).parentNode.classList.toggle("disabled", button.disabled);
+        });
         ipcRenderer.on("text-content", (e, text) => {
           document.getElementById(text.id).textContent = text.content;
         });

html/widget.html

@@ -78,6 +78,16 @@
           </svg>
         </button>
       </li>
+      <li>
+        <button id="theme">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <title>compare</title>
+            <path
+              d="M19,3H14V5H19V18L14,12V21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M10,18H5L10,12M10,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H10V23H12V1H10V3Z"
+            />
+          </svg>
+        </button>
+      </li>
       <li>
         <button id="keyboard">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">