Merge pull request #1805 from penpot/hirunatan-set-html-theme

Hirunatan set html theme

CHANGES.md

@@ -41,6 +41,7 @@
 - Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999)
 - Don't stop SVG import when an image cannot be imported [#1531](https://github.com/penpot/penpot/issues/1531)
 - Fix paste shapes while editing text [Taiga #2396](https://tree.taiga.io/project/penpot/issue/2396)
+- Show Penpot color in Safari tab bar [#1803](https://github.com/penpot/penpot/issues/1803)
 
 ### :bug: Bugs fixed
 

common/src/app/common/colors.cljc

@@ -14,6 +14,7 @@
 (def gray-20 "#B1B2B5")
 (def gray-30 "#7B7D85")
 (def gray-40 "#64666A")
+(def gray-50 "#303236")
 (def info "#59B9E2")
 (def test "#fabada")
 (def white "#FFFFFF")

frontend/resources/templates/index.mustache

@@ -15,6 +15,7 @@
     <meta name="twitter:image" content="https://penpot.app/images/workspace-ui.jpg">
     <meta name="twitter:site" content="@penpotapp">
     <meta name="twitter:creator" content="@penpotapp">
+    <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <link id="theme" href="css/main-{{& th}}.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
 
     <link rel="icon" href="images/favicon.png" />

frontend/src/app/main/ui/dashboard.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.dashboard
   (:require
+   [app.common.colors :as clr]
    [app.common.spec :as us]
    [app.main.data.dashboard :as dd]
    [app.main.data.dashboard.shortcuts :as sc]
@@ -22,6 +23,7 @@
    [app.main.ui.dashboard.sidebar :refer [sidebar]]
    [app.main.ui.dashboard.team :refer [team-settings-page team-members-page team-invitations-page]]
    [app.main.ui.hooks :as hooks]
+   [app.util.dom :as dom]
    [app.util.keyboard :as kbd]
    [goog.events :as events]
    [rumext.alpha :as mf])
@@ -103,6 +105,7 @@
 
     (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)

frontend/src/app/main/ui/viewer.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.viewer
   (:require
+   [app.common.colors :as clr]
    [app.common.data :as d]
    [app.common.exceptions :as ex]
    [app.common.geom.point :as gpt]
@@ -142,6 +143,7 @@
 
     (mf/use-effect
      (fn []
+       (dom/set-html-theme-color clr/gray-50 "dark")
        (let [key1 (events/listen js/window "click" on-click)]
          (fn []
            (events/unlistenByKey key1)))))

frontend/src/app/main/ui/workspace.cljs

@@ -6,6 +6,7 @@
 
 (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.workspace :as dw]
@@ -130,8 +131,9 @@
         (st/emit! ::dwp/force-persist
                   (dw/finalize-file project-id file-id))))
 
-    ;; Close any non-modal dialog that may be still open
+    ;; 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

frontend/src/app/util/dom.cljs

@@ -43,6 +43,12 @@
   [^string title]
   (set! (.-title globals/document) title))
 
+(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))))
+
 (defn set-page-style!
   [styles]
   (let [node  (first (get-elements-by-tag globals/document "head"))