feat: add recipe theme and resume controls

Fixes #4, #7

MMM-NextcloudCookbook.js

@@ -6,6 +6,7 @@ Module.register("MMM-NextcloudCookbook", {
     controlUrl: "",
     animationSpeed: 400,
     layout: "stacked",
+    theme: "dark",
     shareUrl: "",
     sharePassword: ""
   },
@@ -87,9 +88,7 @@ Module.register("MMM-NextcloudCookbook", {
 
   getDom() {
     const root = document.createElement("section");
-    root.className = this.state.active
-      ? "ncc-root ncc-active"
-      : "ncc-root ncc-idle";
+    root.className = `ncc-root ${this.state.active ? "ncc-active" : "ncc-idle"} ncc-theme-${this.state.theme || this.config.theme}`;
 
     const qr = document.createElement("a");
     qr.className = "ncc-qr";
@@ -105,6 +104,14 @@ Module.register("MMM-NextcloudCookbook", {
     qr.append(qrLabel, qrImage);
     root.appendChild(qr);
 
+    const themeToggle = document.createElement("button");
+    themeToggle.type = "button";
+    themeToggle.className = "ncc-theme-toggle";
+    const nextTheme = this.state.theme === "light" ? "dark" : "light";
+    themeToggle.textContent = `Use ${nextTheme} mode`;
+    themeToggle.addEventListener("click", () => this.sendSocketNotification("SET_THEME", nextTheme));
+    root.appendChild(themeToggle);
+
     if (!this.state.active) return root;
 
     if (this.state.error) {