Do you use dark mode on your phone or computer? Do you wish AO3 would switch to dark mode when your device did? Good news! AO3 recently added a new option for skins that can help with that.

Here’s what you need to do to make AO3 automatically switch to the Reversi skin when you enable dark mode on your device:

Log in. Copy the CSS for Reversi. Go to the Create New Skin page. Leave the “Type” field set to “Site Skin.” Every skin on the Archive has to have a unique name, so fill in the “Title” field with something like “Your Name’s Automatic Dark Mode.” Paste the CSS for Reversi into the big “CSS” field. Where it says “Advanced,” press the “Show ↓” button to reveal more options. In the section that says “Choose @media,” check the box for “(prefers-color-scheme: dark).” It’s one of the last options on the list, so you’ll have to scroll. Press “Submit” to save your skin. Press “Use” to apply it.

If your device is currently set to light mode, you won’t notice anything. But when you switch your device to dark mode, the Reversi skin will be applied to the Archive! When you switch back to light mode, you’ll see the regular white and red layout again.

For information on browser compatibility, please refer to MDN’s prefers-color-scheme page.

For help with AO3 site skins, please check the Skins and Archive Interface FAQ.