Patreon Dark Theme by darkissou

Details
Authordarkissou
LicenseNo License
Created
Updated
Categorypatreon.com
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
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
/* ==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;
}
/* Bottom page */
.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;
}
}
@-moz-document url-prefix("https://www.patreon.com/brand") {
/* Brand page */
/* Background */
.cKtzVI {
background-color: #222222;
}
/* Navbar */
.kvBFzp {
background-color: #222222;
border-bottom: 1px solid #333333;
}
.izPmsI {
color: #ddd;
}
.eKzCnO {
color: #bbb;
}
}