Add buttons to switch between dark/light mode

nilenso · Nov 13, 2023 · 2121420 · 2121420
1 parent 03bebd4
commit 2121420
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/src/bean/ui/scratch.cljs b/src/bean/ui/scratch.cljs
@@ -18,11 +18,18 @@
                                    :evaluated)))
                     :scratch)}
    [:div {:class "scratch-header bean-label"}
-    [:button {:on-click (fn [_]
+    [:button {:class [:scratch-header-btn]
+              :on-click (fn [_]
                           (swap! sheet #(-> %
                                             scratch/reevaluate
                                             set-eval-state)))}
      "▶"]
+    [:button {:class [:scratch-header-btn :dark-mode-btn]
+              :on-click #(.setAttribute js/document.documentElement "data-theme" "dark")}
+     "☾"]
+    [:button {:class [:scratch-header-btn :light-mode-btn]
+              :on-click #(.setAttribute js/document.documentElement "data-theme" "light")}
+     "☀"]
     [:div {:class :scratch-error} (:code-error @sheet)]]
    [:div {:class :scratch-thick-lines}]
    [:div {:class :scratch-body}