Actions

Work Header

Rating:
Archive Warning:
Category:
Fandoms:
Additional Tags:
Language:
English
Collections:
Ao3 Skins, ao3 codes/tutorials
Stats:
Published:
2020-04-20
Completed:
2025-02-06
Words:
1,516
Chapters:
2/2
Comments:
57
Kudos:
503
Bookmarks:
119
Hits:
28,965

Dark Mode Skin That Makes Ao3 Look Like Discord

Summary:

CSS script to make your Ao3 look like Discord!
This is also a Dark Mode so Ao3 stops hurting your eyes at night.

Notes:

HOW TO USE:

Go to "My Preferences" and then to "Skins".
Click "Create Site Skin".
Copy the CSS below into the CSS box and submit.
Click "Use".

If you want to return to the default skin, you can do that on the your "Skins" page as well.

Chapter Text

#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,
div.dynamic,
.dynamic form,
#ui-datepicker-div,
.ui-datepicker table {
background: #2F3136;
color: #eee;
border-color: #202225;
outline: #93A3E9;
box-shadow: none;
}

#header .actions a:hover,
#header .actions a:focus,
#header .dropdown:hover a,
#header .open a,
#header .menu,
#small_login,
#header .dropdown:hover .current + .menu,
.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: #2a2a2a;
}

#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: #7289da;
}

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

#header ul.primary,
#outer #footer,
.toggled form {
background: url("/images/skins/textures/tiles/black-noise.jpg");
}

#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: #36393F;
}

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

#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: #202225;
border-color: #36393F;
box-shadow: -1px -1px 3px #202225;
}

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

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

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

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

#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: #dcddde;
}

#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: #202225;
}

a,
a:link,
a.tag,
#header a,
#header a:visited,
#header .current,
#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: #fff;
}

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

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

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

.actions a:active,
.current,
a.current,
.current a:visited {
color: #fff;
background: #555;
border-color: #fff;
box-shadow: inset 1px 1px 3px #36393F;
}

.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;
}

#header ul.primary,
#outer #footer,
.toggled form {
background: url("/images/skins/textures/tiles/black-noise.jpg");
}

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

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

fieldset fieldset.listbox {
outline: none;
}

form dd.required {
color: #eee;
}

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

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

.announcement .userstuff a:visited {
color: #666;
}

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

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