Blackbatcat

Hey there! For those that like a retro feel, I made an Ao3 site skin that resembles that OS. Everything should be okay to see for everyone in terms of icons. Big thanks to this css and this icons archive for the icons used. Whole thing is a bit big top paste in here, but you can find the doc via my website here.

Some extra tweaks:

Custom logo, mini-icon, and kudos image

Darkened author notes sections

I'm making a full dark-mode version of this, but that will be for later.

mobile preview:

doc link here

Another new AO3 site skin: Poudre et Plume.

Card Layout

NEW: Alternative Tag Styles

UPDATED: 4/18/26

When updating, be sure update all of the skins.

⊹⊹⊹⊹⊹⊹⊹⊹⊹⊹⊹

They're finally here! After much ✨ pain and suffering ✨, Rosé Pine skins have finally arrived. Credits to the lovely @zerafinacss for the original neos skin, which forms the bulk of the codebase.

If you notice any issues, feel free to drop a comment on AO3 or shoot me a direct message here.

Also, be sure to check out my userscripts which pair nicely with these skins or the AO3 Essentials script set.

AO3: Skin Switcher - Change skins from anywhere on the site without losing your original place.

AO3: Site Wizard - Change fonts and font sizes from anywhere on the site; automatically fix spacing issues.

AO3: Advanced Blocker - Filter works by tags, authors, titles, word counts, language, completion status, update frequency, primary pairings / characters, and much more.

AO3: Quick Hide - Quickly hide works, bookmarks, and comments while browsing. Hide things you've read or aren't interested in.

AO3: Reading Time & Quality Score - Adds customizable reading time and engagement score bars to every work. See how long a chapter will take and hide work metrics.

AO3: Chapter Shortcuts - Adds a shortcut button to jump straight to the most recent chapter of any work.

AO3: Reorder Ship Tags: Reorders relationship tags on blurbs so platonic ships (&) appear after romantic ships (/).

