Dark mode

Just sharing a workaround for now: https://darkreader.org/ (has decent browser support)

+1

HI Clara! Thanks for using Tally and for sharing your feature request, Tom! We really appreciate you taking the time. ✌️

+1 for this

I feel like they hate dark mode lol

I need darkmode

This would be great! ( My eyes are burning rn )

Thanks for the feature request, Flyer Operations! We really appreciate you taking the time to share your idea with us. ✌

Feature Request: Dark Mode Reason: Because I don’t want to feel like I’ve been spiritually flashbanged every time I open your site at 10PM. There’s enough white space on here to launch a moon mission. My eyeballs are staging a protest. Help me help them. Pretty please - with contrast on top?

For anyone else landing here after 2025, here's my path on this issue: 1. Realize Tally already supports custom CSS on Pro plan that could potentially solve this issue. 2. Realize there's very slim chance of this request ever get solved in the near future. 3. Create a somewhat hacky solution that I'm not particularly proud of. **The solution** - 2 forms - Google Sheets integration - Custom embed JS code **Downside** You have to maintain 2 forms, separately. When you change one, you need to remember to update the other. I personally don't plan on changing my forms that often anyway. Obviously your single source of truth is now the Google Sheet you created. But luckily you can link multiple forms to a single Sheet. **Custom embed code** I'm using `data-tally-src-dark` and `data-tally-src-light` attributes instead of the default `data-tally-src`. This is the entire code block: ``` var d = document, w = 'https://tally.so/widgets/embed.js', mq = window.matchMedia('(prefers-color-scheme: dark)'), f = d.querySelector('iframe'), v = function () { var a = mq.matches ? 'tally-src-dark' : 'tally-src-light' f.src = f.dataset[a] } mq.addEventListener('change', v) if ('undefined' != typeof Tally) { v() } else if (d.querySelector('script[src="' + w + '"]') == null) { var s = d.createElement('script') ;(s.src = w), (s.onload = v), (s.onerror = v), d.body.appendChild(s) } ``` What this does is look for *the* iframe on the page (I'm only running this script on a single page with a single form on it), and check through the `mq` variable if it should load the dark or light themed form. Another thing it does, which you may not want, is to reload the iframe (with the appropriate theme) when the user's theme changes. That's the event listener. The downside of this approach is that the data won't carry from one theme to another. So if a user is on page 3/5 and it automatically changes the theme, when the iframe reloads it will load another theme and the user will land at page 1/5 without any data. The data is not lost though. Going back to the previous theme will fetch the data. But you need to alert the user in some way, or prevent this behavior altogether. Hope this helps anyone.

yes please!

can use dark reader chrome extension temporarily

please, all this white is charring my eyes.

I work the night shift would be really helpful for my eyes

Please add that. My eyes are hurting.

Darkmode for the entire site, dashboard, and form, and then a toggle for light/dark mode when someone is filling out the form.

Until then, you can use the extension Dark Reader

Yes, please 🥸