                 cursor-char-off
                 cursor-fg
                 cursor-bg]} (get props :style)
-        cursor-fg (if (and focused show-cursor) cursor-fg (zcolor/color 255 255 255))
+        cursor-fg (if (and focused show-cursor) cursor-fg :ref/on-surface)
         cursor (if (and focused show-cursor) cursor-char-on cursor-char-off)]
 
      (g/use-effect (fn []

                               :flex-direction :row
                               :cursor-char-on \u2592
                               :cursor-char-off \_
                               :cursor-fg (zcolor/color 255 255 255 255)
                               :cursor-bg (zcolor/color 0 0 0 255)}}
        props (assoc (merge default-props props)
                :style (merge (:style default-props)
                              (:style props)))

                    :style {:position :absolute
                            :height 1 :width (+ 2 (count title))
                            :top -1 :left 1}}
             (str "\u2524" title "\u251C")]
      children)]))

;; style taken from https://www.nucleo.com.au/using-flexbox-for-modal-dialogs/
