Archive of Our Own ^beta

Preview Images

Warning for dark mode users: Some of the images are quite bright.

Installation Instructions

Adding this site skin is slightly complicated, but I will try to explain everything as clearly as possible. To use all its features, you need to create a few separate skins and then chain them together by following the steps below.

UPDATE: If you have used this skin before September 2025, you may notice that some things have changed. The base skin was previously combined with the Powder & Pink theme, which is now a separate skin.
Please note that the current versions of the individual skins are incompatible with older versions, so I recommend always updating them all.

1. Create the base skin

This skin changes the layout of the site and lays the foundation for the different themes.

• Go to My Dashboard → Skins → Create Site Skin (or follow this link)
• Give it a unique title like "neos base - [your user name]"
• Copy this code and paste it into the CSS field (there are buttons at the top that let you copy or download the whole file)
• Open the Advanced settings and select Parent Only
  
• Click Submit
  

2. Create the theme skin(s)

• Create a new site skin
• Give it unique title like "neos - [theme name] - [your user name]"!
• Paste the code for the theme you want to use into the CSS field:
  • Powder & Pink
  • Dusky Dark Purple
  • Tumblr Blue (I recommend installing the font Instrument Sans on your device to make this one look its best—but that's completely optional)
  • Black & White
  • Midnight Black
• Open the Advanced settings and select Parent Only
  
• Click Submit

Optional: Add another theme to automatically switch between dark and light mode based on your device settings (this only works if dark and light mode are enabled on your device).

• Create a second theme skin by following the instructions above
• For both skins, open the Advanced settings and go to Choose @media
  • For the dark mode theme, select (prefers-color-scheme: dark) 
  • For the light mode theme, select (prefers-color-scheme: light)

3. Create the tablet skin

• Create a new site skin
• Give it a unique title like "neos - tablet - [your user name]"
• Paste this code into the CSS field
• Open the Advanced settings
  • Select Parent Only 
  • Under Choose @media select only screen and (max-width: 62em)
• Click Submit

4. Create the mobile skin

Important: If you haven't added the tablet skin, go back one step. The mobile skin inherits some important things from the tablet skin, so don't skip it!

• Create a new site skin
• Give it a unique title like "neos - mobile - [your user name]"
• Paste this code into the CSS field
• Open the Advanced settings
  • Select Parent Only
  • Under Choose @media select only screen and (max-width: 42em)
• Click Submit

5. Create the chain skin

The last step is to combine ("chain") the skins you created previously.

• Create a new site skin
• Give it a unique title like "neos - [your user name]"
• Paste this into the CSS field: .neos-skin { opacity: 1; } 
  (This code does nothing, but it must be there because of a bug that prevents the creation of chain skins if the CSS field is empty.)
• Open the Advanced settings, click the Add parent skin button and add all the skins you created in the following order:
  • Base skin
  • Theme skin
  • Optional second theme skin
  • Tablet skin
  • Mobile skin
• Click Submit, then Use and you're done!

Customization

General information

Some parts of the code are commented to make it easier to find the places where you might want to make changes. However, it is a work in progress, so some sections are commented in more detail than others. A comment always starts with /* and ends with */.

Unfortunately, AO3 removes all comments from the code after you save the skin here, which will make it harder to customize it. I therefore strongly recommend that you download/copy the code and save it somewhere before you start editing it.

Customize colors and other variables

As of September 2025, this skin uses custom properties (variables). This means that the colors and some other stuff, like the text size, are defined in the theme skins and can be easily customized. I have commented there which properties belong to which parts of the skin.

Let's say, for example, that you want to change the header background color for the Powder & Pink theme. All you have to do is find the following part of the Powder & Pink skin:

--bg2:        #FCFCFC;         /* header */

Now you can replace the #FCFCFC hex value with any other hex or rgb(a) value. This will insert your chosen color everywhere in the base skin where the property is referenced by var(--bg2).

Please note that the "FILTER" section in the theme skins contains elements whose colors can only be changed by using CSS filters. I recommend using a tool like this one, which generates the filters for the colors you want to use.

Some of the theme skins also have additional code to override the styling from the base skin in specific places.

Troubleshooting

As I don't know everything there is to know about CSS code, I may not be able to fix every issue, but I'll try my best. I also might not be able to respond right away.