10
15 Comments

Dark UI vs Light UI?

Hey guys 👋, I've been recently very keen on the UI of startups, working on a project myself and arrived at a place where I was trying to decide between a Dark or Ligh UI approach.

I've seen great products using Dark UI such as IndieHackers.com but they need a keen eye and attention to detail, a color palette that doesn't blend in very well is easily noticeable on a Dark UI and less on Light UI's from my observations.

I'm curious to know any insights into how each affects the perception of a brand (e.g Warm, Superior, Fun, etc.) I know everyone perceives differently but they're some common traits.

What are your thoughts on the two and what have you observed, is this something that should be carefully considered while embarking on a project or something that should be A\B tested or should you not spend time on it at all?

✌️

  1. 3

    I think it depends on the user population. Go back to better understand your users before making such decisions.

    Dark UI tends to work great for Software Developers because we spend our whole day in front of a computer and usually want to ease or eyes like the Dark Mode of our IDE/Text Editor.

    Marketing guys tend to prefer Light UI because most of the UIs they use are Light Mode.

    We see more and more Dark UIs on the web but everybody is not accustomed to it yet. It really depends on your user population but it can be an advantage because it makes you different.

    Spotify UI is dark, people tend to say it's because we don't spend lot of time in it. I would disagree, I think it's mostly to be different and Dark UIs tend to be perceived as more private.

    Like everything there's no This is absolutely better than the other, decide given the parameters you have. Good luck ;-)

    1. 1

      Great insight! Thanks for sharing, 😄I'm with you on that one, I spend all day on Spotify, even forgot it has a Dark UI.

      That's true, thanks! Same to you :)

  2. 3

    You could use both, give the user the option to toggle between Dark or Light mode. could be easily implemented with CSS variables. I prefer light mode sometimes but it pains my eyes and I would want it all dark.

    1. 2

      Yes, just detect the users preference using the prefers-color-scheme CSS media query .

      But also add the possibility to manually switch between the two.

      1. 1

        That's nuts, I didn't even know this was a thing, great share! I have the dark mode set on my Mac, so if I was my own user I would get the dark theme and still have an option to toggle, awesome.

    2. 1

      Great response! This is actually what I'm leaning in towards more, I think it also empowers the user, like this site, for example, https://www.30secondsofcode.org and many others I've come across.

      Thanks.

  3. 2

    I work on products used by Engineers in both indoor and outdoor settings. Dark mode is popular inside but is really hard to see outside in the light and light mode is usually more popular in that setting. Kind of an amusing tidbit actually, use dark where it is dark and light where it is light... 😆

    1. 1

      😆 Funny how that works, thanks for sharing!

  4. 2

    Go for light, except if you are targeted geek/IT

  5. 2

    It depends mostly on your users' behaviour, but also the type of content.

    Developers like darker usually, because they spend a lot of time in front of the screen, but also because code has syntax highlight - the various contrasts between words make it easier to spot them and get the overall understanding of what the code is about. Devs don't read code word by word, they match points in code while they try to understand how pieces are connected to one another and visual cues help a lot - thus the existence of syntax highlight. Contrasts between dark background and keywords is also better on dark theme than the light one.

    Longer texts with actual human words (and not code) need more space (e.g. line height, smaller paragraphs) to be perceived better, but the the color scheme depends mostly on what user is spending the rest of their time on - do they switch back and forth between apps with different color schemes, what is the most common color scheme in their line of work (or for your model of a user), do they work with non-electronic paper so constant switch between different contrasts might be troublesome...?

    My approach is to have parts of the UI that users spend less time on and are less concerned about reading it word-by-word to be less textual-based and more with visual cues against the dark background. Important parts of the UI that require a lot of users' attention and time tend to be more light. And if your user's type is fine having a dark mode - then have it as optional (if your dev time can afford to make it).

    1. 1

      Those are some really great insights! Thanks for sharing.

  6. 2

    Light converts better from what I remember

    1. 1

      I see, interesting...

      Thanks for sharing!

  7. 2

    I always vote for "Light UI" as default and "Dark UI" as an option only.

    1. 1

      I see, that's interesting, thanks for sharing!

Trending on Indie Hackers
Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 18 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments