Glowy dark mode site skin
đŒ You would not believe your eyes, if 10 million fireflies ended up in the header of your AO3. đ¶
It's been a while since I tried glow effects, but I saw the fireflies and I couldn't resist.
CSS code under the cut.
#header { Â background-image: url("https://cdn.pixabay.com/photo/2022/10/19/16/56/fireflies-7533056_1280.jpg"); Â background-repeat: no-repeat; Â background-size: cover; Â background-position: center center; Â background-color: #152623; }
#header .heading { Â height: 15em; }
#header .primary { Â background: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; }
#header .logo, #header .heading sup { Â visibility: hidden; }
#header .heading a { Â color: #152623; Â text-shadow: 0px 0px 15px #f9f6ce; }
.event .userstuff { Â background: #425e50; Â border: 1px solid #f9f6ce; }
#outer.wrapper { Â background: #0d1d1f; Â color: #f9f6ce; }
#main a { Â color: #8c9b76; }
#greeting a.dropdown-toggle, #header .actions a { Â color: #f9f6ce !important; Â text-shadow: 0px 0px 3px #152623; }
#greeting .menu, #header .dropdown .menu, #header .dropdown:hover a { Â background: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; }
span.submit.actions input.button { Â display: none; }
#greeting img.icon { Â display: none; }
#header #search .text, .search [role="tooltip"] { Â background: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; Â color: #f9f6ce !important; Â border: 1px solid #0d1d1f; }
form.search input[type=text], form.search input[type=submit], .autocomplete div.dropdown ul { Â background: #0d1d1f !important; Â border: none; Â box-shadow: 0px 0px 15px #f9f6ce; Â color: #f9f6ce; Â display: block; }
#header #search .text { Â width: 7em; }
.notice, .comment_notice, .kudos_notice, ul.notes, .caution, .error, .comment_error, .kudos_error, .alert.flash { Â background: #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce !important; Â color: #0d1d1f; Â border: none; }
.notice a, .comment_notice a, .kudos_notice a, ul.notes a, .caution a, .error a, .comment_error a, .kudos_error a, .alert.flash a { Â color: #506957; Â font-weight: bold; }
.splash .module h3 { Â color: #f9f6ce; Â border-bottom: 2px solid #f9f6ce; }
.splash .favorite li:nth-of-type(2n+1) a { Â background: #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; Â color: #0d1d1f; Â font-weight: bold; Â font-variant: small-caps; }
.splash .favorite li:nth-of-type(2n+2) a { Â color: #f9f6ce; Â font-weight: bold; Â font-variant: small-caps; Â font-size: 110%; }
.splash .favorite li:nth-of-type(2n+1) a:hover, .splash .favorite li:nth-of-type(2n+2) a:hover { Â color: #f9f6ce; Â font-weight: bold; Â font-variant: small-caps; Â background: #425e50; }
#footer { Â background: #425e50; Â color: #f9f6ce; Â border-top: 3px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
#footer a, #footer .heading { Â color: #f9f6ce; }
.actions a, .actions a:focus, .actions input:focus, .action:focus, .actions li input, .actions li input[type="submit"], input[type="submit"], .actions li label, ul.navigation.actions li a, .action:link, .actions a:link { Â background: #425e50; Â border: 1px solid #f9f6ce; Â color: #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; Â border-radius: 5px; }
.current, #dashboard .current { Â background: #f9f6ce !important; Â color: #0d1d1f !important; Â box-shadow: 0px 0px 15px #f9f6ce !important; Â border-radius: 5px; }
#dashboard.own { Â border-top: 5px solid #f9f6ce; Â border-bottom: 5px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
#dashboard a:hover { Â background: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; }
#dashboard a { Â color: #f9f6ce; }
dl.meta { Â border: 1px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
.listbox .index { Â background: #0d1d1f; }
.listbox, fieldset fieldset.listbox { Â background: #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
form dl, fieldset, fieldset fieldset, fieldset fieldset fieldset, fieldset fieldset dl dl, dd.hideme, form blockquote.userstuff, input, select, select:focus, textarea, span.symbol.question, .own { Â background: #0d1d1f !important; Â color: #f9f6ce !important; Â border: 1px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
.autocomplete li.added, .post .meta dd ul li.added, label, label.required { Â color: #f9f6ce; }
span.delete { Â background: #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
span.delete a { Â color: #0d1d1f !important; Â font-weight: bold; }
.ui-sortable li, .dynamic form, div.dynamic { Â background: #0d1d1f; Â border: 1px solid #f9f6ce; }
.dropdown { Â background: #0d1d1f; }
form.verbose legend, .verbose form legend { Â background: #f9f6ce; Â color: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; }
li.blurb { Â border: 1px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
.draft { Â background: #0d1d1f; Â color: #f9f6ce; Â border: 2px dashed #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
.draft .wrapper { Â background: #0d1d1f; Â border: 1px solid #f9f6ce; }
#header h2 { Â background: #f9f6ce !important; Â color: #0d1d1f; Â box-shadow: 0px 0px 15px #f9f6ce; }
#stat_chart svg rect:first-of-type { Â opacity: 60%; }
#stat_chart g[clip-path^=url] > g:nth-of-type(2) rect, #stat_chart svg g:nth-of-type(2) > g rect:last-of-type, #stat_chart g[clip-path^=url] > g:nth-of-type(2) rect:first-of-type { Â filter: hue-rotate(140deg); Â opacity: 80% !important; }
.statistics .index li:nth-of-type(2n) { Â background: #0d1d1f; Â border: 1px solid #f9f6ce; }
.reading h4.viewed, dl.index dd, table, th, dt.child { Â background: #0d1d1f; }
#modal, span.replied { Â background: #0d1d1f; Â color: #f9f6ce; Â border: 2px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
h4.heading.byline { Â background: #f9f6ce; Â color: #0d1d1f; }
li.comment { Â border: 1px solid #f9f6ce; }
.comment div.icon { Â border-bottom: 5px solid #f9f6ce; Â box-shadow: 0px 0px 15px #f9f6ce; }
.thread .even { Â background: #425e50; }
.unread { Â background: #0d1d1f; Â border: 5px dashed #f9f6ce !important; }
span.unread { Â background: #f9f6ce; Â color: #0d1d1f; }
span.indicator::before { Â box-shadow: 0px 0px 15px #f9f6ce; }
.warnings .tag, .work .warning a.tag, dd.warning.tags a { Â border: 1px solid #f9f6ce; Â border-radius: 5px; Â background: #f9f6ce; Â padding-left: 2px; Â padding-right: 2px; Â box-shadow: 0px 0px 10px #f9f6ce; }
.relationships .tag, .work .relationships a.tag, dd.relationship.tags a { Â background: none; Â color: #f9f6ce !important; Â font-weight: bold; Â text-shadow: 0px 0px 15px #f9f6ce; }
.filters .expander { Â background: url("https://64.media.tumblr.com/3c89981f933f9f57157d6dcec6fd85a7/94c6737c6db9ad60-e5/s1280x1920/f7557e617a5439c506721bd326580a0cb4c1f8d8.png") left center no-repeat; Â color: #f9f6ce !important; Â font-weight: bold; }
.filters .expanded .expander { Â background: url("https://64.media.tumblr.com/dab095a2fd9387bc1e0c57747ba6b13f/94c6737c6db9ad60-ad/s1280x1920/c1a4e14e0565cdcac5d3e20bebac3ab440f2d607.png") left center no-repeat; }
This code is also on github.



























