Skip to content

Patreon Dark Theme by darkissou

Screenshot of Patreon Dark Theme
Write a review Install Get Stylus

Details

Authordarkissou

LicenseNo License

Categorypatreon.com

Created

Updated

Size11 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.

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.2

  • More improvements to 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      20230227.19.38
@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.2
==/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;
        
    }

    html {
        background-color: #222222    
    }

    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;
    }

    .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;
    }

/* 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;
    }
}

@-moz-document url-prefix("https://www.support.patreon.com") {
/* Support page*/
}

@-moz-document url("https://www.patreon.com/login"), url-prefix("https://www.patreon.com/signup") {
/* Login and register pages */

    body {
        background-color: var(--global-bg-pageAlt-default);
    }
}

@-moz-document url-prefix("https://www.patreon.com/forgot-password") {
/* Forgot password */

    html {
        background-color: #282828;
    }

    body {
        background-color: #282828;
    }

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

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

    .jwhLuo svg [data-color="2"] {
        fill: #aaa;
    }

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

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

    .gEGTJq {
        color: #ddd;
    }

    .dkWQfG {
        color: #ddd;
    }

    .kHGXbA {
        color: #ddd;
    }

    .cXaEtx {
        color: #ddd
    }
}

@-moz-document url("https://www.patreon.com/policy"), regexp("https:\\/\\/www\\.patreon\\.com(\\/.+)?\\/policy\\/.+") {
/* Policy page */

/* Background */

    .bhiZuj {
        background-color: #222222    
    }

    .NGmzN {
        background-color: #222222    
    }

    .gGneVj {
        background-color: #282828;
    }

    .gWKjKG {
        background-color: #222222;
    }

/* Text elements*/

    .hxMIRR {
        color: #ddd;
    }

    .RichText_root__zZvfg {
        color: #bbb;
    }

    .eZEEwt {
        color: #ddd;
    }

    .fbpXPn {
        color: #ddd;
    }

    .fbpXPn:visited {
        color: #ddd;
    }

    .hVkakJ {
        color: #ddd;
    }

    .bKNhb {
        color: #bbb;
    }

    .fNIEwI {
        color: #888888;
    }

    .fLPJWB {
        color: #ddd;
    }

    .jUXyFB {
        color: #ddd;
    }

    .WMMtL {
        color: #bbb;
    }

    .fLPJWB {
        color: #ddd;
    }

    .fWaPOV {
        color: #ddd;
    }

    .lmXQsI {
        color: #ddd;
    }

    .bEWceB {
        color: #bbb;
    }

    .fNIEwI:visited {
        color: #bbb;
    }

/* Misc */

    /* Search bar */

    .dAgRZl {
        background-color: #282828;
    }

    .kqaOwc {
        background-color: #282828;
    }
        
    /* Fix z-index of navbar */

    .GlobalHeader_root__YreTq {
        z-index: 10000 !important;
    }
}

@-moz-document url-prefix("https://www.patreon.com/portal") {
/* Portal page */

    /* Background */

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

    .gPPdYU {
        background-color: #222222;
    }

    /* Text elements*/

    .eMuVUh.eMuVUh h3 {
        color: #ddd;
    }

    .cHbhZL {
        color: #B1D0FF;
    }

    .cHbhZL:hover {
        color: #B4CC5C;
    }
...

Reviews

No reviews yet.