Skip to content

[Deprecated] Patreon Dark Theme by darkissou

Screenshot of [Deprecated] Patreon Dark Theme
Write a review Install Get Stylus

Details

Authordarkissou

LicenseNo License

Categorypatreon.com

Created

Updated

Size16 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A simple dark theme for Patreon. THIS IS EARLY WORK IN PROGRESS.

Contributor(s):

  • Dawn

Notes

Features:

  • Dark theme
  • Many little tweaks

TODO

  • Improve the dark theme
  • Add different themes
  • Improve the code

Work in progress. For any questions/suggestions contact me on Discord: Darkuwu#2946

Changelog:

0.5

  • Even more improvements on the dark theme, thanks to Dawn for her contribution
  • Fixed divs on policy page (Dawn)

0.4

  • More improvements on the dark theme, specifically on user pages

0.3

  • Fixed home page color
  • Small adjustments on the dark theme

0.2

  • More improvements on the dark theme

0.1

  • Initial release

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         Patreon Dark Theme
@version      20240102.00.26
@namespace    userstyles.world/user/darkissou
@description  A simple dark theme for Patreon. Work in progress
@author       darkissou
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.patreon.com") {
/* ==UserStyle==
@name           Patreon Dark Theme
@namespace      github.com/openstyles/stylus
@author         Darkuwu#2946
@description    `A simple dark theme for Patreon. This is early work in progress`
@version        0.3
==/UserStyle== */

    :root {
        --global-bg-page-default: #282828;
        --global-bg-pageAlt-default: #222222;
        --global-bg-base-default: #222222;
        --global-bg-base-hover: #282828;
        --global-bg-base-pressed: #333333;
        --global-bg-baseAlt-default: #282828;
        --global-bg-baseAlt-hover: #E6E9F0;
        --global-bg-baseAlt-pressed: #D8DCE5;
        --global-bg-elevated-default: #222222;
        --global-bg-elevated-hover: #282828;
        --global-bg-elevated-pressed: #333333;
        --global-content-regular-default: #ddd;
        --global-content-regular-hover: rgb(170, 170, 170);
        --global-content-regular-pressed: rgb(125, 125, 125);
        --global-content-muted-default: #aaa;
        --global-content-muted-hover: #ddd;
        --global-content-muted-pressed: #ddd;
        --global-content-inverted-default: rgba(250,251,255,0.98);
        --global-content-inverted-hover: rgba(246,248,254,0.94);
        --global-content-inverted-pressed: rgba(241,244,253,0.9);
        --global-content-invertedMuted-default: rgba(233,237,252,0.7);
        --global-content-invertedMuted-hover: rgba(237,241,253,0.84);
        --global-content-invertedMuted-pressed: rgba(241,244,253,0.9);
        --global-constant-white-default: #FFFFFF;
        --global-constant-white-hover: rgba(255,255,255,0.96);
        --global-constant-white-pressed: rgba(255,255,255,0.9);
        --global-constant-whiteMuted-default: rgba(255,255,255,0.66);
        --global-constant-whiteMuted-hover: rgba(255,255,255,0.8);
        --global-constant-whiteMuted-pressed: rgba(255,255,255,0.86);
        --global-constant-whiteSubtle-default: rgba(255,255,255,0.18);
        --global-constant-whiteSubtle-hover: rgba(255,255,255,0.34);
        --global-constant-whiteSubtle-pressed: rgba(255,255,255,0.5);
        --global-constant-black-default: #000;
        --global-constant-black-hover: rgba(0,0,0,0.9);
        --global-constant-black-pressed: rgba(0,0,0,0.82);
        --global-constant-blackMuted-default: rgba(0,0,0,0.5);
        --global-constant-blackMuted-hover: rgba(0,0,0,0.66);
        --global-constant-blackMuted-pressed: rgba(0,0,0,0.82);
        --global-constant-blackSubtle-default: rgba(0,0,0,0.14);
        --global-constant-blackSubtle-hover: rgba(0,0,0,0.2);
        --global-constant-blackSubtle-pressed: rgba(0,0,0,0.34);
        
        --global-warning-muted-default: #605022;
        --global-critical-muted-default: #2f2a2b;
        --global-critical-muted-hover: #443435;
        --global-critical-muted-pressed: #603B3E;
        
        --global-primary-onMuted-default: #fff;
    }

    html {
        background-color: #282828    
    }

    body {
        background-color: #282828;
    }

    div[data-tag="sticky-header-footer"] {
        background-color: #222222;
        border-bottom: #888888;
    }

    .frJbNq {
        background-color: #222222;    
    }

    .fcuosE {
        background-color: #222222;
        border-bottom: 1px solid #282828;
    }

    .hoVuLK {
        color: #ddd;
    }

    .fDPnWT {
        color: #bbb;
    }

    .elAndz {
        color: #bbb;
    }

    .cupyBO {
        color: rgb(255, 66, 77);
    }

    .slvOM {
        color: #888888;
    }

    .iimCQQ {
        color: #ddd;
    }

    .edaHMc {
        color: #aaa;
    }

    #component-playground, .reactWrapper {
        color: #ddd
    }

    .jLYBpW {
        background-color: #222222;
    }

    .ibpkHY {
        background-color: #242424;
    }

    .dnXaZR {
        background-color: #222222;
    }

    .gWKjKG {
        background-color: #222222;
    }

    .fHUxJT {
        background-color: #222222;
    }

    .csZUvL {
        background-color: #222222;
        border-bottom: 1px solid #333333;
    }

    .eZEEwt {
        color: #ddd;
    }

    .fbpXPn:visited {
        color: #ddd;
    }

    .MmJYo svg {
        fill: #ddd;
    }

    .hdWTck {
        background-color: #222222;
    }

    .geGyUZ:hover {
        background-color: #282828;
    }

    .styles_filterBar__sJ_Q1 > * {
        background: #282828;
    }

    .styles_filterBar__sJ_Q1 > * > .styles_active__uFDHb, .styles_filterBar__sJ_Q1 > * > :hover {
        background: #333333;
    }

    .iOZdmk {
        background-color: #222222;
        border-bottom: 1px solid #333333;
    }

    .ckPjaN {
        background-color: #222222;
    }

    .lmZvWT {
        background-color: #222222;
    }

    .ikJdkA {
        background-color: #282828;
    }

    .eaELeS {
        background-color: #282828;
    }

    .khgQFb svg [data-stroke] {
        stroke: #ddd;
    }

    .ekZWqY {
        color: #bbb;
    }

    .kgySZL svg {
        fill: #ddd;
    }

    .fMbBoN svg {
        fill: #ddd;
    }

    .MBFWm {
        color: #ddd;
        border: 1px solid #333333;
    }

    .erptKe {
        color: #ddd;
    }

    [data-tag="locked-rich-text-post"] {
        background-color: #333;
    }

    [data-tag="post-teaser-body"], button[tabindex="0"], button[aria-disabled="false"] {
        color: #ddd;
    }

    svg {
        fill: #ddd;
    }

    .cxUGeR svg {
        fill: #7aa626;
    }

    .blEUTx svg {
        fill: #7aa626;
    }

    .gHFqro svg {
        fill: #7aa626;
    }

    .jopJXr {
        background-color: #222 
    }

    .bWlCVs {
        background-color: #222 
    }

    .dgbUfA {
        background-color: #222222;
    }

    .kEPHhX {
        background-color: #222222;
    }

    .fdcuhQ:hover {
        background-color: #333333;
    }

    .fcnnwx:hover, .fcnnwx:focus {
        background-color: #333333;
    }

