Skip to content

AO3 high contrast B/W by mfz

Screenshot of AO3 high contrast B/W

Details

Authormfz

LicenseCC Zero

Categoryarchiveofourown.org

Created

Updated

Size37 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

high contrast black and white theme optimized for e-ink screens + adjustable colors

Notes

adjust colors in the Stylus settings. sepia and dark backgrounds work as well.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           AO3 High Contrast Black and White
@namespace      https://github.com/milkberryjam/themes
@author         mfz
@description    `high contrast b/w theme for ao3 with adjustable colors`
@version        20231014.13.36
@license        CC0-1.0
@preprocessor   default
@advanced text baseFont "Font" "helvetica"
@advanced text baseFontSize "Base font size" "16px"
@advanced color color "Text color" #000000
@advanced color linkColor "Link color" #000000
@advanced color vlinkColor "Visited color" #000000
@advanced color tagColor "Tag color" #000000
@advanced color bgColor "Background color" #FFFFFF
@advanced text workFont "Work font" "georgia"
@advanced text workFontSize "Work font size" "18px"
@advanced text workWidth "Max paragraph width of work page (AO3 default is 72em)" "77em"
==/UserStyle==*/

@-moz-document domain("archiveofourown.org") {
/* fonts */
html { font-size: var(--baseFontSize); }
#outer { font-size: 1em; }
#MAIN *, body, blockquote, pre, #header a, input, .actions a, .datetime, .meta, .autocomplete, h1, h2, h3, h4, h5, h6, .heading, .dropdown, .secondary, span.unread, .replied, span.claimed, .actions span.defaulted, .toggled form, .dynamic form, textarea, span.symbol, span.question, select, button { font-family: var(--baseFont),arial, helvetica neue, segoe ui, sans-serif !important; }
kbd, tt, code, var, pre, samp { font-family: menlo, consolas, monospace !important; }
blockquote, pre { font-weight: normal; }
#main em, #main cite, #main i { font-style: italic; }
#header .menu .current, h6, .lv_validation_message, span.delete, .important, a.cloud8 { font-weight: bold !important; }
#workskin [role="article"] div.userstuff, #workskin .userstuff[role="article"] { font-family: var(--workFont),arial, sans-serif !important; font-size: var(--workFontSize) !important; line-height: 1.5; }
.important { font-weight: bold; }
#main, .splash h3.heading, .filters .expander, .userstuff h2, .post .required .warnings, dd.required, .required .autocomplete, .autocomplete .notice, form dd.required, .meta span.series .divider, .datetime { color:  var(--color); }
.datetime { font-size: 85%; font-weight: normal; }
   
/* remove all shadows */
*, *:focus { outline: none !important; }
#header, .dropdown, .wrapper, .secondary, fieldset, #outer #header .primary, .notice, ul.notes, form dl, form.verbose legend, .verbose form legend, .listbox .index, #header fieldset, .error, .kudos_error, .comment_error, .caution, .delete a, span.delete, .toggled form, .dynamic form, .LV_invalid, label, .action, input[type="checkbox"], .alert.flash, * { box-shadow: none !important; }
#main * { text-shadow: none !important; }

/* backgrounds */   
   #inner, body.javascript, #main .splash .favorite li:nth-of-type(2n+1) { background: var(--bgColor) !important; }
   body, #main, #header, #header .primary, #header .menu, #small_login, .dropdown, #header .dropdown:hover .current+.menu { background: var(--bgColor); }

/* basic adjustments */
.home .primary { overflow: auto; }
.group { box-sizing: border-box; }
#main { padding-top: 2em; }
   
/* work/userstuff */
#workskin { max-width: var(--workWidth); }
.userstuff blockquote { padding: 0 0.75em; }
#workskin { padding: 0; }
#workskin .chapter .preface { border: none; }
#workskin .preface blockquote.userstuff { font-size: 0.95em; }
#workskin .preface { margin: 1em 2%; padding: 0; }
.preface .title { margin-top: 2em; }
.feedback .kudos { line-height: 1.4; font-size: 0.9em; }
dl.meta { border: 1px solid; border-radius: 2px; margin: 0.643em 0; }
div.preface .series ul, div.preface .children ul { padding: 0; }
.preface blockquote { margin-left: 0; margin-right: 0; }
.userstuff img { max-width: 100% !important; }

/* headings */
h1, h2, h3 { word-break: normal !important; display: block; }
.heading { font-weight: bold; word-break: normal !important; }
.splash h3.heading { font-size: 1rem; padding-bottom: 0.643em; }
.heading, .listbox .heading a, .collections, h2.heading, #header .collections { font-weight: normal; }
.home .header h2 { border-bottom: none; }
h2 { font-size: 1.9rem; }
h3 { font-weight: bold; }
.userstuff h3 { border-color: var(--color) !important; padding: 0.643em 0; margin: 0.643em 0; border-style: solid !important; border-bottom-width: 1px; }
.preface .module h3 { border-bottom: 1px solid /*var(--color)*/ !important; padding: 0.643em 0; }

   
/* links */
.heading a { border-bottom: 0; }
a, a:link, a:visited, a:visited:hover { border-bottom: none; }
a, a:link, .blurb h4 a:link { color: var(--linkColor); }
div.preface .byline a:hover, a:hover { text-decoration: underline; }
div[id=main] a { font-weight: bold; }
a:focus { outline: none; }
.filters dt a:hover { border-bottom: none !important; }
#main a.tag { border-bottom: 1px dotted; font-weight: normal; }
#main li.relationships a.tag { background: transparent; font-weight: bold; }
#main .tags strong a { font-weight: normal; }
#main a.tag:hover, #main .blurb h5.heading a.tag:hover { background: transparent; text-decoration: none !important; box-shadow: none; border-bottom: 1px solid !important; }
#main .tag .delete a, #main .tag .delete a:hover { border-bottom: none !important; margin-bottom: 0.5em;   margin-right: 0.5em;}
.blurb a.tag { line-height: 1.3; }

/* navigation */
#header .primary li { margin: 0; }
#header a { outline: none !important; }
#header { margin-bottom: 0; border-bottom: 1px solid; }
#header .primary { height: auto; border-top: 1px solid; }
#header .primary a, #header #greeting .user a { text-decoration: none !important; border-radius: 0; background: transparent; }
#header .menu, #small_login, #header .dropdown:hover .current+.menu { box-shadow: none; min-width: 10em !important; width: auto !important; }
#greeting p.icon { padding: 0.2em 0 0 0; }
#login .user a { float: right; }
#small_login { line-height: normal; }
#small_login .actions input[type="checkbox"] { height: auto; vertical-align: baseline; }
#small_login .login .action { padding: .45em .7em; }
#header .menu, #small_login { border: 1px solid; box-shadow: none; }
#header .primary li.dropdown:first-of-type { margin-left: 1em; }
#header .primary a { font-size: 0.88rem; padding: 0.9em 0.6em; box-sizing: border-box; height: auto; }
#header #greeting .menu a, #header .primary .menu a, #header .menu.dropdown-menu a, #header .menu.dropdown-menu .current { padding: 0.5em 0.8em; font-size: 0.88rem; text-decoration: none !important; height: auto; }
#header .primary .menu.dropdown-menu a:hover, #header #greeting .menu a:hover { background: rgba(0, 0, 0, 0.07); text-decoration: none !important; }
#header .primary .dropdown:hover a.dropdown-toggle, #header .open a.dropdown-toggle, #header .dropdown a.dropdown-toggle:hover, #greeting .user .dropdown-toggle:hover, #greeting .user a[href*=logout]:hover { z-index: 99; background: transparent; }
#header .dropdown-menu { border-radius: 0 0 3px 3px; border: 1px solid; border-bottom: 3px solid; }
#header .user { padding: 0; }
#header .menu li { border-color: transparent; margin: 0; }
#header .logo { height: 18px; margin: 0.25em 0.5em 0 1em; }
#header h1 { font-size: 1rem; height: auto;  }
#header h1 a:hover { text-decoration: none !important; }
#header h1.heading { padding: 0.2em 0 0 0; }
#header .heading a { font-size: 1rem; font-weight: bold; }
#header #search #site_search { box-sizing: border-box; border: none; padding: 0.25em 0.4em; }
#header #search .submit { display: inline-block; margin: 0; padding: 0; }
#header #search .button { height: 1.88rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid; box-shadow: none !important; padding: 0.8em 0.8em; line-height: 0.5em; }
#header .search p { border-radius: 2px; margin: 0.4em; }
#header .collections { border-top: 1px solid; text-align: center; background-size: cover; background-position: center; line-height: normal; }
#greeting .user a { padding: 0.5em; }
#header .landmark { display: none; }
#outer .tip { font-size: 0.8rem !important; border: none; padding: 0.643em !important; }
.search input:focus+[role="tooltip"] { left: 0; right: 0; top: 2rem; }
.splash .favorite li, .splash .favorite li a, .splash .favorite li:hover { background: transparent !important; }
.splash .favorite li a { padding: 0; display: inline; }
.splash .favorite li { padding: 0.25em 0.375em; }

/* alerts, notices */
.flash.notice, .alert.flash { margin-bottom: 2em; }
.error, .kudos_error, .notice, .example, .caution { padding: 0.643em !important; border-radius: 4px; }
.userstuff .notice, .userstuff .caution, .userstuff .example { width: auto !important; margin: 0.643em auto !important; }
ul.notes { margin: 0.643em 0; }
.notice p:first-of-type { margin-top: 0; }
.notice p:last-of-type { margin-bottom: 0; }
.LV_validation_message { position: relative; display: inline-block; }

/* footer */
#footer { background: transparent; border-top: 1px solid; }
#footer a, #footer a:active, #footer a:visited { border-bottom: none; }
#footer a:hover { text-decoration: underline; }
#footer .actions .heading { color: var(--color); }
#footer ul { width: auto; box-sizing: border-box; margin: auto; overflow: auto; float: none; }
#footer ul li { padding: 0; margin: 0.5em 0; }

/* dashboard */
#main.dashboard { margin-top: 0 !important; margin-bottom: 0 !important; }
#dashboard, #dashboard.own { background: transparent; border: 1px solid transparent; margin: 0; border-radius: 0; padding: 0.5em; }
#dashboard li { margin: 0.2em 0; }
#dashboard a, #dashboard span.current { text-align: left; margin: 0; padding: 0.4em; border-radius: 3px; color: dimgray; text-decoration: none; line-height: 1.3; font-size: 0.86rem; }
#dashboard .secondary a { margin: 0; }
#dashboard .actions a:hover { background: transparent; color: var(--color); text-decoration: underline; }
#dashboard .current { background: transparent; font-weight: bold; color: var(...

Reviews

No reviews yet.