Archive of Our Own (AO3) is one of the most widely used fanfiction platforms in the world, offering millions of works across thousands of fandoms. Because many users spend hours reading on the site, visual comfort becomes essential. Enabling Dark Mode on AO3 is one of the most effective ways to reduce eye strain, improve readability at night, and personalize your browsing experience. Fortunately, AO3 provides built-in customization tools that make switching to a darker theme straightforward.

TL;DR: AO3 allows users to enable Dark Mode through its built-in “Skins” feature. Simply log in, go to your Dashboard, select “Skins,” and choose a dark site skin such as “Reversi.” You can use the default dark theme or create a custom one for greater control. Dark Mode reduces eye strain and improves readability, especially in low-light environments.

In this guide, you will learn how to enable Dark Mode on AO3 step by step, how to customize it, and what to do if you want even more control over the appearance of the site.

Why Enable Dark Mode on AO3?

Before diving into the instructions, it is helpful to understand the practical reasons for enabling Dark Mode:

  • Reduced eye strain: Dark backgrounds are often easier on the eyes in low-light settings.
  • Improved readability: Light text on dark backgrounds can create better contrast for extended reading sessions.
  • Battery savings: On OLED screens, darker themes can reduce battery consumption.
  • Personal preference: Many users simply prefer the aesthetic of a darker interface.

AO3 was designed with accessibility and user control in mind. Instead of forcing a single theme, it allows readers to change the appearance through a feature known as Site Skins.

Method 1: Enable Dark Mode Using the Default “Reversi” Skin

The easiest and most reliable way to activate Dark Mode on AO3 is by applying the built-in dark theme called Reversi.

Image not found in postmeta

Step-by-Step Instructions

  1. Log in to your AO3 account. You must be logged in to apply site skins.
  2. Click on your username in the top-right corner.
  3. Select “Dashboard.”
  4. From the Dashboard menu, click “Skins.”
  5. Under the “Site Skins” section, look for “Reversi.”
  6. Click “Use” next to Reversi.

Once activated, the entire site will switch to a dark background with light text. The change applies immediately and affects all AO3 pages while you are logged in.

What Is Reversi?

Reversi is AO3’s official dark theme. It inverts the typical light background into a dark gray or black tone while adjusting text colors for readability. It is maintained by AO3’s team, ensuring compatibility with new site updates.

If you are looking for a fast, stable, and low-maintenance solution, Reversi is the recommended option.

Method 2: Create a Custom Dark Mode Skin

For users who want more control over fonts, background shades, or link colors, AO3 allows full custom skin creation. This option is particularly helpful if Reversi feels too dark or does not meet your specific accessibility needs.

Image not found in postmeta

How to Create a Custom Skin

  1. Log in and go to your Dashboard.
  2. Click “Skins.”
  3. Select “Create Site Skin.”
  4. Give your skin a name (for example, “My Dark Mode”).
  5. In the CSS field, enter your custom dark theme code.
  6. Click “Submit.”
  7. After saving, select “Use” to activate it.

Example Basic Dark Mode CSS

If you want a simple starting point, you can use code such as:

body {
  background-color: #121212;
  color: #e0e0e0;
}

a {
  color: #8ab4f8;
}

This creates a darker background than Reversi and adjusts link colors for visibility. You can continue refining colors, font sizes, margins, and spacing to suit your needs.

Important: Basic knowledge of CSS is helpful but not required. Many users share tested custom skins on AO3 forums and community pages.

Method 3: Use Browser Extensions (If Logged Out)

If you do not have an AO3 account or prefer not to log in, you can still enable Dark Mode using browser extensions.

Popular Browser Extensions

  • Dark Reader (Chrome, Firefox, Safari, Edge)
  • Midnight Lizard
  • Turn Off the Lights (with dark mode features)

These extensions automatically convert bright websites into dark-themed versions. While they work well, they may occasionally cause formatting inconsistencies on complex pages.

How to Use Dark Reader (Example)

  1. Open your browser’s extension store.
  2. Search for “Dark Reader.”
  3. Click “Install.”
  4. Enable it while browsing AO3.

This method does not require an AO3 account but depends on third-party software.

Comparison Chart: Dark Mode Options for AO3

Method Login Required Customization Level Stability Ease of Use
Reversi Skin Yes Low Very High Very Easy
Custom Skin Yes High High Moderate
Browser Extension No Moderate Variable Easy

Recommendation: If you have an AO3 account, using Reversi is the most reliable and secure option. Custom skins are best for advanced users who want precision control.

Troubleshooting Common Issues

Dark Mode Is Not Applying

  • Ensure you are logged in.
  • Double-check that you clicked “Use” next to the correct skin.
  • Refresh your browser page.

Formatting Looks Broken

If text appears misaligned or difficult to read:

  • Disable third-party browser extensions temporarily.
  • Switch back to the default AO3 skin to confirm the issue.
  • Edit your custom CSS to correct color conflicts.

Mobile Device Issues

AO3’s skins work on mobile browsers as long as you are logged in. However, browser-based dark extensions may behave differently depending on your mobile operating system.

Best Practices for Comfortable Reading

Dark Mode alone may not fully optimize your reading experience. Consider combining it with these additional adjustments:

  • Increase font size for long reading sessions.
  • Adjust line spacing in custom skins for improved readability.
  • Lower your device’s screen brightness in dark environments.
  • Enable your device’s system-wide Dark Mode for visual consistency.

These small changes can significantly reduce fatigue during extended reading periods.

Is Dark Mode Better for Everyone?

While Dark Mode is popular, it is not universally superior. Some users with astigmatism or certain visual sensitivities may find light backgrounds easier to read. AO3’s flexible skin system ensures you can experiment safely and revert changes at any time.

The key advantage of AO3’s approach is user control. You are not locked into a single interface design.

Final Thoughts

Enabling Dark Mode on AO3 is a straightforward yet highly effective way to enhance your reading comfort. Whether you choose the official Reversi skin, build a personalized custom theme, or use a browser extension, the process takes only a few minutes. For most users, activating Reversi through the Dashboard provides the best balance of ease, reliability, and accessibility.

Given the amount of time many readers spend exploring fanfiction archives, adjusting your visual environment is more than a cosmetic preference—it is a practical step toward long-term comfort. Take advantage of AO3’s built-in customization tools, and create a reading experience tailored precisely to your needs.