AO3 Site Skins Guide - Best Skins & How to Use Them (2026)

What Are AO3 Site Skins?

AO3 site skins are custom CSS stylesheets that change the visual appearance of Archive of Our Own. They can modify colors, fonts, spacing, layout, and practically every visual element of the site. Think of them as themes — the underlying content stays the same, but the look and feel changes entirely.

Key Facts About AO3 Skins

Pure CSS — Skins are CSS only. They cannot run JavaScript or access your data, so they are completely safe to use.
Public skins are reviewed by AO3 volunteers before being made available to all users.
Private skins can be created by any logged-in user for personal use without review.
Account required — You need to be logged in to apply or create site skins.
Reversible — You can switch back to the default skin at any time.

AO3's default theme uses a red-and-white color scheme that has remained largely unchanged since the site launched. Site skins give you the power to replace that with anything from a gentle dark mode to a fully redesigned interface.

How to Apply a Site Skin (Step by Step)

Applying a site skin takes less than a minute. Here is exactly how to do it:

Log In to Your AO3 Account

Site skins are tied to your account. You must be logged in to apply them. If you do not have an account yet, check our AO3 invite guide.

Go to Your Preferences

Click your username in the top-right corner of any AO3 page, then select Preferences from the dropdown menu.

Find the Site Skin Dropdown

Scroll down the preferences page until you see the Site Skin section. There is a dropdown menu listing all available public site skins.

Select Your Preferred Skin

Choose a skin from the dropdown. If you want to browse first, visit archiveofourown.org/skins?skin_type=Site to see all public skins with descriptions.

Click Update

Scroll to the bottom of the preferences page and click Update. The new skin will take effect immediately across the entire site.

Tip: If the skin does not look right immediately, try a hard refresh (Ctrl+Shift+R on Windows/Linux or Cmd+Shift+R on Mac) to clear your browser cache.

Best Dark Mode Skins

Dark mode is by far the most requested feature on AO3, and site skins are how you get it. These skins replace the bright white background with darker tones that are easier on the eyes, especially for late-night reading sessions.

Reversi

The most popular dark mode skin on AO3. Reversi inverts the default color scheme to give you a clean dark background with light text. It is well-maintained and handles most AO3 page elements correctly.

Best for: Readers who want a straightforward, no-frills dark mode that just works.

Low Vision Dark

A dark theme designed with accessibility in mind. It features higher contrast ratios, larger default font sizes, and carefully chosen colors that work well for users with low vision.

Best for: Users who need high contrast and larger text alongside dark mode.

Midnight Garden

A softer dark mode with deep navy and muted green accents. Less stark than a pure black background, which some readers find more comfortable for extended reading.

Best for: Readers who find pure black backgrounds too harsh and prefer softer dark tones.

Best Mobile-Friendly Skins

AO3's default layout can feel cramped on mobile devices. These skins optimize spacing, font sizes, and layout to make reading on phones and tablets more comfortable.

Mobile Friendly Skin

Adjusts padding, margins, and font sizes specifically for small screens. Buttons and links are larger and easier to tap, and the sidebar filters are more usable on touchscreens.

Best for: Readers who primarily use AO3 on their phones.

Clean Reading

Strips down the AO3 interface to focus on what matters most: the text. Reduces visual clutter, increases the reading column width, and uses a comfortable line height for long reading sessions.

Best for: Readers who want a distraction-free reading experience on any device.

Best Accessibility Skins

AO3 offers several skins designed to improve the experience for users with visual impairments, dyslexia, or other accessibility needs.

High Contrast

Maximizes the contrast between text and backgrounds. Uses pure black text on white backgrounds (or vice versa in dark mode variants), with bold, clear link colors.

Best for: Users who need strong contrast to read comfortably.

Dyslexia-Friendly Skins

These skins use fonts like OpenDyslexic or similar typefaces designed to reduce letter confusion. They also increase line spacing and use slightly tinted backgrounds to reduce visual stress.

Best for: Readers with dyslexia or anyone who finds standard fonts hard to read.

Large Font Skins

Increase the base font size across all of AO3, making everything from story text to navigation menus easier to read without needing to zoom in your browser.

Best for: Anyone who prefers larger text or reads from a distance.

Best Aesthetic Skins

If you want AO3 to match your personal aesthetic, these skins transform the site with custom color palettes, themed designs, and visual flair.

Pastel Skins

Replace AO3's red-and-white scheme with soft pastel colors — lavender, mint, blush pink, or baby blue. These skins give the site a gentle, cozy feel that many readers love.

Seasonal and Themed Skins

Holiday themes, fandom-specific color schemes, and seasonal designs. Some creators make skins themed around specific shows, books, or aesthetics like cottagecore or dark academia.

Minimalist Skins

Strip AO3 down to clean lines, subtle colors, and generous whitespace. These skins remove visual noise and let the content take center stage, often with modern typography choices.

How to Create Your Own AO3 Site Skin

If none of the existing skins are quite what you want, you can create your own. AO3 skins use standard CSS, so any CSS knowledge you have applies directly. Here is how to get started:

Go to Your Skins Dashboard

Click your username, then My Skins (or navigate to archiveofourown.org/skins). Click Create Site Skin.

Name Your Skin and Write CSS

