New Dark Mode and Bookmarking Features on raywenderlich.com

We’re always looking for ways to improve your browsing experience here at raywenderlich.com.

Our recent front-end overhaul introduced a better way to organize and present all of our content; the individual home pages will help you keep track of the content you love, and the recent search enhancements mean it’s easier than ever to find what you’re looking for.

But we can always do better — and that why we’re really excited to announce our two latest usability enhancements: Night Mode and bookmarking!

Introducing Night Mode

According to our analytics, the majority of our readers like to read through tutorials in the late hours of the night, from about 9 p.m. to midnight. So to all you night owl coders — this one’s for you!

You can enable dark mode in one of two ways, depending on your browser and OS settings.

First: the manual way. If you’re logged in to the site with your raywenderlich.com account, you’ll find the Night Mode toggle in your user settings. Where are those? Simply pull down the menu attached to your profile picture in the upper right-hand corner of the site, and you’ll see the setting right there in your user preferences:

If you’re not logged in, simply head to the small menu next to the Sign In link, and you’ll find the Night Mode setting there:

That’s a great way to enable dark mode manually. But wouldn’t it be great if you could leverage the built-in dark mode preferences of your OS and browser?

It would be great — and we’ve done just that!

Safari Technology Preview 69 (or better) supports the prefers-color-scheme CSS media query to figure out what color scheme you have set at an OS level. This means that webpages viewed in your browser (like the one you’re reading right now!) can automatically respond to your preferred appearance settings. Nice!

If you want to know how we support prefers-color-scheme on our site, head over to our engineering blog to learn how we implemented prefers-color-scheme here at raywenderlich.com.

And don’t forget that you can always switch the light/dark mode of the code blocks in our written tutorials as well, no matter whether you have light or dark mode enabled for the site:

Introducing Bookmarking

Another feature we’re really excited about is the ability to bookmark content that you’d like to read later or save for reference. This is perfect for that content that you don’t have time to read right now, but that you want to keep close at hand!

Once you’re logged in to your raywenderlich.com account, simply browse around until you find a piece of content you want to save for later.

Then, simply click the Bookmark button up at the top of the tutorial to save it for later:

Click the bookmark icon next to your profile picture to jump to all of your saved bookmarks:

You’ll see a list of all your bookmarked tutorials:

Done with a tutorial, and want to remove it from your bookmarked list? Simply use the Remove link to remove a single tutorial from your bookmarks, or use the Remove All button to start with a clean slate.

You can quickly bookmark content from search results by clicking the little bookmark icon on the top right-hand corner of the search result item, and previously bookmarked content will show as highlighted in green:

Where to Go From Here?

We’ve hope that you enjoy the new Night Mode and bookmarking features on the site!

Do you have an idea for a feature that would help make your time here on the site better, more efficient, or gosh darn it, just a lot more fun? Leave us a comment below — we’d love to hear your suggestions!