Hi friends. This will be a bit more of a lifestyle/productivity type of post rather than a coding-oriented one. If you know me, you know that I’ve recently moved to Chicago. Part of that move, and part of what I wanted, was floor-to-ceiling windows. However, the “dark mode is the only mode” part of me didn’t put a whole lot of thought process into that.
Intro 👋
Hi friends. This will be a bit more of a lifestyle/productivity type of post rather than a coding-oriented one. If you know me, you know that I’ve recently moved to Chicago. Part of that move, and part of what I wanted, was floor-to-ceiling windows. However, the “dark mode is the only mode” part of me didn’t put a whole lot of thought process into that.
See… what I’ve learned is that floor-to-ceiling windows means a lot of natural light. When I say a lot, I mean all of it… especially when you’re in a corner unit with south and east-facing windows. I found myself squinting at my monitors for the first week of working at my setup, often manually toggling light mode and dark mode trying to figure out how I could automate this process.
Sure… macOS has its own ‘Auto’ setting for Dark/Light mode. But I’ll be honest with you… it’s awful. It doesn’t really work with your preference. It just goes with when the sun has set completely. However, by the time that the sun sets completely, it might have already been dark for the past 10-15 minutes or longer and you’re still using light mode — talk about blinding.
How do we, as developers, work around this using some of the most common developer tools?
VS Code 🧑💻
This is pretty straightforward to set up to be entirely honest, but I wasn’t entirely aware that VS Code would switch between your system preferences. However, to get there you just need to follow the following instructions.
- CMD + Shift + P (open Command Palette)
- type ‘Preferences: Open Settings (JSON)’
- Paste the following:
And really that’s it! You might notice that I’m using the GitHub Dark and GitHub Light Default themes. I prefer to use the GitHub themes as they’re most similar to what I’ll see when I’m browsing documentation or OSS packages on GitHub so it’s easiest to follow along and keep things similar for me.
iTerm v2 (3.5.0beta1 >) 🤖
I was previously using custom scripts to take care of theme customization for iTerm… that was until the team over at iTerm released 3.5.0beta1. This release brought the ability to specify colors specifically for different appearance modes (dark + light mode).
To enable this feature:
- Open your preferences in iTerm v2 (cmd + ,).
- Navigate to Profiles > Colors
- Check ‘Use different colors for light mode and dark mode’
- Now you can select which theme you are editing (Light More or Dark Mode).
Here are my colors (for those interested):
Auto-Preference All The Things 📣
Now comes the fun/annoying part. It will take a while for all of these settings to fall into line, but as you are scrolling through your favorite websites or using your favorite apps, you will have to begin setting/changing your settings over to ‘Detect System Preferences’ or whatever verbiage is used within that specific application.
Now that everything is set to detect system preferences, you will want to either make use of the built-in macOS auto Dark/Light Mode setting OR use something a bit more powerful and customizable like NightOwl.
I personally found that the built-in setting from Apple was a bit lackluster as I couldn’t specify what time I wanted the theme to change, nor could I have granular control over it if it was a cloudy day. Instead, with NightOwl I can do that.
Day and Night 🌞 🌑
For those who are maybe not as familiar with what my setup looks like, here you are. This gives you an idea of what it is like to look at the screen during the day and at night. Even in the day picture here, it was closer to sunset, so probably 15-30 minutes before switching over to dark mode. But you can see the difference in contrast and readability here from both options.
