Dark mode/style/theme for Medium.com
Medium Modern Dark by forivall
Details
Authorforivall
LicenseCC0 1.0 Universal
Categorymedium
Created
Updated
Size8.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
with some custom modifications. homepage links to upstream.
Source code
/* ==UserStyle==
@name Medium Modern Dark
@description Dark mode/style/theme for Medium.com
@namespace github.com/CoreyVidal/Medium.com-Modern-Dark
@homepageURL https://github.com/CoreyVidal/Medium.com-Modern-Dark
@supportURL https://github.com/CoreyVidal/Medium.com-Modern-Dark/issues
@upstreamUpdateURL https://raw.githubusercontent.com/CoreyVidal/Medium.com-Modern-Dark/master/medium-modern-dark.user.css
@author Corey Vidal, Emily Klassen
@version 1.2.2
@preprocessor stylus
==/UserStyle== */
@-moz-document domain("medium.com") {
/*
White text:
F5F5F5
a.k.a.
rgba(255, 255, 255, 0.95);
High text:
E8E8E8
aka
rgba(255, 255, 255, 0.87)
Medium text:
D5D5D5
aka
rgba(255, 255, 255, 0.76);
Low text:
ACACAC
aka
rgba(255, 255, 255, 0.6);
*/
/* dark-dark */
.u-backgroundTransparentWhiteDarkest,
.u-backgroundGrayLightest,
.extremePromo,
.u-background--brandSageLighter,
.metabar-block,
.textInput,
.metabar,
.h
/* .ky */ {
background-color: #292929 !important;
color: #d5d5d5;
}
/* light-dark */
body,
html,
article,
.cardChromeless,
.screenContent,
/* .a, */
.c,
.h,
.canvas-renderer,
.u-backgroundColorWhite {
background-color: #2f2f2f !important;
color: #d5d5d5;
}
/* transparent overlay */
.overlay--lighter,
.overlay {
background-color: #2f2f2fd6
}
/*---------------COREY BEGINS---------------*/
/* PROFILES */
/* (This is the border for the below dropshadow) */
.fx {
border-color: rgba(37, 37, 37, 1);
}
/* Drop shadow for articles on profile page
EXAMPLE: https://medium.com/@WorldBrain */
.fz {
box-shadow: 0 1px 4px rgba(37, 37, 37, 1);
}
.fe {
border-bottom-color: rgba(37, 37, 37, 1);
}
.fk {
border-bottom-color: rgba(185, 185, 185, 1);
}
/* END OF PROFILES */
/* CHIPS */
/* EXAMPLE: https://medium.com/@WorldBrain/storexhub-an-offline-first-open-source-zapier-f8841810fd9c */
.pp {
background: rgba(242, 242, 242, 0.1);
}
/* END OF CHIPS */
/* HEADER */
/* This drop shadow (.x) overrides everything. Don't touch it. */
/*
.x {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
border-color: transparent;
}
*/
/*
.p {
box-shadow: 0 15px 0px 0 rgba(0, 0, 255, 0);
border-color: transparent;
}
*/
/* .dt is the hover card that appears on top of articles */
.dt {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
/*
.ah {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
border-color: transparent;
}
*/
.dg, .cz {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
/* END OF HEADER */
/* BUTTONS */
/* The "UPGRADE" button in the header */
.de, .cu {
border-color: rgba(3, 168, 124, 1);
}
/* Notification icon */
/* CONFLICT! With another .ri */
.ri {
background-color: rgb(3, 168, 124);
}
/* END OF BUTTONS */
/*
.c {
border-color: transparent !important;
}
*/
/* Front page top bar with transparency */
.l {
background-color: rgba(47, 47, 47, 0.95)
}
/* Front page top bar Medium logo */
.an,
.q,
.ew,
.aj {
fill: rgba(255, 255, 255, 0.95);
}
/*
#lo-homepage-no-ads-title {
color: rgba(255, 255, 255, 0.87);
}
#lo-homepage-no-ads-sub-title {
color: rgba(255, 255, 255, 0.76);
}
*/
.au {
color: rgba(255, 255, 255, 0.87);
}
.h1 {
color: rgba(255, 255, 255, 0.87);
}
.h2 {
color: rgba(255, 255, 255, 0.87);
}
.h3 {
color: rgba(255, 255, 255, 0.76);
}
/*Front page chips background colour*/
.de {
background-color: #292929;
}
/* Front page chips background colour selected */
/* But also footer table colour when you're locked out */
.fs {
background-color: /* This is intentionally left blank */
}
/* Front page chips hover overlay */
.do:hover {
background-color: rgba(255, 255, 255, 0.04);
}
/* Front page chips icon shadow */
.dp {
box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.08);
}
/* Front page chips font colour */
.dg {
color: rgba(255, 255, 255, 0.87);
}
/* Front page footer alternate text colour */
.ke {
color: rgba(255, 255, 255, 0.6) !important;
}
/* text */
/* text general */
.uiScale .ui-captionStrong,
.uiScale .ui-caption,
/*
h1,
h2,
h3,
h4,
*/
.imageCaption,
.button--chromeless:active,
.button--chromeless:focus,
.button--chromeless:hover,
.button--link:active,
.button--link:focus,
.button--link:hover,
.button,
p,
span,
.uiScale .ui-body,
.uiScale .ui-brand1,
.uiScale .ui-brand2,
.markup--mixtapeEmbed-strong,
.markup--mixtapeEmbed-em,
.u-textColorDark,
.uiScale .ui-h2,
.uiScale .ui-summary,
.uiScale .ui-h4,
.u-textColorNormal,
.ai,
.uiScale .ui-h3 {
color: #d5d5d5 !important;
/* background-image: none !important; */
}
/* text header */
.extremeAdaptiveSection-imageHeader {
color: #292929 !important;
}
/* blocks & codeboxes */
blockquote, .pb {
border-color: #d5d5d5 !important;
color: #d5d5d5 !important;
}
/* links */
a,
a:hover {
color: #06e988 !important;
}
/* bottom banner delete */
.u-backgroundWhite {
display: none;
}
/* light green */
.u-textColorLighter {
color: #73d085c9 !important;
}
/* stars */
.uiScale .ui-caption,
.u-textColorNormal,
.u-fillTransparentBlackDarker,
.y {
fill: #06e988 !important;
}
/* Transparency hole */
.metabar-block div {
background-color: transparent !important;
}
/* Search and Notification icon */
svg.svgIcon-use {
fill: rgba(240, 240, 240, .54)
}
svg.svgIcon-use:hover {
fill: rgba(250, 250, 250, .75)
}
/* Button on top be more noticeable */
a.button--upsellNav {
border-color: rgba(240, 240, 240, .54)
}
a.button--upsellNav:hover {
border-color: rgba(250, 250, 250, .75)
}
/* Darken the mouse over popup message box of the writer or publisher */
div.extremePostPreview-post > span.ui-capsSubtle,
div.extremePostPreview-post > div.u-flex > a.ui-capsSubtle {
color: rgba(250, 250, 250, .54) !important;
}
div.popover-inner,
div.popover-arrow:after {
background-color: #2f2f2f !important;
border: 1px solid rgba(240, 240, 240, .54) !important;
}
div.u-borderTopLighter {
border-top: 1px solid rgba(240, 240, 240, .54) !important;
}
.popover--bottom .popover-arrow {
top: 1.5px;
clip: rect(0px 18px 15px -4px);
z-index: 1000;
}
/* Front page sign in modal, but also mid-article scrim */
.lr {
background-color: transparent;
}
/* Front page sign in modal */
.lh {
background-color: #292929;
}
/* Front page sign in social media buttons */
.v {
color: rgba(255, 255, 255, 0.87);
}
/* Article title */
.cs, .cy, .cz {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt title */
.og {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt title */
.gu {
color: rgba(255, 255, 255, 0.87);
}
/* Article pre-footer */
.rj {
background-color: #292929;
}
/* Article alt pre-footer */
.vl {
background-color: #292929;
}
/* Article alt pre-footer */
/* CONFLICT! */
/* Behind text at bottom of article before pre-footer */
/* EXAMPLE: https://medium.com/@WorldBrain/storexhub-an-offline-first-open-source-zapier-f8841810fd9c */
.qc, .pz {
background-color: rgb(41, 41, 41);
}
/* Pre-footer background color */
.qo {
background-color: #292929;
}
/* Article alt pre-footer header text */
.fu {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt pre-footer header text */
.fo {
color: rgba(255, 255, 255, 0.87);
}
/* Article alt pre-footer body text */
.da {
color: rgba(255, 255, 255, 0.87);
}
.bj {
color: rgb(214, 214, 214);
}
/* Article pre-footer title backgrounds */
.ch {
background-color: transparent;
}
/* Mid-article random background colour blocks */
.ld, .ba {
background-color: #2f2f2f;
}
/* Article footer title backgrounds */
/* CONFLICT */
/*
.ri {
background-color: #050505;
}
*/
/* Scrim gradient when locked out of article */
.ml {
background: linear-gradient(rgba(47, 47, 47, 0), rgba(47, 47, 47, 0.5), rgba(47, 47, 47, 1));
}
/* Text header locked out of article */
.fw {
color: rgba(255, 255, 255, 0.6);
}
/* code */
.cw {
background-color: rgb(36, 36, 36);
}
/* Profile/Settings pop-out in top-right corner */
.u-resetSpectrum .u-baseColor--buttonDark {
color: rgba(255, 255, 255, 0.6) !important;
}
.button--chromeless:hover, .button--link:active {
color: rgba(255, 255, 255, 0.87) !important;
}
}