Give it a descriptive title. In the CSS box, write your custom styles. Start simple — even a few lines can make a big difference.

Save and Apply

Click Submit. Your private skin will appear in your Preferences dropdown. Select it and click Update to see it in action.

Starter CSS Snippets

Here are some common CSS changes to get you started:

Dark Background

body { background-color: #1a1a2e; color: #e0e0e0; }

Change the Header Color

#header { background: #2d2d44; }

Larger Reading Font

.userstuff { font-size: 1.2em; line-height: 1.8; }

Wider Reading Column

#workskin { max-width: 50em; margin: 0 auto; }

Want to share your skin? If you think others would enjoy your creation, you can submit it for public approval. On your skin's page, click "Make Public" and it will enter the review queue. AO3 volunteers will check the CSS and approve it if it meets their guidelines.

Parent Skins Explained

Parent skins are one of AO3's most powerful (and most confusing) skin features. Understanding them unlocks a whole new level of customization.

What Is a Parent Skin?

A parent skin is a reusable CSS module that other skins can inherit from. Instead of writing all your CSS from scratch, you can "attach" one or more parent skins to your skin. Your skin then inherits all of the parent's styles, and you only need to write the additional CSS for the changes you want on top.

Why Parent Skins Matter

Modularity — Mix and match different features. Want dark mode + larger fonts + custom link colors? Attach parent skins for each.
Easier maintenance — If a parent skin is updated (for example, to fix a bug when AO3 changes its layout), all child skins inherit the fix automatically.
Less CSS to write — You do not need to reinvent the wheel. Build on top of what others have already created.
Stacking — You can attach multiple parent skins to a single skin, layering their effects.

How to Use Parent Skins

When creating or editing a skin, look for the "Parent Skins" section. Search for existing parent skins by name and add them to your skin.

Order Matters

Parent skins are applied in order. If two parents style the same element, the one listed later takes priority. Your own CSS is applied last, so it always wins.

Creating Your Own Parent Skin

If you build a useful CSS module (like a color palette or a layout fix), you can create it as a parent skin so others can use it too. Just select "Parent Skin" as the type when creating it.

Troubleshooting Common Issues

Site skins are usually straightforward, but here are the most common problems and how to fix them:

Skin Not Showing Up

Make sure you clicked Update on the Preferences page after selecting the skin.
Hard-refresh your browser: Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac).
Check that you are logged in — skins do not apply when logged out.

Skin Looks Broken or Incomplete

The skin may be outdated. AO3 occasionally updates its HTML structure, which can break older skins.
A browser extension (like an ad blocker or dark mode extension) may be conflicting. Try disabling extensions temporarily.
Check if the skin has known issues listed on its AO3 page.

Custom Skin CSS Not Applying

Check for CSS syntax errors — a missing semicolon or bracket can break the entire stylesheet.
Make sure your selectors target the right elements. Use your browser's developer tools (F12) to inspect elements and test CSS.
AO3 sanitizes CSS for security. Some properties or selectors may be stripped out. Check AO3's skin FAQ for restrictions.

Skin Looks Different on Mobile

Not all skins include responsive CSS. The skin may only have been designed for desktop.
Try a skin specifically built for mobile, or add @media queries to your custom skin.
AO3 has a separate mobile layout that some skins do not account for.

Frequently Asked Questions

What are AO3 site skins?

AO3 site skins are CSS-based themes that change the visual appearance of Archive of Our Own. They can alter colors, fonts, layout, spacing, and more. Public site skins are created by users and shared with the entire AO3 community.

How do I apply a site skin on AO3?

Log in to AO3, click your username, go to Preferences, scroll to the Site Skin dropdown, select the skin you want, and click Update. The skin will apply immediately across the entire site.

What are AO3 parent skins?

Parent skins are reusable CSS modules on AO3 that other skins can inherit from. Instead of writing all CSS from scratch, skin creators can build on top of parent skins to add specific features like dark mode, custom fonts, or layout tweaks. This makes skins more modular and easier to maintain.

Can I create my own AO3 site skin?

Yes. Go to your dashboard, click Skins, then Create Site Skin. Enter a title, write your custom CSS, and save. You can keep it private or submit it for public approval. AO3 skins use standard CSS, so any CSS knowledge applies.

Why is my AO3 site skin not working?

Common reasons include: the skin was not saved in Preferences (click Update), your browser cache is showing the old style (hard-refresh with Ctrl+Shift+R or Cmd+Shift+R), the skin has CSS errors, or a browser extension is overriding AO3 styles. Try switching to the default skin and back again.

Are AO3 site skins safe to use?

Yes. AO3 site skins are pure CSS and cannot run scripts or access your data. Public skins are reviewed by AO3 volunteers before approval. They only change the visual appearance of the site and cannot modify content or account settings.

How do I switch back to the default AO3 skin?

Go to Preferences, change the Site Skin dropdown back to the default option, and click Update. Your AO3 will immediately return to the standard red-and-white theme.

Do AO3 site skins work on mobile?

Most AO3 site skins work on mobile browsers, but not all are optimized for small screens. Look for skins specifically tagged as mobile-friendly or responsive. Some skins may look different on mobile than on desktop depending on how the CSS was written.

AO3 Site Skins Guide — Best Skins & How to Use Them

In This Guide