✿ Release: Rosé Pine Site Skins ✿
*NEW* - Optional Card Layout
UPDATED: 1/19/26
This skin has received a major update—please review the instructions carefully as many changes have been made! Thanks to ZerafinaCSS’s refactoring of the neos skin using AO3’s new variable system, we now have streamlined, cleaner code along with some added fixes and color adjustments.
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: Advanced Blocker - Filter works by tags, authors, titles, word counts, language, completion status, update frequency, primary pairings / characters, and much more.
- 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: 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: 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 + AO3 Fictracker.
✿✿ AO3 INSTRUCTIONS ✿✿
✿✿ GITHUB INSTRUCTIONS & CODE ✿✿
Anonymous
sent a message
good day! i apologize if someone has already asked you this, but do userscripts work on mobile? i prefer to read on my phone cuz its what im accustomed to + the closest feeling to reading an actual book qq
Yes, they do! Check out the Add-Ons section of the skin instructions. I detail what to use there.
New AO3 Userscript: Reorder Ship Tags
Popping in to publish a new (somewhat self-indulgent) userscript. All it does is reorder relationship tags so romantic pairings (/) always appear before platonic ones (&) on work list pages.
Anonymous
sent a message
hi hi! i recently switched from my haphazardly thrown together skin to your rose pine one and i'm really loving it! i was just wondering if it was possible to make the platonic ships a separate bg color (i was using li.relationships a[href*="*a*"] before but idk how to integrate it with this code), as well as make the text of one tag (specifically the warnings one) bold while keeping the others as is? thanks in advance!
Hey! Sorry for the late response.
Using the following method should work, but you need to add it to the bottom of your theme skin (aka Rose Pine Dawn, Rose Pine Moon, etc) NOT the base skin.
li.relationships:has(a[href*=“%20*a*%20”]) a.tag, [class^=“relationship”] a[href*=“%20*a*%20”] {
background-color: #c4a7e7 !important;
}
fic concept where shane hollander wakes up in hudson williams’ body during the heated rivalry press tour and hudson wakes up as post-cottage shane hollander
I NEED hudson (in shane’s body) being an absolute menace to a completely bewildered (and lowkey terrified) ilya. like what happened to his sweet, autistic boyfriend? who is this gremlin with no filter or shame?? ilya keeps waiting for shane to be his usual self and hudson never actually read the long game so he has no clue what’s going to happen plot-wise
meanwhile shane is Stressed watching hudson’s old interviews trying to figure out why hudson talks Like That and also why everyone keeps asking him about his “yearning bottom eyes”. and who is this cutie patootie texan wearing ilya’s face??
every day I learn bot comments on ao3 are stooping lower and lower
anyway if you get a comment like this, chances are that they are bot and their goal is to do whatever it takes to get you to delete your work, most certainly (from what I’ve heard) it’s because they want to “safely” steal your work, use it to train their ai without you being able to rightfully claim ownership of your work since “there’s no proof that the work was stolen/was posted elsewhere first by you” because the original source has already been deleted.
THEY ARE ALL BOTS. at first it was “ao3 is deleting fics and your entire account will be affected unless you delete the fics yourself” then it was “this work contains contents that are illegal and they have already reported you and your fic to the police” (yes, that’s how desperate these bots are), and now it’s this.
report their comments to ao3 for spam—in this case, specifically, I think you may be able to report them for harassment too—and don’t pay attention to them, most importantly don’t delete your works, don’t feel discouraged by their comments. remember that they are bots and they mass comment something like this on people’s works at random to get people to delete their works. (or even if they’re not bot, they are still pathetic bullies who don’t deserve your time or attention.)
MORE ABOUT BOTS AND SCAMS PLAGUING AO3’S COMMENTS SECTION HERE
sent a message
Hey!! I know you probably get this a lot but I love your rose pine skin for ao3. It’s beautiful! Your instructions were easy to follow, even as someone who knows absolutely nothing about CSS. So thank you for that, my reading experience is so great now!
Ty for the kind words!! I’m happy the instructions were clear, I put a lot of effort into nailing them down ;-;
Anonymous
sent a message
Hello, sorry to bother your but you seemed the least intimidating and this might be a question you’ve already got But I’m working on a site skin of my own after seeing so many wonderful creations by you and others
But like an idiot I’ve been coding directly in Ao3, unable to see the results without saving and reloading and torturing myself like yeah. ANYWAY, is there a way to connect to ao3 directly for making skins in github?
Sincerely, a desperate idiot
Also, sorry for the long text
Hey! No dumb questions when it comes to coding site skins lol.
So a lot of us (including me) code with Visual Studio Code, which can be directly connected to Github so you can publish your code there. We then copy the code from Visual Studio Code / Github to AO3 and test it the old-fashioned way.
However, if you want to test your skin without having go through AO3’s CSS editor, you can be fancy and install the Stylus extension. It’s a CSS injector, so once you paste your code the changes will be seen immediately.
Also, I highly encourage you to check out the Themes of Our Own Discord server. It’s a support group for skin makers and users and I’m sure people have more advice to give.
✿ New Optional Tag Style ✿
I know I said no more updates for awhile! But this one’s too good not to share.
New optional tag style that’s a bit easier on the eyes! Instructions are in Step 2a of the installation guide. :)
Archive Card – AO3 Skin
A cream-based AO3 skin inspired by vintage archival cards.
English is not my first language, so please excuse any awkward phrasing.
Features
Cream background with blue accents; black body text for comfortable long reading
Card-style works listings inspired by archival filing cards
Typewriter-style statistics placed like a small footnote
Kudos list inspired by a library book pocket card
Stamp-style kudos icon featuring a California poppy (May 17 birth flower)
The stamp-style kudos icon was created with the assistance of AI due to the lack of suitable hand-drawn materials.
This skin is shared for fun and non-commercial use.
Visual materials are sourced from publicly available resources and are used for layout and aesthetic demonstration only.
Screenshots are shared for layout preview purposes only.