Work Text:
Here are the text docs with the code for light mode and dark mode! Just a heads up: those links are set to automatically create a copy of the text doc to add into your Google Drive, that way anyone can customize them without affecting the original copy. If you don't have a Google Drive account, you can use these links for the light mode and dark mode docs instead, and either go to File > Download to save them as a .docx or .txt file if you're on desktop or use Select All to copy the doc into your notes app if you're on mobile!
If you aren't familiar with the "/* [my notes text] */" notation I use throughout the docs, that's basically telling Ao3 to ignore any text between those slash-asterisk pairs. This is so you don't need to painstakingly delete each note I make: if you copy-paste the whole doc into Ao3's site skin field and hit "Update", it will automatically delete all of my notes and they won't affect the code in any way! That's the reason why I made the code in a separate text doc, so I (and you!) could refer back to my notes without them being lost forever after posting the skin.
And now here's what the skins look like in action!
As you can tell by the screenshots, I primarily made these with mobile formatting in mind, but the vast majority of the code works perfect on desktop as well! There are one or two hiccups that require some workarounds if you're a desktop user, but I've noted any instances of that in the docs with the text "IMPORTANT NOTE", so if you search for that phrase all those problem spots will show up with details on how to work around them!
Something that affects both mobile and desktop users is the fact that every device has a different screen/aspect ratio, which I nor CSS can always account for. Any time I use the properties "padding", "margin", and/or "width/top/bottom/left/right" (used with "position"), whatever values they have were based on my personal phone screen, and they therefore may need to be edited so things look the same on your screen. However, I highly recommend leaving the values alone at first so you can see how it looks, note which spots look off to you, and finally return to the text doc with all my notes on what does what in order to find and edit the code that needs adjusting.
If you aren't picky about that sort of thing, you can ignore most of the padding/margin/position stuff and it should still look mostly fine. But there are a couple of things that are meant to be moved to the center of your screen, meaning they can look especially bad (to me, at least) when misaligned. I did note all of those instances, though, so just search for "IMPORTANT NOTE" and you'll find them!
I did my best to note down every single section of code I wrote so you know exactly what it's doing. If there are any changes I've made that you don't like/want, just delete them! Or if you want to keep a backup of them just in case you change your mind, you can just put the "/* */" notation around the section of code you want omitted instead.
Also, if you like most of the dark mode color scheme but want to change the purple, I've also noted in the dark mode doc the colors which make up the purple sections so you can change them to any color you like!
Feel free to edit/delete/add to this code as much as you want! :)
EDIT 05-10-23: I added a few adjustments to the code! Within the code that starts with "dl.stats > dd" I added something to fix the spacing error for the tags inside of fics, and within the code that contains "a:not([href" I added something to prevent the action buttons on draft blurbs from overlapping the "Last Updated" info that I moved to the bottom of the blurb.
EDIT 02-13-25: Fixed the spacing on certain elements (and made sure they only applied to the cases I meant them for; bookmarks stats on regular non-series works had been slightly misaligned this whole time oh my god the shame). Added selectors so that non-Ao3 bookmarks get the same code applied to them as the works on here. Edited the line that added the "Last Updated:" text to not add it in front of edited comments' timestamps anymore. Fixed the formatting of the bookmark info box thing for works in collections so it's not extremely squished on mobile (for some reason???) but if you only use desktop it fucks up the formatting so I added a note to delete it. Also there was an important note for Firefox users at the end that I, for some reason, didn't type "IMPORTANT NOTE!" next to at first, so be sure to check that if that's the browser you use!
EDIT 09-22-25: Finally got around to two things that were bothering me since forever: writing code to account for making people's icons bigger for desktop so their comments weren't cut off at the start anymore, and figuring out why certain fics had extra space between their titles and authors (the answer was the lock icon for restricted fics, which for some reason—likely somewhere in the various code I copied from other people—was made invisible at some point lol). I've updated the code, but if you made edits to it and/or don't want to have to re-download-and-copy-paste it all again, here are the extra bits to add for:
Fixing the comments' formatting:
div#comments_placeholder h4.heading.byline {
padding-top: 4.67em;
}
Removing the lock icon for restricted fics (which, if it's something you'd like to keep, you can replace the "display: none" below with "float: right" instead):
img[title="Restricted"] {
display: none;
}
EDIT 09-25-25: I don't know when or how I missed it but they changed the selector type for the "Mark for Later" button, making the dark mode palette's code break on it. I've updated the doc, but if you don't want to or aren't able to easily update your code by restarting (OTL see similar note above I'm sorry), to fix this you'll have to ctrl+F for the string ".actions a" and add the selector ".actions button" to every section of code that applies to ".actions a", making sure to also add ":hover" after "button" if that code applies to ".actions a:hover" instead of just ".actions a". Again, sorry.