mirror of
https://github.com/penpot/penpot.git
synced 2025-07-09 13:17:17 +02:00
✨ Add css variables and theme switch
This commit is contained in:
parent
b77f85b697
commit
adffdb31f3
42 changed files with 225 additions and 60 deletions
|
@ -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
|
||||
[]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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"}]]))
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue