How to track additional properties (eg. dark mode usage)

[MichalSznajder]

How I can track additional properties (eg. dark mode usage) with umami? Documentation mentions "custom payload" but I think additional fields are dropped by tracking API:

// Custom payload
umami.track(payload: object);

With latest 2.18.1 I made following hack but I feel it is not the way.

const umamiBeforeSend = (type, payload) => {
    Promise.resolve().then(() => {
        window['umamiBeforeSend'] = null
        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
        // @ts-ignore
        umami.track('dark-mode', {mode: isDarkMode ? 'dark' : 'light'});
    })
}

window['umamiBeforeSend'] = umamiBeforeSend

(...)

<script defer 
		src="https://umami.test.com/script.js"
        data-website-id="xxxx"
        data-before-send="umamiBeforeSend"></script>

[mikecao]

Why are you using a Promise? And why are you setting window['umamiBeforeSend'] to null?

[MichalSznajder]

All this was to prevent infinite loop (Umami.track would call again umamiSendBefore causing infinite loop).

On second thought Promise doesn't make sense. I wanted to somehow delay event sending but it could be removed.