Archive of Our Own

Chapter Text

Menu

• Previews
• Installation
  1. Create the Theme Skin
  2. Create the Main Skin
  3. Create the Tablet Skin
  4. Create the Mobile Skin
  5. Create and Activate the Final Skin
• Customization
  1. Theme variables & images
  2. Structural variables & CSS rules
  3. Tablet & Mobile overrides
• Credits

Previews ↑

Installation ↑

Customization ↑

Reusable values are defined as CSS variables and split across two files, depending on what they control:

• Theme variables & images: colors, gradients, images, icon filters in the theme skin file (theme-[theme-name].css), the one you picked in step 1. Each theme has its own.
• Structural variables & CSS rules: sizes, spacing, layout toggles, as well as the CSS rules, in main.css, shared by every theme.

In both files, variables are grouped and commented by purpose via semantic aliases (like --txt-color-link-navbar) so you can adjust things without digging through the entire stylesheet.

Important note

Theme variables & images ↑

→ Everything below is edited in your theme file (theme-[theme-name].css).

If you only want to retheme the skin (Pale Reverie for the following example), start by editing these base palette variables:

	/* -----------------------------------------------------------------
	  2.  PALETTES
	  ↳ Base color scales (do not use directly in css rules)
	---------------------------------------------------------------- */

	/* COLOR PALETTE 1 — Mauve palette (warm rose tones) */
	--color-mauve-light:         #f6e8eb;
	--color-mauve-mid:           #cdb3b3;
	--color-mauve-dark:          #664646;

	/* COLOR PALETTE 2 — Slate palette (cool blue-grey tones) */
	--color-slate-light:         #e3edee;
	--color-slate-mid:           #b3cbcd;
	--color-slate-dark:          #3a5f66;
	
	/* -----------------------------------------------------------------
	  3.  ACCENT COLORS
	  ↳ Highlight / interactive emphasis colors
	---------------------------------------------------------------- */

	--color-rose-brown:          #8f6565;
	--color-dusty-pink:          #cdb2b2;
	--color-purple:              #9d2d69;

Then map them here:

	/* -----------------------------------------------------------------
	  1.  PALETTE MAPPINGS
	---------------------------------------------------------------- */
	
	/* Palette 1 */
	--color-light-primary:              var(--color-mauve-light);
	--color-mid-primary:                var(--color-mauve-mid);
	--color-dark-primary:               var(--color-mauve-dark);
	
	/* Palette 2 */
	--color-light-secondary:            var(--color-slate-light);
	--color-mid-secondary:              var(--color-slate-mid);
	--color-dark-secondary:             var(--color-slate-dark);

	/* Accent colors */
	--color-accent:                     var(--color-rose-brown);
	--color-accent-soft:                var(--color-dusty-pink);
	--color-accent-pop:                 var(--color-purple);

Or skip the palette layer entirely and hardcode your hex values directly in the palette mappings if you prefer. My two-tier structure (raw palette → semantic aliases) was just for clarity, but it's not a requirement. Do whatever feels right and easy.

Deeper customization

Feel free to explore the theme file and tweak it to your liking. It's dense and a little messy (sorry about that), but I've added comments throughout to help you find your way around (english isn't my first language so there may be occasional mistakes, bear with me). If you're lost, you can refer to the table of contents at the beginning of the file.

To change the text color and background of works, for example, update the values of --txt-color-work and --bg-color-work. To change the text color globally, pick --txt-color-body. And so on.

Replacing images

All images can be replaced with your own by updating the URLs in the second part of the theme file. Each image is set via a dedicated class. For instance, the header image is defined in #header::before. All classes that include image references are grouped together in the theme file, so they should be easy to find.

Changing icon colors

Icon colors (such as stat icons or the AO3 logo) are set via CSS filter values (see --filter-stat-icon and similar variables). To generate a filter that matches a specific hex color, use the tool recommended by ZerafinaCSS: css-color-filter-generator. Paste your target color and copy the generated filter string into the corresponding variable.

Structural variables & CSS rules ↑

→ Everything below is edited in main.css, shared by all themes. These variables handle sizing, spacing, and layout behavior rather than colors (look for the VARIABLES (SIZING, SHAPE & SETTINGS) section.

To make the header image bigger, for example, find the --height-header-banner variable. To change the base text size sitewide and inside works, update --txt-size-main and --txt-size-work. And so on.

Some features can also be toggled on or off via variables. For instance, the sticky dashboard menu and search filters can be disabled by switching their position value from sticky to static, and scrollable areas like tag lists or blockquotes can have their max-height adjusted or removed entirely. Each variable has a comment explaining what it does and what values it accepts.

You can also customize elements directly in the CSS. For example, to change the sitename, find:

 /* Customized sitename */
#header h1.heading a::after {
  content: “Archive of Your Own”;
}

Similarly, symbols used in tags or headings are set via a content rule inside their respective classes.

Tablet & Mobile overrides ↑

→ This part concerns tablet.css and mobile.css, the two skins created in step 3 and step 4.

These two files don't declare any new variables of their own. The theme file and main.css already include ready-made tablet/mobile values for some variables, in their RESPONSIVE LAYOUT section (look for variables suffixed -tablet or -mobile, like --height-header-banner-mobile). tablet.css and mobile.css simply reassign the base variable to this dedicated value, within their own :root block, at their respective breakpoint:

--radius-dashboard-menu-links: var(--radius-dashboard-menu-links-tablet);

Beyond variables, these two files also contain their own CSS rules, which override the ones from main.css at their breakpoint. This is how, for instance, the dashboard menu switches from a column to a row layout on smaller screens.

Last note

Credits ↑

Huge thanks to ZerafinaCSS and BlackBatCat

• Pastel, muted and dark mode icons by ZerafinaCSS → Replace the AO3 Icons
• Stats icons & hover text system by ZerafinaCSS → Stats Icons with Hover Text
• Blurb icon layout + color-coded tags + button styling adapted from ZerafinaCSS → Site Skin Add-Ons
• Sticky dashboard, sticky search/filter box, and miscellaneous content structure inspired by:
  • BlackBatCat → Rosé Pine Site Skin
  • ZerafinaCSS → neos Skin
• Counting Stars theme header: 'Tree silhouetted against a night sky with nebula' by kjpargeter — Designed by Magnific
• Header banner image (except for Counting Stars), constellation border image and kudos illustration generated with Gemini.
  If you're not comfortable with AI-generated assets, feel free to replace them with your own custom images.