I was experimenting with setting one skin for my laptop and a different skin for my phone and ended up with a halfway decent dark mode of my medieval skin by adding that one and my simplified low contrast skin together.
Still haven't figured out how to get totally separate skins based on screen size, but this was a fun little unexpected treat lol.
#this is kinda gorgeous actually #i wish i knew how skins worked
I'm going to start by telling you what skins do.
They basically take a website and put a little outfit on it. So for example, instead of having a white background, a skin makes it so that AO3 has a dark purple background. Or an image for a background. Or a gradient background.
Skins change the way the site looks, and those changes can be small (like what font is used or what the background looks like) or they can be large (changing a username to an icon, putting the filters on the left instead of the right).
The way that skins do that is through code. Websites are built in a code language called HTML. Skins are built in a language called CSS. What CSS does is modify the way HTML looks.
People like me think it's really fun to write CSS code that makes AO3 look different from the default site. We're fan coders (and sometimes professional coders), and we share our code with other people so that they can put a cute outfit on their AO3 account. Those other people don't need to code at all. They just have to copy our code and paste it into AO3.
(sidenote: I'm talking about site skins here, not work skins. Works skins just put a cute outfit on a specific fic, and the author does need to do a little bit of coding to apply those)
If you want to put a site skin on your AO3:
tap on your name at the top of the site and go to your Dashboard.
From there, select the link called Skins.
On the Skins page, tap on the button labelled Create Site Skin.
Give your site skin a unique name (if it's not unique on the Archive, you'll get an error and it won't save). I just add my nickname at the end of whatever I end up calling the skin. That usually works.
Copy the CSS code of a skin you like and then paste it into the big empty box labelled CSS.
Scroll to the bottom of the page and hit the Submit button. This will save the skin to your account, but it won't apply it yet. You can have dozens of skins saved if you want to.
After Submitting, AO3 will send you to a page that shows you the saved code for that skin. Scroll all the way down to the bottom of the page, and select the Use button. Now the skin will be applied to your account and AO3 will look different for you.
What I did here was create a new site skin that I just called "combo skin for pi" and I added my other two skins as a parent to it - essentially combining them together.
To add a parent skin, you can edit what you already saved or, after step 5 above you can select the button labelled Advanced, then on the button labelled Parent Skin and type in the name of the skin you want to add on.
You'll need to have both skins available to your AO3 account, so either save two (or more) custom skins from someone like me who posts code for folks or use one (or more) of the public skins that AO3 provides.
