A simple dark theme for Patreon. THIS IS EARLY WORK IN PROGRESS.
Patreon Dark Theme by darkissou

Details
Authordarkissou
LicenseNo License
Categorypatreon.com
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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;
}
...