3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-26 08:47:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Support following system color scheme

Browse source
This commit is contained in:
Miguel de Benito Delgado 2025-05-26 15:44:56 +00:00
parent ee022e225c
commit fab9e842e8
3 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/main.cljs
View file

@ -97,7 +97,8 @@
(cur/init-styles) (cur/init-styles)
(thr/init!) (thr/init!)
(init-ui) (init-ui)
(st/emit! (plugins/initialize) (st/emit! (theme/initialize)
(plugins/initialize)
(initialize))) (initialize)))
(defn ^:export reinit (defn ^:export reinit

12
frontend/src/app/main/ui.cljs
View file

@ -30,6 +30,7 @@
[app.main.ui.static :as static] [app.main.ui.static :as static]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
[app.util.theme :as theme]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
@ -358,13 +359,12 @@
(let [route (mf/deref refs/route) (let [route (mf/deref refs/route)
edata (mf/deref refs/exception) edata (mf/deref refs/exception)
profile (mf/deref refs/profile) profile (mf/deref refs/profile)
theme (case (:theme profile) profile-theme (:theme profile)
"system" (dom/get-system-theme) system-theme (mf/deref theme/preferred-color-scheme)]
"default" "dark"
(:theme profile))]
(mf/with-effect [theme] (mf/with-effect [profile-theme system-theme]
(dom/set-html-theme-color theme)) (dom/set-html-theme-color
(if (= profile-theme "system") system-theme profile-theme)))
[:& (mf/provider ctx/current-route) {:value route} [:& (mf/provider ctx/current-route) {:value route}
[:& (mf/provider ctx/current-profile) {:value profile} [:& (mf/provider ctx/current-profile) {:value profile}

29
frontend/src/app/util/theme.cljs
View file

@ -10,8 +10,10 @@
(:require (:require
[app.config :as cfg] [app.config :as cfg]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.globals :as globals]
[app.util.storage :as storage] [app.util.storage :as storage]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
[potok.v2.core :as ptk]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(defonce theme (get storage/global ::theme cfg/default-theme)) (defonce theme (get storage/global ::theme cfg/default-theme))
@ -44,3 +46,30 @@
#js []) #js [])
theme)) theme))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Set the preferred color scheme based on the user's system settings.
;; TODO: this is unrelated to the theme support above, which seems unused as
;; of v2.7
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defonce ^:private color-scheme-mq
(.matchMedia globals/window "(prefers-color-scheme: dark)"))
;; This atom is referenced in app.main.ui.app
(defonce preferred-color-scheme
(atom (if (.-matches color-scheme-mq) "dark" "light")))
(defonce prefers-color-scheme-sub
(let [sub (rx/behavior-subject "dark")
ob (->> (rx/from-event color-scheme-mq "change")
(rx/map #(if (.-matches %) "dark" "light")))]
(rx/sub! ob sub)
sub))
(defn initialize
[]
(ptk/reify ::initialize
ptk/WatchEvent
(watch [_ _ _]
(->> prefers-color-scheme-sub
(rx/map #(reset! preferred-color-scheme %))))))