AO3 Site Skin: Moonlit Wisteria
Moonlit Wisteria is a soft, romantic AO3 site skin built around a palette of dusty roses, wisterias, and cool lavenders — creamy parchment backgrounds give way to blush petal headers and deep indigo footers, with every gradient flowing from warm to cool as the eye moves down the page. Work blurbs and forms are styled with subtle shadows and rounded corners, tags are color-coded by type and the custom icon set swaps AO3’s default icons for a coordinated mist-blue and rose scheme.
Version: 1.0.2
AO3 instructions: https://archiveofourown.org/works/81075171
GitHub: https://github.com/intothisshadow/AO3-SiteSkin_MoonlitWisteria
FONT
This theme uses Lora (https://fonts.google.com/specimen/Lora) for body and Admiration Pains (https://www.dafont.com/admiration-pains.font) for Archive of Our Own text in the header. Both fonts need to be installed on your system to work. You can download them from above URLs or from the included Fonts folder.
CREATING A NEW SITE SKIN
In order to create a site skin, you need to have an AO3 account and you need to be logged in.
How to Install Your Custom AO3 Site Skin
Follow these steps to customize your Archive of Our Own interface:
1. Copy the Code
Head over to the GitHub repository and copy the provided code from style_desktop.css. You can easily do this by clicking the Copy button located at the top of the code block.
2. Navigate to Your Skins
· Log into your AO3 account.
· Tap your username at the top of the page and select Dashboard from the menu.
· Click on the Skins link in the Dashboard sidebar.
3. Create the New Skin
· Click the Create Site Skin button.
· Give a unique name for your skin. (Tip: To avoid “Title already taken” errors, try adding your username or a specific keyword to the title (e.g., MyCoolSkin_Username).
· Paste the CSS code you copied from GitHub into the box labeled CSS.
· In the Media section, select “all”.
4. Save
· Scroll to the bottom of the page and click Submit. You will be taken to a preview page showing your new skin details.
· If you’re reading on desktop: Click the Use button. Your new skin is now active and will be visible on any device whenever you are logged in.
· If you read also on mobile: Save but do not click Use. Continue with the next step.
CREATING THE MOBILE SKIN:
This skin comes with a mobile add-on that makes the skin look better on phones and tablets.
- Create a new site skin
- Copy/paste the code from style_mobile.css
- In the Media section, select:
only screen and (max-width: 42em)
- Save and Use.
CREDITS
Replace the AO3 Icons 2.0 by ZerafinaCSS, (Zerafina)
https://github.com/ZerafinaCSS/ | https://archiveofourown.org/works/57331222
SCREENSHOTS - Desktop
SCREENSHOTS - Mobile
Version
| Version |
Date |
Description |
| 1.0.2 |
2026-05-14 |
Dashboard current tab, mobile filter panel & legend fixes |
| 1.0.1 |
2026-05-11 |
Mobile & layout fix pass |
| 1.0.0 |
2026-03-12 |
Initial release + mobile add-on |
The changelog documents significant changes only — new features, architectural decisions, and notable bug fixes. Individual CSS tweaks, rule refinements, and minor mobile adjustments are not logged.
评论