🎉 Add themes infraestructure.

frontend/src/uxbox/config.cljs

@@ -20,4 +20,5 @@
 
   (def default-language "en")
   (def demo-warning (gobj/get config "demoWarning" true))
-  (def url public-url))
+  (def url public-url)
+  (def default-theme "light"))

frontend/src/uxbox/main.cljs

@@ -22,6 +22,7 @@
    [uxbox.util.dom :as dom]
    [uxbox.util.html.history :as html-history]
    [uxbox.util.i18n :as i18n]
+   [uxbox.util.theme :as theme]
    [uxbox.util.router :as rt]
    [uxbox.util.storage :refer [storage]]
    [uxbox.util.timers :as ts]))
@@ -65,8 +66,10 @@
 
 (defn ^:export init
   []
-  (let [translations (gobj/get goog.global "uxboxTranslations")]
+  (let [translations (gobj/get goog.global "uxboxTranslations")
+        themes (gobj/get goog.global "uxboxThemes")]
     (i18n/init! translations)
+    (theme/init! themes)
     (unchecked-set js/window app-sym "main")
     (st/init)
     (init-ui)))

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

@@ -11,9 +11,11 @@
    [cuerdas.core :as str]
    [potok.core :as ptk]
    [uxbox.common.spec :as us]
+   [uxbox.config :as cfg]
    [uxbox.main.repo :as rp]
    [uxbox.util.i18n :as i18n :refer [tr]]
-   [uxbox.util.storage :refer [storage]]))
+   [uxbox.util.storage :refer [storage]]
+   [uxbox.util.theme :as theme]))
 
 ;; --- Common Specs
 
@@ -21,13 +23,13 @@
 (s/def ::fullname ::us/string)
 (s/def ::email ::us/email)
 (s/def ::password ::us/string)
-(s/def ::language ::us/string)
+(s/def ::lang ::us/string)
+(s/def ::theme ::us/string)
 (s/def ::photo ::us/string)
 (s/def ::created-at ::us/inst)
 (s/def ::password-1 ::us/string)
 (s/def ::password-2 ::us/string)
 (s/def ::password-old ::us/string)
-(s/def ::lang (s/nilable ::us/string))
 
 (s/def ::profile
   (s/keys :req-un [::id]
@@ -35,7 +37,8 @@
                    ::fullname
                    ::photo
                    ::email
-                   ::lang]))
+                   ::lang
+                   ::theme]))
 
 ;; --- Profile Fetched
 
@@ -45,13 +48,16 @@
   (ptk/reify ::profile-fetched
     ptk/UpdateEvent
     (update [_ state]
-      (assoc state :profile data))
+      (assoc state :profile (cond-> data
+                              (nil? (:land data)) (assoc :lang cfg/default-language)
+                              (nil? (:theme data)) (assoc :theme cfg/default-theme))))
 
     ptk/EffectEvent
     (effect [_ state stream]
-      (swap! storage assoc :profile data)
-      (when-let [lang (:lang data)]
-        (i18n/set-current-locale! lang)))))
+      (let [profile (:profile state)]
+        (swap! storage assoc :profile profile)
+        (i18n/set-current-locale! (:lang profile))
+        (theme/set-current-theme! (:theme profile))))))
 
 ;; --- Fetch Profile
 

frontend/src/uxbox/main/ui/settings/profile.cljs

@@ -22,10 +22,11 @@
 
 (s/def ::fullname ::fm/not-empty-string)
 (s/def ::lang (s/nilable ::fm/not-empty-string))
+(s/def ::theme ::fm/not-empty-string)
 (s/def ::email ::fm/email)
 
 (s/def ::profile-form
-  (s/keys :req-un [::fullname ::lang ::email]))
+  (s/keys :req-un [::fullname ::lang ::theme ::email]))
 
 (defn- on-error
   [error form]
@@ -86,7 +87,7 @@
                          :field :email}]
 
      [:span.settings-label (t locale "settings.profile.lang")]
-     [:select.input-select {:value (or (:lang data) "en")
+     [:select.input-select {:value (:lang data)
                             :name "lang"
                             :class (fm/error-class form :lang)
                             :on-blur (fm/on-input-blur form :lang)
@@ -94,6 +95,15 @@
       [:option {:value "en"} "English"]
       [:option {:value "fr"} "Français"]]
 
+     [:span.user-settings-label (tr "settings.profile.section-theme-data")]
+     [:select.input-select {:value (:theme data)
+                            :name "theme"
+                            :class (fm/error-class form :theme)
+                            :on-blur (fm/on-input-blur form :theme)
+                            :on-change (fm/on-input-change form :theme)}
+      [:option {:value "light"} "Light"]
+      [:option {:value "dark"} "Dark"]]
+
      [:input.btn-primary
       {:type "submit"
        :class (when-not (:valid form) "btn-disabled")

frontend/src/uxbox/util/theme.cljs

@@ -0,0 +1,50 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2019-2020 Mathieu BRUNOT <mathieu.brunot@monogramm.io>
+
+(ns uxbox.util.theme
+  "A theme manager."
+  (:require
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]
+   [beicon.core :as rx]
+   [goog.object :as gobj]
+   [uxbox.config :as cfg]
+   [uxbox.util.dom :as dom]
+   [uxbox.util.transit :as t]
+   [uxbox.util.storage :refer [storage]]))
+
+(defonce theme (get storage ::theme cfg/default-theme))
+(defonce theme-sub (rx/subject))
+(defonce themes #js {})
+
+(defn init!
+  [data]
+  (set! themes data))
+
+(defn set-current-theme!
+  [v]
+  (when (not= theme v)
+    (when-some [el (dom/get-element "theme")]
+      (set! (.-href el) (str "css/main-" v ".css")))
+    (swap! storage assoc ::theme v)
+    (set! theme v)
+    (rx/push! theme-sub v)))
+
+(defn set-default-theme!
+  []
+  (set-current-theme! cfg/default-theme))
+
+(defn use-theme
+  []
+  (let [[theme set-theme] (mf/useState theme)]
+    (mf/useEffect (fn []
+                    (let [sub (rx/sub! theme-sub #(set-theme %))]
+                      #(rx/dispose! sub)))
+                  #js [])
+    theme))
+