Add css variables and theme switch

This commit is contained in:
Eva 2023-03-01 16:00:34 +01:00 committed by Alonso Torres
parent b77f85b697
commit adffdb31f3
42 changed files with 225 additions and 60 deletions

View file

@ -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
[]

View file

@ -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

View file

@ -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)

View file

@ -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"}]]))

View file

@ -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 []

View file

@ -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

View file

@ -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]