An opinionated color scheme for X's "Lights out" theme.

x.user.css

/* ==UserStyle==
@name           X Tinted
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    An opinionated color scheme for X's "Lights out" theme.
@author			bomberfish
@var color accent "Tint Color" #ef9ce4
==/UserStyle== */

@-moz-document domain("x.com") {
    :root {
		--accent2: color-mix(in srgb, white 30%, var(--accent));
        --bg: color-mix(in srgb, black 95%, var(--accent));
        --bg2: color-mix(in srgb, color-mix(in srgb, black 90%, var(--accent)) 95%, white);
        --bg3: color-mix(in srgb, color-mix(in srgb, black 85%, var(--accent)) 90%, white);
        --fg: color-mix(in srgb, white 70%, var(--accent));
        --fg2: color-mix(in srgb, color-mix(in srgb, var(--fg) 55%, var(--accent)) 60%, transparent);
        --fg3: color-mix(in srgb, color-mix(in srgb, var(--fg) 35%, var(--accent)) 30%, transparent);
        accent-color: var(--accent);
    }
    
    *:focus-visible {
        outline-color: var(--accent);
    }
    
    body[style*="background-color: rgb(0, 0, 0)"] {
        color: var(--fg)!important;
        background: var(--bg)!important;
        
        .r-1cvl2hr,
        [style*="color: rgb(29, 155, 240);"] {
            color: var(--accent)!important;
        }

        .r-l5o3uw,
        [style*="background-color: rgb(29, 155, 240);"] {
            background-color: var(--accent)!important;
        }
		
		a[href="/compose/post"],
        [style*="background-color: rgb(239, 243, 244)"] {
            background-color: var(--accent)!important;
            color: var(--bg)!important;
			
			&:hover {
				background-color: var(--accent2)!important;
			}
        }

        [href="/i/premium_sign_up"]:not([style*="background-color: rgba(0, 0, 0, 0)"], header a) span {
           color: var(--bg)!important;
        }

        [style*="border-color: rgb(83, 100, 113)"][style*="background-color: rgba(0, 0, 0, 0);"] {
            border-color: color-mix(in srgb, color-mix(in srgb, var(--fg) 40%, var(--accent)) 50%, transparent)!important;
            span {
                color: var(--accent)!important;
            }
        }
        
        [style*="border-color: rgb(29, 155, 240)"] {
            border-color: var(--accent)!important;
        }
		
		[fill="#1D9BF0"] {
			fill: var(--accent)!important;
		}
		
		[style*="stroke: rgb(29, 155, 240)"],
		[stroke="#1D9BF0"] {
			stroke: var(--accent)!important;
		}
		
		[style="stroke: rgb(29, 155, 240); opacity: 0.2;"],
		[stroke="#2F3336"] {
			stroke: var(--bg2)!important;
			opacity: 1!important;
		}

        [style*="color: rgb(255, 255, 255)"],
        [style*="color: rgb(231, 233, 234)"] {
            color: var(--fg)!important;
        }
		
		.r-kemksi,
        .r-7qzcwe {
            background: var(--bg)!important;
        }
		
        ::placeholder,
        .draftjs-styles_0 .public-DraftEditorPlaceholder-root,
        [style*="color: rgb(113, 118, 123)"] {
            color: var(--fg2)!important;
        }

        .r-1q89gc9 {
            color: var(--fg3);
        }

        .r-yyyyoo {
            color: var(--accent);
        }


        .r-vhj8yc,
        .r-lrvibr:has(input[type="checkbox"]) .r-yyyyoo {
            color: var(--bg)!important;
        }

        .r-1vtznih {
            background: color-mix(in srgb, var(--accent) 80%, black);
        }

        .r-vhj8yc {
            border-color: var(--accent);
        }

        .r-1x2e62v,
        .r-1x2e62v [style*="color: rgb(255, 255, 255)"],
        [role="status"],
        [role="status"] .r-yyyyoo,
        [data-testid="pillLabel"],
        .r-vhj8yc .r-yyyyoo {
            color: var(--bg)!important;
        }

        .r-qo02w8 {
            box-shadow: color-mix(in srgb, var(--fg) 15%, transparent) 0px 0px 15px, color-mix(in srgb, var(--fg) 10%, transparent) 0px 0px 3px 1px;
        }

        .r-1khm80z {
            border-right-color: var(--accent);
        }

		.r-z32n2g,
        .r-g2wdr4 {
            background: var(--bg2);
        }
        
        .r-1pr99xn {
            background: color-mix(in srgb, var(--bg3) 90%, transparent);
        }

        .r-5zmot {
            background: color-mix(in srgb, var(--bg) 65%, transparent);
        }

        .r-j7xza8,
        .r-1roi411,
        .r-1igl3o0,
        .r-1kqtdi0 {
            border-color: color-mix(in srgb, color-mix(in srgb, var(--fg) 80%, var(--accent)) 30%, transparent)!important;
        }

        .r-gu4em3 {
            background-color: color-mix(in srgb, color-mix(in srgb, var(--fg) 80%, var(--accent)) 30%, transparent)!important;
        }

        .r-jc7xae {
            background: color-mix(in srgb, var(--fg) 80%, black);
        }

        .r-6igxml {
            background-image: linear-gradient( color-mix(in srgb, var(--accent) 40%, transparent) 0%, var(--bg) 100%);
        }
		
		[data-testid="DmScrollerContainer"] { 
			.r-gu4em3 {
				background-color: var(--bg2)!important;
			}
			
			.r-vhj8yc * {
				color: var(--bg)!important;
			}
		}	
    }
}