3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-25 15:47:18 +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 [_ state]
(update-in state [:profile :theme] (update-in state [:profile :theme]
(fn [current] (fn [current]
(if (= current "default") (case current
"light" "dark" "light"
"light" "system"
"system" "dark"
"default")))) "default"))))
ptk/WatchEvent ptk/WatchEvent

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

@ -358,7 +358,10 @@
(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 (or (:theme profile) "default")] theme (case (:theme profile)
"system" (dom/get-system-theme)
"default" "dark"
(:theme profile))]
(mf/with-effect [theme] (mf/with-effect [theme]
(dom/set-html-theme-color 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") [:& fm/select {:label (tr "dashboard.select-ui-theme")
:name :theme :name :theme
:default "default" :default "default"
:options [{:label "Penpot Dark (default)" :value "default"} :options [{:label (tr "dashboard.select-ui-theme.dark") :value "dark"}
{:label "Penpot Light" :value "light"}] {:label (tr "dashboard.select-ui-theme.light") :value "light"}
{:label (tr "dashboard.select-ui-theme.system") :value "system"}]
:data-testid "setting-theme"}]] :data-testid "setting-theme"}]]
[:> fm/submit-button* [:> fm/submit-button*

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

@ -280,9 +280,11 @@
:data-testid "toggle-theme" :data-testid "toggle-theme"
:id "file-menu-toggle-theme"} :id "file-menu-toggle-theme"}
[:span {:class (stl/css :item-name)} [:span {:class (stl/css :item-name)}
(if (= (:theme profile) "default") (case (:theme profile) ;; default = dark -> light -> system -> dark and so on
(tr "workspace.header.menu.toggle-light-theme") "default" (tr "workspace.header.menu.toggle-light-theme")
(tr "workspace.header.menu.toggle-dark-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)} [:span {:class (stl/css :shortcut)}
(for [sc (scd/split-sc (sc/get-tooltip :toggle-theme))] (for [sc (scd/split-sc (sc/get-tooltip :toggle-theme))]
[:span {:class (stl/css :shortcut-key) :key sc} sc])]]])) [: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 (defn set-html-theme-color
[^string color] [^string color]
(let [node (.querySelector js/document "body")] (let [node (.querySelector js/document "body")
class (if (= color "dark") "default" "light")]
(.removeAttribute node "class") (.removeAttribute node "class")
(.add ^js (.-classList ^js node) color))) (.add ^js (.-classList ^js node) class)))
(defn set-page-style! (defn set-page-style!
[styles] [styles]

12
frontend/translations/en.po
View file

@ -923,6 +923,15 @@ msgstr "Select UI language"
msgid "dashboard.select-ui-theme" msgid "dashboard.select-ui-theme"
msgstr "Select theme" msgstr "Select theme"
msgid "dashboard.select-ui-theme.dark"
msgstr "Penpot Dark (default)"
msgid "dashboard.select-ui-theme.light"
msgstr "Penpot Light"
msgid "dashboard.select-ui-theme.system"
msgstr "System theme"
#: src/app/main/ui/settings/notifications.cljs:57 #: src/app/main/ui/settings/notifications.cljs:57
msgid "dashboard.settings.notifications.dashboard-comments.all" msgid "dashboard.settings.notifications.dashboard-comments.all"
msgstr "All comments, mentions and replies" msgstr "All comments, mentions and replies"
@ -5166,6 +5175,9 @@ msgstr "Switch to dark theme"
msgid "workspace.header.menu.toggle-light-theme" msgid "workspace.header.menu.toggle-light-theme"
msgstr "Switch to light theme" msgstr "Switch to light theme"
msgid "workspace.header.menu.toggle-system-theme"
msgstr "Switch to system theme"
#: src/app/main/ui/workspace/main_menu.cljs:457 #: src/app/main/ui/workspace/main_menu.cljs:457
msgid "workspace.header.menu.undo" msgid "workspace.header.menu.undo"
msgstr "Undo" msgstr "Undo"

9
frontend/translations/es.po
View file

@ -935,6 +935,15 @@ msgstr "Cambiar el idioma de la interfaz"
msgid "dashboard.select-ui-theme" msgid "dashboard.select-ui-theme"
msgstr "Selecciona un tema" msgstr "Selecciona un tema"
msgid "dashboard.select-ui-theme.dark"
msgstr "Penpot Dark (por defecto)"
msgid "dashboard.select-ui-theme.light"
msgstr "Penpot Light"
msgid "dashboard.select-ui-theme.system"
msgstr "Sistema"
#: src/app/main/ui/settings/notifications.cljs:57 #: src/app/main/ui/settings/notifications.cljs:57
msgid "dashboard.settings.notifications.dashboard-comments.all" msgid "dashboard.settings.notifications.dashboard-comments.all"
msgstr "Todos los comentarios, menciones y respuestas" msgstr "Todos los comentarios, menciones y respuestas"