Introducing Dark Mode

Today we're very excited to share a third theme/skin for Ravelry: Dark Mode. Like the dark modes you may use on your devices, browsers, or other social networks, Ravelry's Dark Mode makes the page background a dark color, the text very light, and the overall interface more monochromatic.

How to turn on Dark Mode:

You can turn on Dark Mode in two places...

1. Hover or tap on your avatar in the upper right of any page. Next to "Modes" you'll see icons for Merino, Herdwick, Dark Mode, and Follow System Settings (more on that last option later):

2. On your Settings page, which you can access from the same dropdown, there's also a new option for Modes in the "Appearance" section:

Follow your system's mode settings:

We've also added a fourth mode option called "Follow System Settings," which tells Ravelry to follow the light or dark mode settings on whatever device you're using. (You can learn more about setting light and dark modes on various devices here.) Follow System Settings can be useful in scenarios such as...

• Your device is set to show light mode during daylight hours, and dark mode at night. If you select "Follow System Settings," Ravelry will automatically switch, too.
• You use light mode on your laptop and dark mode on your phone. When you visit Ravelry on those respective devices, you won't have to switch modes every time.
• You like changing your device's mode from light to dark mode as it suits you. Ravelry will automatically switch, too.

Follow System Settings is the fourth mode icon under your avatar menu (with the two arrows), and the fourth option in the dropdown on your Settings page.

If you set Ravelry to Follow System Settings, the light mode will default to whichever Ravelry light mode you used last, whether that's Merino or Herdwick. However, you can also override this on your Ravelry Settings page: when you select "Follow System Settings" from the dropdown, an option will appear that lets you manually select whether your light mode should be Merino or Herdwick.

Some cool dark mode things:

The page background is a dark grey-blue, as opposed to true black.

All of the dark mode color styles have the same hue value as the message icon. This means they're all the same color (which we refer to internally as "thistle"), but with different values for lightness and saturation.

The text in dark mode is white, but has an 80% opacity (which is another way to say that it's 20% see-through), so it appears light grey.

As with our other modes, the relative values of Dark Mode's color and text styles follow guidelines from industry standards including WCAG, NN Group, and Material Design.

While we're referring to the new mode as "Dark Mode" in this post for clarity, it has a sheep nickname like Merino Mode and Herdwick Mode too: Balwen Mode!

Our login page has also gotten the Dark Mode treatment. Log out and in again while in Dark Mode to see some happy nighttime yarn friends.

Thank you Swatchers:

As always, thank you to everyone who swatched Dark Mode. Swatching has been a big success, as it’s allowed us to hear feedback from a wider variety of Ravelers than ever before. The Dark Mode Swatcher Group included over 16,000 Ravelers who are both new and longtime users; use different parts of Ravelry in different ways; are currently using Merino, Herdwick, and Classic modes; have different disabilities and visual capabilities; access Ravelry from a variety of devices, operating systems, and browsers; and are from every generation of crafter. (You can learn more about Swatching, our beta testing method, here.) We read every last message that was sent to us, had very helpful exchanges with those to whom we sent follow up questions, and made a lot of adjustments to Dark Mode based on your common feedback. Thank you for carrying Dark Mode over the finish line with us!