/* Text fade gradients */

    div[color="light"] {
        background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #222 100%);
    }

    div[data-tag="post-teaser-title"] > div:first-child  {
        background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #222 100%);
    }

/* Checkout page */

    .mLJbE {
        background: #282828;
        border-color: #333333;
    }

    .dGGzHa {
        background: #282828;
        border: 1px solid #333333;
        color: #bbb;
    }

    .dGGzHa:focus {
        background: #282828;
    }

    .hPMsyp input, .hPMsyp input:hover:not(:focus) {
        background-color: #282828;
    }

    .iYPAeu {
        background: #282828;
        border: 1px solid #333333;
    }

    .iYPAeu:focus {
        background: #282828;
    }

    .cdwvKY {
        background-color: #282828;
    }

    .bPRXuX .Popover-body {
        border: 1px solid #333333;
    }

    .xTktR {
        border: 1px solid #333333;
    }

    .ckbdoT {
        border-bottom: 1px solid #333333;
    }

    .iFqFWa {
        border-top: 1px solid #333333;
    }

    /* Text elements */

    [color="dark"] {
        color: #ddd;
    }

    .kYsiYm {
        color: #7aa626;
    }

    .iveQya {
        color: #7aa626;
    }

    .iKeUCh {
        color: #7aa626;
    }

    .iFfkYY {
        color: #7aa626;
    }

    .jkboev {
        color: #7aa626;
    }

    .dcWtkz {
        color: #7aa626;
    }

    .gSgbbR {
        color: #7aa626;
    }

    .hbOaOe {
        color: #7aa626;
    }

    .fWZuQE {
        color: #7aa626;
    }

    .kxnhIa {
        color: #7aa626;
    }

    .gomisx {
        color: #7aa626;
    }

    .hxNYa {
        color: #7aa626;
    }

    .bEPSht {
        color: #7aa626;
    }

    .jaZJBt {
        color: #7aa626;
    }

    /* All below added by Dawn */

    div.sc-gsDKAQ.kjZWJz {
        color: #ffffff;
    }
    h3.sc-egiyK.kCmkA {
        color: #ffffff;
    }
    h2.sc-egiyK.eUdgVX {
        color: #ffffff;
    }
    div.sc-egiyK.eUdgVX {
        color: #ffffff;
    }
    h3.sc-egiyK.eUdgVX {
        color: #ffffff;
    }
    div.sc-egiyK.jkklPe {
        color: #ffffff;
    }

    /* Recent Creator Names */

     h2.sc-egiyK.kCmkA {
        color: #ffffff;
    }
    span p strong {
        color: #ffffff;
    }
    strong span mark {
        color: #ffffff;
    }
    strong span span {
        background-color: #222222 !important;
    }

    /* About Creator page text */

    p span mark {
        color: #ffffff !important;
        background-color: #222222 !important;
    }
    div blockquote strong {
        color: #ffffff !important;
    }
    div div ul {
        color: #ffffff;
    }
    div.sc-lvssun-0.jUaopC {
         background-color: #222222;
    }
    div.sc-furwcr.hrVzTI {
         color: #ffffff;
    }
    h3.sc-gWXbKe.sJVuR {
         color: #ffffff;
    }

    /* Unselected tiers background*/

    div.sc-fydGpi.hEeSVn {
         background-color: #222222;
    }
    div.sc-hUpaCq.lnVWMJ {
         color: #ffffff;
    }
    div.sc-hUpaCq.hnEKXV {
         color: #ffffff;
    }

    /* Fix recent tab's background */

    section.sc-1os6b5e-0.ejapI {
         background-color: #282828;
    }
    div.sc-cjrPHo.hsTRLP {
         background-color: #222222;
    }
    a.sc-pVTFL.coHwNo {
         background-color: #434343;
         color: #ffffff;
    }

    ...

Reviews

No reviews yet.