Themes

Open for requests.

[judithonlinux]

About AO3 Skins

Hi, I've been playing with the site skins on AO3 because I love dark themes but I just didn't find one that I like. So I started exploring how to make my own theme and created a few adaptations of my favorite desktop (Gnome GTK) and text editor themes. They are free to use for everyone, no asking required (credits for the color palettes go to the GTK Themes Abyss and Matcha aswell as the Monokai project).

If anyone has any questions on how to apply skins or make your own, feel free to ask. You can also contact me on my main profile: @judithmactir

Tutorial on how to change the site skin on AO3 below the cut ↓

Step 1: Select "Skins" on the left side of your dashboard.

Step 2: Choose "Create Site Skin" on the top right (don't worry it's private. AO3 removed the option of public skins. This is just for you).

Step 3: Fill out the required information (Title must be unique, but won't be seen by anyone) and copy the whole code into the "CSS" box. Then "submit".

Step 4: You'll be forwarded to an overview page where you see the whole code. Scroll all the way down and apply the skin by pressing the "Use" button.

[judithonlinux]

Chapters: 8/8 Fandom: Original Work Rating: General Audiences Warnings: Creator Chose Not To Use Archive Warnings Additional Tags: Ao3 skins Summary:

I've been posting my custom AO3 skins on my Tumblr sideblog @judithonlinux and decided it might be a good idea to put them all in one spot here, because that's where it should be anyways. I couldn't find any tags for this, so if there's a tag that I missed, please let me know.

For a tutorial on how to change your site skin, please check out this Tumblr post.

If you're interested to adapting the colors or make your own, simple AO3 site skin based on my templates, you can find an easy to follow description in this post.

[judithonlinux]

How to make your own simple AO3 theme

I've been updating my theme posts and added the theme colors as hex codes separately to the posts. That should make it easier for anyone who wants to use them as templates to create their own themes.

So if you want to change them, all you have to do is:

Copy the whole theme code into a text editor that has a find&replace function (any editor should have that)

Look up the five color codes at any hex color picker and select the hex code of the color you want to replace it with

Use find&replace to change the occurrences of all the colors in the theme code

Save it to AO3 as described here

[judithonlinux]

AO3 Site Skin - DarkPurple

for @beastlyinstrument

Theme colors: #070707, #191919, #f2f2f2, #541f7b, #551f78

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #070707; color: #f2f2f2; border-color: #191919; outline: #191919; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #070707; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #191919; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #070707; }

#header ul.primary, #outer #footer, .toggled form { background: #191919; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #070707; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #541f7b; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #191919; border-color: #551f78; box-shadow: 0 0 1px #541f7b; }

input, textarea { box-shadow: inset 0 1px 2px #541f7b; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #541f7b; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #541f7b; color: #191919; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #541f7b; color: #191919; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #541f7b; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #541f7b; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #f2f2f2; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #f2f2f2; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #551f78; border-color: #191919; color: #f2f2f2; box-shadow: inset 0 -8px 4px #551f78, inset 0 8px 7px #551f78; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #551f78; background: #191919; border-color: #191919; box-shadow: inset 2px 2px 2px #191919; }

.actions a:active, .current, a.current, .current a:visited { color: #f2f2f2; background: #551f78; border-color: #f2f2f2; box-shadow: inset 1px 1px 1px #070707; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #f2f2f2; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #f2f2f2; }

.mce-container input:focus { background: #f2f2f2; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #191919; }

.announcement .userstuff a:visited { color: #551f78; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #551f78; }

.event.announcement .userstuff a, .filters .expander { color: #f2f2f2; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Monokai

Theme colors: #272822, #000000, #e6db74, #fd971f, #3b3a32

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #272822; color: #e6db74; border-color: #000000; outline: #000000; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #272822; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #000000; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #272822; }

#header ul.primary, #outer #footer, .toggled form { background: #000000; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #272822; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #fd971f; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #000000; border-color: #3b3a32; box-shadow: -1px -1px 1px #fd971f; }

input, textarea { box-shadow: inset 0 1px 2px #fd971f; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #fd971f; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #fd971f; color: #000000; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #fd971f; color: #000000; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #fd971f; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #fd971f; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #e6db74; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #e6db74; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #272822; border-color: #000000; color: #e6db74; box-shadow: inset 0 -8px 4px #3b3a32, inset 0 8px 7px #3b3a32; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #fd971f; border-color: #000000; box-shadow: inset 2px 2px 2px #000000; }

.actions a:active, .current, a.current, .current a:visited { color: #e6db74; background: #3b3a32; border-color: #e6db74; box-shadow: inset 1px 1px 1px #272822; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #e6db74; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #e6db74; }

.mce-container input:focus { background: #e6db74; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #000000; }

.announcement .userstuff a:visited { color: #3b3a32; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #3b3a32; }

.event.announcement .userstuff a, .filters .expander { color: #e6db74; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Matcha GTK

Theme colors: #1b2224, #141a1b, #f2f2f2, #2eb398, #303b3e

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #1b2224; color: #f2f2f2; border-color: #141a1b; outline: #141a1b; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #1b2224; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #141a1b; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #1b2224; }

#header ul.primary, #outer #footer, .toggled form { background: #141a1b; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #1b2224; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #2eb398; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #141a1b; border-color: #303b3e; box-shadow: -1px -1px 1px #2eb398; }

input, textarea { box-shadow: inset 0 1px 2px #2eb398; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #2eb398; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #2eb398; color: #141a1b; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #2eb398; color: #141a1b; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #2eb398; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #2eb398; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #f2f2f2; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #f2f2f2; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #1b2224; border-color: #141a1b; color: #f2f2f2; box-shadow: inset 0 -8px 4px #303b3e, inset 0 8px 7px #303b3e; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #2eb398; border-color: #141a1b; box-shadow: inset 2px 2px 2px #141a1b; }

.actions a:active, .current, a.current, .current a:visited { color: #f2f2f2; background: #303b3e; border-color: #f2f2f2; box-shadow: inset 1px 1px 1px #1b2224; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #f2f2f2; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #f2f2f2; }

.mce-container input:focus { background: #f2f2f2; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #141a1b; }

.announcement .userstuff a:visited { color: #303b3e; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #303b3e; }

.event.announcement .userstuff a, .filters .expander { color: #f2f2f2; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Abyss Ink GTK

Theme colors: #111133, #00000f, #5f8787, #6d6df2, #1e1e2f

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #111133; color: #5f8787; border-color: #00000f; outline: #00000f; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #111133; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #00000f; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #111133; }

#header ul.primary, #outer #footer, .toggled form { background: #00000f; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #111133; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #6d6df2; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #00000f; border-color: #1e1e2f; box-shadow: -1px -1px 1px #6d6df2; }

input, textarea { box-shadow: inset 0 1px 2px #6d6df2; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #6d6df2; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #6d6df2; color: #00000f; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #6d6df2; color: #00000f; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #6d6df2; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #6d6df2; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #5f8787; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #5f8787; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #111133; border-color: #00000f; color: #5f8787; box-shadow: inset 0 -8px 4px #1e1e2f, inset 0 8px 7px #1e1e2f; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #6d6df2; border-color: #00000f; box-shadow: inset 2px 2px 2px #00000f; }

.actions a:active, .current, a.current, .current a:visited { color: #5f8787; background: #1e1e2f; border-color: #5f8787; box-shadow: inset 1px 1px 1px #111133; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #5f8787; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #5f8787; }

.mce-container input:focus { background: #5f8787; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #00000f; }

.announcement .userstuff a:visited { color: #1e1e2f; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #1e1e2f; }

.event.announcement .userstuff a, .filters .expander { color: #5f8787; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Abyss Envy GTK

Theme colors: #151c0e, #081100, #a7d877, #dd9999, #2c3d1b

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #151c0e; color: #a7d877; border-color: #081100; outline: #081100; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #151c0e; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #081100; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #151c0e; }

#header ul.primary, #outer #footer, .toggled form { background: #081100; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #151c0e; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #dd9999; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #081100; border-color: #2c3d1b; box-shadow: -1px -1px 1px #dd9999; }

input, textarea { box-shadow: inset 0 1px 2px #dd9999; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #dd9999; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #dd9999; color: #081100; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #dd9999; color: #081100; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #dd9999; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #dd9999; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #a7d877; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #a7d877; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #151c0e; border-color: #081100; color: #a7d877; box-shadow: inset 0 -8px 4px #2c3d1b, inset 0 8px 7px #2c3d1b; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #dd9999; border-color: #081100; box-shadow: inset 2px 2px 2px #081100; }

.actions a:active, .current, a.current, .current a:visited { color: #a7d877; background: #2c3d1b; border-color: #a7d877; box-shadow: inset 1px 1px 1px #151c0e; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #a7d877; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #a7d877; }

.mce-container input:focus { background: #a7d877; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #081100; }

.announcement .userstuff a:visited { color: #2c3d1b; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #2c3d1b; }

.event.announcement .userstuff a, .filters .expander { color: #a7d877; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Abyss Deep GTK

Theme colors: #0c171a, #00080a, #56c1d8, #5f8787, #0e292f

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #0c171a; color: #56c1d8; border-color: #00080a; outline: #00080a; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #0c171a; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #00080a; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #0c171a; }

#header ul.primary, #outer #footer, .toggled form { background: #00080a; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #0c171a; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #5f8787; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #00080a; border-color: #0e292f; box-shadow: -1px -1px 1px #5f8787; }

input, textarea { box-shadow: inset 0 1px 2px #5f8787; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #5f8787; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #5f8787; color: #00080a; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #5f8787; color: #00080a; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #5f8787; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #5f8787; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #56c1d8; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #56c1d8; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #0c171a; border-color: #00080a; color: #56c1d8; box-shadow: inset 0 -8px 4px #0e292f, inset 0 8px 7px #0e292f; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #5f8787; border-color: #00080a; box-shadow: inset 2px 2px 2px #00080a; }

.actions a:active, .current, a.current, .current a:visited { color: #56c1d8; background: #0e292f; border-color: #56c1d8; box-shadow: inset 1px 1px 1px #0c171a; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #56c1d8; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #56c1d8; }

.mce-container input:focus { background: #56c1d8; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #00080a; }

.announcement .userstuff a:visited { color: #0e292f; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #0e292f; }

.event.announcement .userstuff a, .filters .expander { color: #56c1d8; }

.chapter p { font-size: 110%; }

[judithonlinux]

AO3 Site Skin - Abyss Blood GTK

Theme colors: #1a0c0c, #110000, #999999, #d87777, #2f1313

Code to copy below the cut ↓

#outer .region, #footer .group, .post fieldset fieldset, fieldset fieldset { background: none; }

body, .group, .group .group, .region, .flash, fieldset, fieldset fieldset ul, form dl, textarea, #main .verbose legend, .verbose fieldset, .notice, ul.notes, input, textarea, table, th, td:hover, tr:hover, .symbol .question:hover, #modal, .ui-sortable li, .required .autocomplete, .autocomplete .notice, .system .intro, .comment_error, .kudos_error, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table { background: #1a0c0c; color: #999999; border-color: #110000; outline: #110000; box-shadow: none; }

#header .actions a:hover, #header .actions a:focus, #header .dropdown:hover a, #header .open a, #header .menu, #small_login, .group.listbox, fieldset fieldset.listbox, form blockquote.userstuff, input:focus, textarea:focus, li.relationships a, .group.listbox .index, .dashboard fieldset fieldset.listbox .index, #dashboard a:hover, th, #dashboard .secondary, .secondary, .thread .even, .system .tweet_list li, .ui-datepicker tr:hover { background: #1a0c0c; }

#header .dropdown .menu a:hover, #header .dropdown .menu a:focus, .splash .favorite li:nth-of-type(odd) a, .ui-datepicker td:hover, #tos_prompt .heading, #tos_prompt [disabled] { background: #110000; }

#outer, .javascript, .statistics .index li:nth-of-type(even), #tos_prompt, .announcement input[type="submit"] { background: #1a0c0c; }

#header ul.primary, #outer #footer, .toggled form { background: #110000; }

#header ul.primary, #footer, #dashboard ul, dl.meta, .group.listbox, fieldset fieldset.listbox, #main li.blurb, form blockquote.userstuff, div.comment, li.comment, .toggled form, form dl dt, form.single fieldset, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker { border-color: #1a0c0c; }

.group.listbox, fieldset fieldset.listbox, #main li.blurb, .wrapper, #dashboard .secondary, .secondary, form blockquote.userstuff, .thread .comment, .toggled form { box-shadow: -1px -1px 1px #d87777; }

#dashboard .current, .actions a:active, #outer .current, a.current, .current a:visited, span.unread, .replied, span.claimed, dl.index dd, .own, .draft, .draft .unread, .child, .unwrangled, .unreviewed, .ui-sortable li:hover { background: #110000; border-color: #2f1313; box-shadow: -1px -1px 1px #d87777; }

input, textarea { box-shadow: inset 0 1px 2px #d87777; }

li.blurb, .blurb .blurb, .listbox .index, fieldset fieldset.listbox, .dashboard .listbox .index { box-shadow: inset 1px 1px 1px #d87777; }

#footer a:hover, #footer a:focus, .autocomplete .dropdown ul li:hover, .autocomplete .dropdown li.selected, a.tag:hover, .listbox .heading a.tag:visited:hover, .symbol .question, .qtip-content { background: #d87777; color: #110000; }

.splash .favorite li:nth-of-type(odd) a:hover, .splash .favorite li:nth-of-type(odd) a:focus { background: #d87777; color: #110000; }

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header fieldset, #header form, #header p, #dashboard a:hover, .actions a:hover, .actions input:hover, .delete a, span.delete, span.unread, .replied, span.claimed, .draggable, .droppable, span.requested, a.work, .blurb h4 a:link, .blurb h4 img, .splash .module h3, .splash .browse li a:before, .required, .error, .comment_error, .kudos_error, a.cloud7, a.cloud8, #tos_prompt .heading { color: #d87777; }

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_error, .kudos_error, .LV_invalid, .LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active, .qtip-content { border-color: #d87777; }

a, a:link, a.tag, #header a, #header a:visited, #header .primary .open a, #header .primary .dropdown:hover a, #header .primary .dropdown a:focus, #header #search input:focus, #header #search input:hover, #dashboard a, #dashboard span, #dashboard .current, .heading, .group .heading, .filters dt a:hover { color: #999999; }

a:visited, .actions a:visited, .action a:link, .action a:visited, .listbox .heading a:visited, span.series .divider { color: #999999; }

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header .actions a { background: #1a0c0c; border-color: #110000; color: #999999; box-shadow: inset 0 -8px 4px #2f1313, inset 0 8px 7px #2f1313; text-shadow: none; }

.actions a:hover, .actions input:hover, #dashboard a:hover, .actions a:focus, .actions input:focus, #dashboard a:focus { color: #d87777; border-color: #110000; box-shadow: inset 2px 2px 2px #110000; }

.actions a:active, .current, a.current, .current a:visited { color: #999999; background: #2f1313; border-color: #999999; box-shadow: inset 1px 1px 1px #1a0c0c; }

.delete a, span.delete { box-shadow: -1px -1px 2px rgba(255,255,255.25); }

ul.required-tags, .bookmark .status span, .blurb .icon { opacity: 0.9; border: 0; }

#outer .group .heading, #header .actions a, fieldset.listbox .heading, .userstuff .heading, .heading, .userstuff h2 { text-shadow: none; color: #999999; background: none; }

#header .actions a, fieldset fieldset, .mce-container button, .filters .expander { box-shadow: none; }

fieldset fieldset.listbox { outline: none; }

form dd.required { color: #999999; }

.mce-container input:focus { background: #999999; }

.announcement .userstuff a, .announcement .userstuff a:link, .announcement .userstuff a:visited:hover { color: #110000; }

.announcement .userstuff a:visited { color: #2f1313; }

.announcement .userstuff a:hover, .announcement .userstuff a:focus { color: #2f1313; }

.event.announcement .userstuff a, .filters .expander { color: #999999; }

.chapter p { font-size: 110%; }