5

To indicate a button on an interface that switches to dark mode or to light mode, it's common to have a couple of sun/moon icons:

🌞 for light mode 🌙 for dark mode

But at least part of my brain is saying "Click the Sun icon if your screen is too bright", and I have to work out whether the moon is only visible during the night, and so "do I want the screen to be brighter because it's darker or ... ".

Well, perhaps my brain is a bit perverse - but are there better options for indicating a dark/light mode switch?

Improve this question
1
  • There are other options, but I feel like you're making it too difficult for yourself. Sun depicts light and the moon depicts darkness, that's all anyone need to know about these buttons. I don't think there's winning with your line of thinking though. Any icon you choose is probably going to give you these same thoughts. Maybe use text? I think you'll be able to find some examples from dribbble and perhaps codepen.
    – Joonas
    Commented Jun 1, 2020 at 9:14

4 Answers 4

Reset to default
11

You could simply be straight forward with it....

enter image description here

Improve this answer
5

You don't really need an icon for this.

I would just use a toggle switch: place it in a distinct, fixed position in the design, then customize. You can play with the fills and strokes, or add wording below for better usability (eg. "light mode", "dark mode").

enter image description here

Improve this answer
4

Dark mode and light mode is not something that you'll switch every few minutes or every hour or even ever. Most people select one preferred mode and forget about it and some could switch regularly twice a day as the outside light changes. Everyone else is overwhelming minority.

Therefore it is not an option that needs to occupy screen estate and be directly available in "main" UI. It can comfortably sit among other options on dedicated screen.

And if you have dedicated screen, you don't need to invent unnecessarily compact icons - it is much more easy to read plain and straight forward text that guess what each random icons mean. Add icon in front of option name if you want (a la Android settings), but spell the options explicitly as slider "Dark mode <-> Light mode" or "Theme" select box if you plan to add more color schemes.

Improve this answer
1
  • 1
    I disagree. Especially with laptops, if you're working in bright conditions it is more convenient to change to light mode, and switch back to dark mode if you're back at your regular workplace.
    – infinitezero
    Commented Jun 2, 2020 at 2:42
0

You don't provide an option for this.

Instead, you pull it automatically from the operating system or browser settings (as appropriate). Match what the user's global, system-level preferences are. Don't provide preferences in each individual application.

Improve this answer
3
  • 11
    Not providing an option has absolutely no benefits, I agree that you should default to the OS's setting, but allowing the user to overwrite that themselves per program/app/website is important to a lot of users.
    – DBS
    Commented Jun 2, 2020 at 10:47
  • 1
    One counter example where having manual control helps: On Firefox I'd prefer using a light theme on my dark theme OS because not all favicons are dark theme friendly. On an side note, unfortunately I can't do this due to an an unrelated bug due to Firefox assuming it can safely set the search bar's background color to white while using my system's foreground text color (white), i.e., the classic "if you hard code the background, don't forget to hard code the foreground" bug.
    – jrh
    Commented Jun 2, 2020 at 12:17
  • 1
    This is so very wrong. DO provide the option in each individual application. Default to the OS setting, but provide the option to override. I absolutely do not want all my apps to use the same mode – for example, I never use dark mode in my OS, but always in my Adobe applications.
    – Janus Bahs Jacquet
    Commented Jun 18, 2020 at 20:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.