Skip to content

StoryGraph Dark Mode by tserin

Screenshot of StoryGraph Dark Mode
Write a review Install Get Stylus

Details

Authortserin

LicenseNo License

Categorystorygraph

Created

Updated

Size1.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Quick & simple dark theme for StoryGraph to tide us over until an official one is released. Uses dark blue backgrounds with contrasting and off-white text styles. Some elements are left unchanged for visibility (searches, inputs), looking fine as is (many of the light green elements), or being unable to change with being 10 years out of practice (charts, stars). Some elements only lightened to fit accessibility guidelines against the dark background.

I don't have premium, so premium features or pages may not work correctly as I was not able to access them to test. Disable the style or highlight unreadable text if this happens.

Once an official dark mode is released, this will no longer be maintained. The site isn't hard at all to reskin, so hopefully that happens soon.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           app.thestorygraph.com
@namespace      userstyles.world
@version        1.0.0
==/UserStyle== */
@-moz-document domain("app.thestorygraph.com") {
#navbar {
    background:#020b19;
}

#navbar a:link {
    color:#72deea;
}

#navbar a:visited {
    color:#72a2ea;
}

#navbar a:active {
    color:#7e72ea;
}

.bg-lightGrey {
    background:#0a111c;
}

main {
background:#0a111c;
}

p {
    color:#dee4ed;
}

p a:link {
    color:#72deea;
}

p a:visited {
    color:#72a2ea;
}

p a:hover {
    color:#76c1c9 !important;
}

a:link {
    color:#72deea;
}

a:visited {
    color:#72a2ea;
}

a:hover {
    color:#76c1c9 !important;
}

.standard-pane {
    background:#020b19;
    border:2px solid #7697c9;
    color:#dee4ed;
}

#footer {
    color:#dee4ed;
}

.pane-heading {
    color:#76c1c9;
}

.secondary-btn {
    background:#14919B;
    color:#dee4ed;
}

.text-darkestGrey {
color:#c97678;
}

h5 {
    color:#76c1c9;
}

h6 {
    color:#76c1c9;
}

i {
    color:#dee4ed;
}

select {
    color:#000000;
}

input {
    color:#000000;
}

span {
    color:#dee4ed;
}

.text-xs {
    color:#dee4ed;
}

.read-status-form {
    background:#ffffff;
}

.text-red-900 {
    color:#c97678;
}

.leading-3 > span {
    color:#dee4ed !important;
}

.edit_read_instance > select {
    color:#000000 !important;
}
}

Reviews

No reviews yet.