in love with too much

[ AO3 Site Skin ]

I customized a night mode version based on the previous cream-colored archive card style skin. It features glowing shadows that make the decorative patterns look like luminescent flowers.

🌿 ━━━━━━━━━━━━━━━ 🌿

📖 How to set up the Auto-Switch Mode

If you want the skin to automatically switch between light and dark modes based on your device settings, follow these steps:

❧ Step 1:

Create a new skin for the Light theme. Check the box for Parent Only, and under the Advanced options, check `prefers-color-scheme: light`. Then, save (Submit) the skin.

❧ Step 2:

Create a new skin for the Dark theme. Check Parent Only, and under the Advanced options, check `prefers-color-scheme: dark`. Save (Submit) this skin as well.

❧ Step 3:

Create a new master skin to combine the previous ones (name it "Auto-Switch Master"). Copy the code for Auto-Switch Master into the CSS box. Then, in the Parent Skins field, search for and add the "Light" and "Dark" skins you just created. Finally, save.

Note: Chrome users might encounter a bug where the "Parent Skins" fail to load or add properly. If this happens, please try using a different browser to complete this step.

🌿 ━━━━━━━━━━━━━━━ 🌿

📝 Notes & Disclaimers

• Language:English is not my native language, so please bear with me if there are any mistakes.

• Non-Profit:This skin is created purely for fun and shared for free. No profit is intended.

• Credits: All decorative assets and patterns were found online and belong to their respective owners.

• Screenshots: The fanfiction featured in the preview images is not mine; it is included solely to demonstrate the skin's visual effects.

AO3 Tweaks!

i made a little github repo of CSS add-ons and userscripts i've been putting together for my AO3 setup and thought i'd share in case anyone finds something useful here

also published on AO3 — archiveofourown.org/works/80873616

All CSS add-ons can work standalone, but for the full experience i recommend using Rosé Pine AO3 skin by @blackbatcats , as most of them are based on and designed to be complementary with this gorgeous site skin

also: i have a personal fork of the Rosé Pine skin ( AO3 Rosé Pine — Closer to Home ) that restores some of the default AO3 interface aesthetics if that's your thing

——————————————————

✦ Hide Inactive Navigation Buttons · AO3 Skin

hides the inactive prev/next buttons when there's no page to go to. tiny thing but it cleans up the interface a lot

——————————————————

✦ LGBTQ+ Color-Coded Tags · AO3 Skin