Pictured: My userscripts + FicTracker (BBC's Version)

✿✿ AO3 INSTRUCTIONS ✿✿

Coming back with a random major update!

For existing users: The font, text decoration, and UI variable sections have been moved from the theme skin to the base skin for easier control. If you've made personal modifications to the base or theme skins I strongly recommend saving your old skins somewhere else before updating.

Changelog

Refactored base and theme skins: moved non-color variables, fonts, and text decorations to base skins

Added custom properties for hide/unhiding profile pic, social splash, and footer. See the customization section of the instructions for more info.

Made user action icons responsive to font size

Updated metadata to include update times so you can check if you have the most recent version.

Merged in ZerafinaCSS' neos updates and fixes (thanks Zerafina!)

Hide empty UI elements: dashboard filters when there are no blurbs, and some empty filter categories/bookmarker search fields.

Ensure compatibility with the "Comment Formatting and Preview" userscript

Prevent parent skins dropdown from being cut off

Adjustments to secondary menus to fix overflow and placement issues

Add custom properties for blurb padding

Refactor nested list selectors

Reformatted "Delete Comment" window

🎶𝑺𝒕𝒓𝒂𝒘𝒃𝒆𝒓𝒓𝒊𝒆𝒔, 𝒄𝒉𝒆𝒓𝒓𝒊𝒆𝒔 𝒂𝒏𝒅 𝒂𝒏 𝒂𝒏𝒈𝒆𝒍'𝒔 𝒌𝒊𝒔𝒔 𝒊𝒏 𝒔𝒑𝒓𝒊𝒏𝒈

𝑴𝒚 𝒔𝒖𝒎𝒎𝒆𝒓 𝒘𝒊𝒏𝒆 𝒊𝒔 𝒓𝒆𝒂𝒍𝒍𝒚 𝒎𝒂𝒅𝒆 𝒇𝒓𝒐𝒎 𝒂𝒍𝒍 𝒕𝒉𝒆𝒔𝒆 𝒕𝒉𝒊𝒏𝒈𝒔…🎶

Thank you for liking my AO3 skins! To make it easier for everyone, I've compiled all my published skins into this pinned post. Click the links below to get the codes and installation guides:

🏨 Grand Hotel 🔗 Click here to view

⚜️ Faded Gilt 🔗 Click here to view

🌹 𝕸𝖎𝖉𝖓𝖎𝖌𝖍𝖙 𝕭𝖑𝖔𝖔𝖒 🔗 Click here to view

🍓 𝟏𝟎𝟎% 𝑺𝒘𝒆𝒆𝒕: 𝑨 𝑺𝒕𝒓𝒂𝒘𝒃𝒆𝒓𝒓𝒚 𝑻𝒉𝒆𝒎𝒆𝒅 𝑨𝑶𝟑 𝑺𝒌𝒊𝒏 🔗 Click here to view

🪻 Watercolor Hydrangea AO3 Skin 🔗 Click here to view

📜 Vintage Letter Green 🔗 Click here to view

📇 Archive Card – AO3 Skin 🔗 Click here to view

There’s a class action suit and Google just sent the email on how to claim money right to spam

A '(Guest)' pfp

⋆｡𓆝 𓆟 𓆞·｡ Disclaimers : I only use my handphone when making this skin and not an expert so i apologize if there's some places that look odd and some texts are hard to read. Images and pngs are from Tumblr and Pinterest, i tried to pick carefully so there's no AI used. I used this, this and followed very little bits of this CSS codes. I take no request. Dividers by @huraxy-dividers @pixopix

𖦹˚𓇼˚‧ Orca and Whale–especially Humpback Whale–are known to have deep hatred towards one another. Ironically i love them both, and i want to make a skin in reverence for those beautiful creatures where they seem to coexist with each other. Blue is my favorite color and i have been in love with ocean so i'm a little bewildered how i didn't make blue/sea theme skin until now lol! Easily this is my personal favorite skin out of all the others that i made.

my ao3 skins masterlist

Tutorial how to activate the skin :

Copy the code i provided in this GitHub, there is a copy button at the top right(•••) of the code box. And here if you prefer Google doc.

‌Sign to your AO3 account, after that go to "Dashboard".

‌On your "Dashboard", tap on a section called "Skins".

‌On the "Skins" page, tap on the button labelled "Create Site Skin".

‌Give your site skin a unique title, i usually use 2-4 word for the skins that i saved. IF YOUR SKIN NAME IS NOT UNIQUE, YOU CAN'T SAVE THE SKIN.

‌Paste the codes you copied from my GitHub into the "CSS" box.

‌When you're done, scroll to the bottom of the page and click a button labelled "Submit". This will save your site skin and take you to a new page where you can see the title of your skin as well as all of the code.

‌Click "My Site Skin" and you can see the skin are added, press "Use" to activate it.

A dark mode skin inspired by Star Wars, the Sith Order, and lightsabers!

Mobile:

Desktop:

⭐ AO3 Instructions ⭐

My newest AO3 site skin!

Download: https://www.so-obsessed.com/ao3-site-skins/ | https://github.com/intothisshadow/AO3-SiteSkin_MoonlitWisteria

https://archiveofourown.org/works/81075171

This is my first time trying to make a mobile friendly add-on skin. It seems to be working fine on my own Samsung Galaxy A55 5G and the responsive simulator I used, but let me know!

⁝ 3 themes: Rosé Pine Dawn · Rosé Pine Moon · Rosé Pine

⁝ 2 layouts: Card Layout and Normal Layout

✦ Card Layout

✦ Normal Layout

✦ Alternative Tag Styles

a fork of the wonderful Rosé Pine Site Skin by @blackbatcats — restoring some of the default AO3 aesthetics while keeping everything that makes the theme beautiful 🌷 a lot of the finer details that make this skin feel this polished came from his tweaks, and i'm really grateful for it

→ AO3 instructions

→ GitHub instructions & code

for additional tweaks check out my AO3 Tweaks — standalone add-ons that work with any skin:

LGBTQ+ color coded tags — highlights LGBTQ+ tags with their pride flag colors

EPUB download button — adds an EPUB button directly on work blurbs

I added a file to my GitHub where I compiled various code snippets for hiding, replacing, repositioning, or modifying specific elements on AO3.

It currently contains the following:

Hide Specific Buttons

Hide/Replace AO3 Header Elements

Hide Statistics

Hide Miscellaneous Elements (muted users notice, kudos list, etc.)

Display Download Button for Only One Format

Position Blurb Icons in a Row Under the Fandom Tags

Miscellaneous (add a heart to romantic/sexual relationship tags, black out images in works or gif icons, etc.)

You can add the snippets to your site skins by copying and pasting the parts you want to use.

Here is the file: