✨ Add css variables and theme switch

frontend/src/app/main/data/users.cljs

@@ -18,7 +18,6 @@
    [app.util.i18n :as i18n]
    [app.util.router :as rt]
    [app.util.storage :refer [storage]]
-   [app.util.theme :as theme]
    [beicon.core :as rx]
    [cljs.spec.alpha :as s]
    [potok.core :as ptk]))
@@ -115,9 +114,7 @@
     (effect [_ state _]
       (when-let [profile (:profile state)]
         (swap! storage assoc :profile profile)
-        (i18n/set-locale! (:lang profile))
-        (some-> (:theme profile)
-                (theme/set-current-theme!))))))
+        (i18n/set-locale! (:lang profile))))))
 
 (defn fetch-profile
   []

frontend/src/app/main/ui.cljs

@@ -23,6 +23,7 @@
    [app.main.ui.static :as static]
    [app.main.ui.viewer :as viewer]
    [app.main.ui.workspace :as workspace]
+   [app.util.dom :as dom]
    [app.util.router :as rt]
    [rumext.v2 :as mf]))
 
@@ -128,7 +129,11 @@
   []
   (let [route   (mf/deref refs/route)
         edata   (mf/deref refs/exception)
-        profile (mf/deref refs/profile)]
+        profile (mf/deref refs/profile)
+        theme   (or (:theme profile) "default")]
+
+    (mf/with-effect [theme]
+      (dom/set-html-theme-color theme))
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
       (if edata

frontend/src/app/main/ui/dashboard.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.dashboard
   (:require
-   [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.math :as mth]
    [app.common.spec :as us]
@@ -318,7 +317,6 @@
 
     (mf/use-effect
      (fn []
-       (dom/set-html-theme-color clr/white "light")
        (let [events [(events/listen goog/global EventType.KEYDOWN
                                     (fn [event]
                                       (when (kbd/enter? event)

frontend/src/app/main/ui/settings/options.cljs

@@ -55,14 +55,14 @@
                      :name :lang
                      :data-test "setting-lang"}]]
 
-     ;; TODO: Do not show as long as we only have one theme
      #_[:h2 (tr "dashboard.theme-change")]
      #_[:div.fields-row
       [:& fm/select {:label (tr "dashboard.select-ui-theme")
                      :name :theme
                      :default "default"
-                     :options [{:label "Default" :value "default"}]
-                     :data-test "theme-lang"}]]
+                     :options [{:label "Penpot Dark (default)" :value "default"}
+                               {:label "Penpot Light" :value "light"}]
+                     :data-test "setting-theme"}]]
      [:& fm/submit-button
       {:label (tr "dashboard.update-settings")
        :data-test "submit-lang-change"}]]))

frontend/src/app/main/ui/viewer.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.viewer
   (:require
-   [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.exceptions :as ex]
@@ -347,7 +346,6 @@
          (dom/set-html-title (str "\u25b6 " (tr "title.viewer" name))))))
 
     (mf/with-effect []
-      (dom/set-html-theme-color clr/gray-50 "dark")
       (let [key1 (events/listen js/window "click" on-click)
             key2 (events/listen (mf/ref-val viewer-section-ref) "wheel" on-wheel #js {"passive" false})]
         (fn []

frontend/src/app/main/ui/workspace.cljs

@@ -6,7 +6,6 @@
 
 (ns app.main.ui.workspace
   (:require
-   [app.common.colors :as clr]
    [app.common.data.macros :as dm]
    [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
@@ -150,7 +149,6 @@
 
     ;; Set html theme color and close any non-modal dialog that may be still open
     (mf/with-effect
-      (dom/set-html-theme-color clr/gray-50 "dark")
       (st/emit! msg/hide))
 
     ;; Set properly the page title

frontend/src/app/util/dom.cljs

@@ -58,10 +58,10 @@
   (.setAttribute (.querySelector js/document "html") "lang" lang))
 
 (defn set-html-theme-color
-  [^string color scheme]
-  (let [meta-node (.querySelector js/document "meta[name='theme-color']")]
-    (.setAttribute meta-node "content" color)
-    (.setAttribute meta-node "media" (str/format "(prefers-color-scheme: %s)" scheme))))
+  [^string color]
+  (let [node (.querySelector js/document "body")]
+    (.removeAttribute node "class")
+    (.add ^js (.-classList ^js node) color)))
 
 (defn set-page-style!
   [styles]