colors LGBTQ+ related tags with their corresponding pride flag colors. covers up to 30 orientations, comes in light and dark versions (based on a CSS by @blackbatcats, inspired by Highlight AO3 Tags' pride tags)

——————————————————

✦ Custom Fonts for Mobile · Stylus only

AO3's skin editor doesn't support '@ font-face' feature so custom fonts can't load on mobile — this fixes that using Stylus extension and a font host URL. the readme has a full guide on how to get the URL for any font you want

——————————————————

✦ AO3 Logo in Header · AO3 Skin

removes the "Archive of Our Own" text and keeps just the logo, recolored to match the Rosé Pine palette. works with any theme though

——————————————————

✦ Header Padding · Stylus only

adds breathing room to the header on desktop/wider screens. companion to the logo snippet above

——————————————————

✦ Platonic Ship Tags · AO3 Skin

gives platonic relationship tags (X & Y) their own color so they're visually distinct from romantic ones. pairs really well with the AO3: Reorder Ship Tags script (all credits to @blackbatcats)

——————————————————

✦ Custom Fonts · AO3 Skin

the fonts section extracted from the Rosé Pine skin as its own separate skin, so you don't have to touch it every time the main skin updates + added a custom font for work pages (all credits to @blackbatcats)

——————————————————

✦ EPUB Download Button · Userscript · Greasyfork

adds an EPUB download button directly on work blurbs while you're browsing so you don't have to open the full work page. two versions:

next to the work title (V2)

bottom-left corner of the blurb (V1)

——————————————————

✦ Unread Messages next to Favorites · Userscript · Greasyfork

Moves the Unread Messages section next to the Favorites list on the AO3 home page

(based on Charles Rockafellor's script : AO3: put new comments' notifications into home page's favorites div)

——————————————————

✦ Bonus: Light/Dark Toolbar Toggle for Zen & Firefox

a toolbar button that toggles your site appearance between light and dark with one click — if your skin supports 'prefers-color-scheme' feature (aka auto light/dark mode switch) this will save you so many trips to the settings. i made it mainly for AO3 but it works on any site that supports the feature

——————————————————

everything is pick-and-choose, installation instructions for each method (AO3 skin, Stylus, and Greasyfork) are all in the repo

→ github.com/ravenothere/AO3-Tweaks

——————————————————

Credits:

i wouldn't have been inspired to do any of this if it weren't for discovering @blackbatcats' AO3 skin and scripts, go throw him flowers for being the reason any of this exists

i genuinely had to start teaching myself how to edit and use CSS and JavaScript just for the sake of this newly discovered AO3 wellbeing,.. a couple weeks ago i had near zero knowledge on how to navigate any code in general, but once i realized i CAN actually customize my OWN desired experience nothing could stop me anymore.

take this as your sign to learn that new skill ‒ or dont, your loss

Featured in the previews:

Rosé Pine AO3 site skin — specifically my version: Rosé Pine — Closer to Home

AO3: Chapter Shortcuts

AO3: Reading Time & Quality Score

Other Scripts i'm also using (100% recommend):

AO3: Advanced Blocker — VERY VERY customizable blocker for literally anything on the website, heals my OCD brain to the core, very beautiful and clean UI, basically a gem.

AO3: Reorder Ship Tags — reorders ship tags so all platonic ships are placed at the end of the relationship tag order, for more organized and neat look.

AO3: Comment Formatting and Preview — Adds buttons to insert text formatting to your comment, and shows a live preview box of what the comment will look like, very helpful especially for those who aren't familiar with HTML.

AO3: Quick Hide — very convenient script that lets you hide-or more like collapse- works or comments, you can control the visibility of the collapsed item which is so satisfying for some reason, i use it to hide fics that i've already read or downloaded.

AO3: Skin Switcher — tho i no longer switch my skins much anymore but its a very helpful shortcut that saves you the bother of navigating to your skins page, either to edit or set different skins.

AO3: Site Wizard — so basically that is all in one skin editor at your hands, you can customize the site's fonts, colors, work formatting. very straightforward and easier UI for simple skin customizations.

AO3: No Re-Kudos — automatically hides the kudos button on works where you've already left kudos.

AO3: Auto Pseud — auto-selects your pseud for comments and bookmarks on AO3, based on fandom, all you need is to assign each pseud to your desired fandom.

​This AO3 skin was inspired by antique books featuring elegant gold foil stamping.

​Truth be told, I am not entirely satisfied with the day mode. It might not be as comfortable for extended reading as some of my past designs. However, I am absolutely in love with this purple and background color combination—it evokes the feeling of writing and sketching with purple ink on old parchment. The purple foiled motifs also carry a slightly mottled texture, as if gently faded by the passage of time. Perhaps I will update the palette if I discover a better match one day?

​I actually began with the night mode and tested several color schemes. I attempted a red, gold, and black palette, but it was a miss. During the process, the contrast felt far too glaring, and the black background was suffocatingly heavy. This purple and gold, on the other hand, reminds me of the beautiful gowns of noble girls in classical oil paintings. I am truly delighted with how it finally came together.

​⚙️ Quick Installation Guide

​The installation process is almost identical to the famous "🌹 𝕸𝖎𝖉𝖓𝖎𝖌𝖍𝖙 𝕭𝖑𝖔𝖔𝖒 🌹" skin, but with just one extra step: the base file.

​You will need to create 4 skins in total. First, create the base, the Day skin (Violet Parchment with light mode checked), and the Night skin (Gilded Velvet with dark mode checked). Finally, when creating your Master Auto-Switch Skin, add them as Parent Skins in this exact order:

​Faded Gilt - base

​Faded Gilt - Violet Parchment

​Faded Gilt - Gilded Velvet

​📌 A Quick Note

​Just a quick heads-up: Since this skin is highly optimized for mobile devices, the position of some decorative assets might shift slightly if you use it on a desktop or a larger screen. Please don't mind it too much! The layout and immersive reading experience are absolutely at their most perfect on a mobile phone. 📱✨

​📢 Disclaimer

​Non-Commercial: This skin was created purely for fun and personal interest. It is shared for free and is not intended for any commercial activity or profit.

​Language: Please note that English is not my native language. There might be some grammatical errors or awkward phrasing. No offense is intended—if any wording feels inappropriate, it is purely unintentional.

​Assets: All visual materials and decorative assets used in this skin were sourced from the internet. All credits go to the original creators.

​Content: The works shown in the screenshots are for demonstration purposes only. They are not my own writing; I have only used them to showcase the visual effects of the skin.

Dark Acadamia/Fallish Ao3 Skin

I tried to have a mix of both dark academia and cozy fall

the other options for the kudos is this (you can change it by simply replacing the kudos image link): https://www.pngall.com/wp-content/uploads/15/Dark-Academia-Background-PNG.png

Hey! I’m working on a green skin right now, but it’s still a work in progress, and it won’t be similar to the vintage pink one—hope that’s okay!

I finally got around to organizing the code for this[ skin.]

If anyone is curious, the title of this skin comes from a classical Chinese poem:

折花逢驿使，寄与陇头人。

"I met a messenger while holding a flower, and asked him to deliver it to a friend far away."

江南无所有，聊赠一枝春。

"Jiangnan has nothing else to offer, so I send a branch of spring instead."

I've always loved the imagery of this poem. The "branch of spring" isn't meant literally—it's a way of sending spring itself to someone far away, along with your thoughts of them.

Since spring is the season when everything turns green again, "聊赠一抹绿" felt like the perfect title for this skin. 🌿

setup steps:

click the code link above — it’ll open a long block of code. copy all of it (don’t include the title). it’s way easier to do this on desktop since mobile has copy limits

on AO3, go to your username → dashboard → skins → create site skingive it a unique title, paste the CSS you copied, then scroll down and hit submitonce it’s created, just click “use” to apply the skin

If you share this skin, please link back to this Tumblr post. Thank you!

Something in the works?? 👀

It's honestly shocking how easy the new variables system makes theming. I can just slap some new colors on my rose pine base and boom - instant theme.

if u wanna use it, here is the code

If you don't like the AO3 icons, or if you always have trouble figuring out what they mean, this site skin might be useful for you!

It replaces the content icons (for warnings, completion status, relationships and ratings) in blurbs with color-coded text labels. Additionally, multiple relationship tags or ratings are no longer grouped together under one icon. For example, you will see an "F/F, F/M, M/M" label instead of the "Multi" icon if all of these types of relationships are tagged in a story.

The label colors and the text that replaces the icons can be easily customized.

Before:

After:

Find instructions for adding and customizing the site skin here on AO3: