Archive of Our Own

Creating the Theme

1. Go to Dashboard > Skins. Click the "Create Site Skin" button
2. In the first box, make sure the "Type" is "Site Skin".
3. In the CSS field, enter the CSS given in the next section
4. Expand the "Advanced" section below the CSS field.
5. In the "Conditions" box, set "What it does" to "Add on to Archive Skin".
6. In the "Parent Skins" box, click "Add Parent Skin". Add Reversi as the parent skin.

CSS Code

#header ul.primary, #outer #footer, .toggled form {
    background-image: url(/images/skins/textures/tiles/black-noise.jpg);
    background-color: rgba(74, 49, 90, .8);
    background-blend-mode: luminosity;
}

#header #greeting img, #header .heading a, #header .heading a:visited, #header .user a:hover, #header .user a:focus, #header .user .current, #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, a.cloud7, a.cloud8, #footer .actions .secondary a, #tos_prompt .heading {
    color: rgb(180,190,250);
}

.error {
   color: #000;
}

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

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, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table {
    background: #323034;
    color: #eee;
    border-color: #222;
    outline: #111;
    box-shadow: none;
}

.actions a, .actions a:link, .action, .action:link, .actions input, input[type="submit"], button, .current, .actions label, #header input[type="submit"], #header .search input[type="text"] {
    background: #27272a;
    border-color: #222;
    color: #eee;
    box-shadow: inset 0 -8px 4px #02020229, inset 0 1px 1px #e5d1ef6b;
    text-shadow: none;
}

#greeting .icon, #dashboard, #dashboard.own, .error, .comment_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, #header .actions .current, .qtip-content {
    border-color: rgb(157 142 199);
}

#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, #inner .module .heading, .bookmark .status span, .splash .news li, .filters .group dt.bookmarker {
    border-color: #494050;
    border-color: #63606696;
}

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, div.dynamic, .dynamic form, #ui-datepicker-div, .ui-datepicker table {
    background: #ecccff0f;
    color: #eee;
    border-color: #222;
    outline: #111;
    box-shadow: none;
}

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

#footer .group{
    background: none;
}

.actions input[type="checkbox"] {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: auto;
}

#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: #18181a;
    border-color: #555;
    box-shadow: 0px 0px 1px #000;
}

.filters dl {
   padding: .643em
}

div.preface {
    margin: 1.5em 3em;
    padding: .643em .643em;
    float: none;
}

dl.work.meta.group {
    background: #323034;
}

#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: rgb(191 168 227);
    color: #111;
}

Theme Preview

Here's how the theme looks on desktop:

And here it is on mobile: