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 was close enough to a usable dark mode that I figured I'd poke at it a little bit, and it seems ilke if you remove one single line from my medieval skin, it all works out.
If you haven't already got it, create a site skin for my medieval skin. Instructions are in the ReadMe file.
In the medieval skin code, find ol.index.group, and delete it (line 18 in the github file)
If you haven't already got it, create a site skin for my simplified low contrast dark mode skin
Create a third site skin to combine those first two together
In the CSS box for that third skin, paste this code (it doesn't do anything but you need to have something in that box): li.blurb { background: transparent; }
Scroll down and tap on the button labelled Advanced
Scroll down again and tap on Add Parent Skin
In the text box, stop typing the name you gave to the medieval skin and select it from the drop down
Add Parent Skin again
Type in the name you gave the dark mode and select it from the drop down
Tap on the Submit button to save the third skin.
On the new page, Use the third skin.
Now you've got a dark medieval skin with a simplified interface for AO3.
PS. You might want to adjust the colours for the tags? If you need help, lemme know.
