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

🚧 UI to support switching to system theme

Browse source
This commit is contained in:
Miguel de Benito Delgado 2025-05-25 11:47:30 +00:00
parent 2650eccd09
commit ee022e225c
7 changed files with 40 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/app/main/data/profile.cljs
View file

@ -160,8 +160,10 @@
(update [_ state]
(update-in state [:profile :theme]
(fn [current]
(if (= current "default")
"light"
(case current
"dark" "light"
"light" "system"
"system" "dark"
"default"))))
ptk/WatchEvent

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

@ -358,7 +358,10 @@
(let [route (mf/deref refs/route)
edata (mf/deref refs/exception)
profile (mf/deref refs/profile)
theme (or (:theme profile) "default")]
theme (case (:theme profile)
"system" (dom/get-system-theme)
"default" "dark"
(:theme profile))]
(mf/with-effect [theme]
(dom/set-html-theme-color theme))

5
frontend/src/app/main/ui/settings/options.cljs
View file

@ -59,8 +59,9 @@
[:& fm/select {:label (tr "dashboard.select-ui-theme")
:name :theme
:default "default"
:options [{:label "Penpot Dark (default)" :value "default"}
{:label "Penpot Light" :value "light"}]
:options [{:label (tr "dashboard.select-ui-theme.dark") :value "dark"}
{:label (tr "dashboard.select-ui-theme.light") :value "light"}
{:label (tr "dashboard.select-ui-theme.system") :value "system"}]
:data-testid "setting-theme"}]]
[:> fm/submit-button*

8
frontend/src/app/main/ui/workspace/main_menu.cljs
View file

@ -280,9 +280,11 @@
:data-testid "toggle-theme"
:id "file-menu-toggle-theme"}
[:span {:class (stl/css :item-name)}
(if (= (:theme profile) "default")
(tr "workspace.header.menu.toggle-light-theme")
(tr "workspace.header.menu.toggle-dark-theme"))]
(case (:theme profile) ;; default = dark -> light -> system -> dark and so on
"default" (tr "workspace.header.menu.toggle-light-theme")
"light" (tr "workspace.header.menu.toggle-system-theme")
"system" (tr "workspace.header.menu.toggle-dark-theme")
(tr "workspace.header.menu.toggle-light-theme"))]
[:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-theme))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]]))

5
frontend/src/app/util/dom.cljs
View file

@ -76,9 +76,10 @@
(defn set-html-theme-color
[^string color]
(let [node (.querySelector js/document "body")]
(let [node (.querySelector js/document "body")
class (if (= color "dark") "default" "light")]
(.removeAttribute node "class")
(.add ^js (.-classList ^js node) color)))
(.add ^js (.-classList ^js node) class)))
(defn set-page-style!
[styles]