Skip to content

Patreon Dark Theme by darkissou

Screenshot of Patreon Dark Theme

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.