Catppuccin Twitter CSS for browsers that don't have Stylus or another similar extension

catppuccin-twitter

/* Twitter Catppuccin Theme for Safari via 'control panel for twitter' or other extensions */
/* Catppuccin Mocha Color Palette */
:root {
	--ctp-rosewater: #f5e0dc;
	--ctp-flamingo: #f2cdcd;
	--ctp-pink: #f5c2e7;
	--ctp-mauve: #cba6f7;
	--ctp-red: #f38ba8;
	--ctp-maroon: #eba0ac;
	--ctp-peach: #fab387;
	--ctp-yellow: #f9e2af;
	--ctp-green: #a6e3a1;
	--ctp-teal: #94e2d5;
	--ctp-sky: #89dceb;
	--ctp-sapphire: #74c7ec;
	--ctp-blue: #89b4fa;
	--ctp-lavender: #b4befe;
	--ctp-text: #cdd6f4;
	--ctp-subtext1: #bac2de;
	--ctp-subtext0: #a6adc8;
	--ctp-overlay2: #9399b2;
	--ctp-overlay1: #7f849c;
	--ctp-overlay0: #6c7086;
	--ctp-surface2: #585b70;
	--ctp-surface1: #45475a;
	--ctp-surface0: #313244;
	--ctp-base: #1e1e2e;
	--ctp-mantle: #181825;
	--ctp-crust: #11111b;

	/* Change this to your preferred accent color */
	--ctp-accent: var(--ctp-teal);
}

/* Main background */
body,
.PageContainer,
#placeholder {
	background-color: var(--ctp-base) !important;
	color: var(--ctp-text) !important;
}

/* Primary column background */
[data-testid='primaryColumn'] {
	background-color: var(--ctp-base) !important;
}

/* Sidebar background */
.r-g2wdr4 {
	background-color: var(--ctp-mantle) !important;
}

/* Text colors */
.r-1nao33i {
	color: var(--ctp-text) !important;
}

/* White text on colored backgrounds */
.r-jwli3a {
	color: var(--ctp-crust) !important;
}

/* Borders */
.r-1kqtdi0,
.r-1roi411 {
	border-color: var(--ctp-surface0) !important;
}

.r-1igl3o0 {
	border-bottom-color: var(--ctp-surface0) !important;
}

.r-2sztyj {
	border-top-color: var(--ctp-surface0) !important;
}

.r-1aihyag {
	border-right-color: var(--ctp-surface0) !important;
}

/* Search bar and input backgrounds */
.r-gu4em3,
.r-1bnu78o,
.r-z32n2g {
	background-color: var(--ctp-surface0) !important;
}

/* Hover effects */
.r-1hdo0pc,
.r-pjtv4k {
	background-color: rgba(205, 214, 244, 0.1) !important;
}

/* Active/pressed effects */
.r-11gmi9o {
	background-color: rgba(205, 214, 244, 0.2) !important;
}

/* Accent color elements */
.r-l5o3uw {
	background-color: var(--ctp-accent) !important;
}

.r-l5o3uw .r-jwli3a {
	color: var(--ctp-crust) !important;
}

/* Accent hover */
.r-1vtznih {
	background-color: var(--ctp-accent) !important;
	filter: brightness(0.9);
}

/* Accent light background */
.r-1peqgm7 {
	background-color: rgba(203, 166, 247, 0.1) !important;
}

/* Tooltips */
.r-1pr99xn {
	background-color: var(--ctp-surface1) !important;
}

/* Like button and hearts */
[fill='rgb(249,22,127)'],
[fill='rgb(222,45,108)'] {
	fill: var(--ctp-red) !important;
}

/* Like hover effect */
.r-1krxqcr {
	background-color: rgba(243, 139, 168, 0.1) !important;
}

/* Retweet colors */
[style*='color: rgb(0, 186, 124)'] {
	color: var(--ctp-green) !important;
}

/* Retweet hover */
.r-15azkrj {
	background-color: rgba(166, 227, 161, 0.1) !important;
}

/* Notifications */
.r-vkub15,
.r-9l7dzd {
	color: var(--ctp-red) !important;
}

.r-1cvl2hr {
	color: var(--ctp-accent) !important;
}

.r-o6sn0f {
	color: var(--ctp-green) !important;
}

/* Text input placeholders */
input::placeholder,
textarea::placeholder {
	color: var(--ctp-subtext0) !important;
}

/* Selection */
::selection {
	background-color: rgba(203, 166, 247, 0.3) !important;
}

/* Hard-coded color overrides */
[style*='color: rgb(255, 255, 255)'] {
	color: var(--ctp-text) !important;
}

[style*='color: rgb(239, 243, 244)'] {
	color: var(--ctp-text) !important;
}

[style*='color: rgb(231, 233, 234)'] {
	color: var(--ctp-text) !important;
}

[style*='color: rgb(113, 118, 123)'],
[style*='color: rgb(182, 185, 188)'] {
	color: var(--ctp-overlay1) !important;
}

[style*='color: rgb(29, 155, 240)'] {
	color: var(--ctp-accent) !important;
}

[style*='color: rgb(249, 24, 128)'] {
	color: var(--ctp-red) !important;
}

[style*='background-color: rgb(29, 155, 240)'] {
	background-color: var(--ctp-accent) !important;
}

[style*='background-color: rgb(0, 0, 0)'] {
	background-color: var(--ctp-base) !important;
}

[style*='background-color: rgb(239, 243, 244)'] {
	background-color: var(--ctp-text) !important;
}

/* Tweet composition area */
.draftjs-styles_0 .public-DraftEditorPlaceholder-root {
	color: var(--ctp-overlay0) !important;
}

/* Scrollbar styling */
[style*='scrollbar-color'] {
	scrollbar-color: var(--ctp-accent) transparent !important;
	scrollbar-width: thin;
}

/* Top navigation background */
.r-5zmot {
	background-color: rgba(30, 30, 46, 0.75) !important;
}

/* Arrow on account switcher */
.r-cqee49 {
	color: var(--ctp-base) !important;
}

/* Shadows */
.r-qo02w8,
.r-15ce4ve {
	box-shadow: rgba(205, 214, 244, 0.2) 0 0 15px, rgba(205, 214, 244, 0.15) 0 0 3px 1px !important;
}

.r-1tbvlxk {
	filter: drop-shadow(rgba(205, 214, 244, 0.25) 1px -1px 1px) !important;
}

.r-1uusn97 {
	box-shadow: rgba(205, 214, 244, 0.2) 0 0 5px, rgba(205, 214, 244, 0.15) 0 1px 4px 1px !important;
}

/* More surface backgrounds */
.r-1cuuowz {
	background-color: rgba(205, 214, 244, 0.03) !important;
}

/* Additional hover states */
.r-jc7xae {
	background-color: rgba(205, 214, 244, 0.96) !important;
}

.r-6wtuen {
	background-color: rgba(205, 214, 244, 0.92) !important;
}

/* Accent hover and active states */
.r-yuvema {
	background-color: var(--ctp-accent) !important;
	filter: brightness(0.85);
}

.r-r18ze4 {
	background-color: rgba(203, 166, 247, 0.2) !important;
}

/* New notifications */
.r-1eltapf {
	background-color: rgba(116, 199, 236, 0.1) !important;
}

/* Polls */
.r-eok2q2 {
	background-color: rgba(203, 166, 247, 0.6) !important;
}

.r-9cip40 {
	box-shadow: var(--ctp-accent) 0 0 0 1px !important;
}

/* Spaces */
.r-1blqq69 {
	border-color: var(--ctp-mauve) !important;
}

/* DM reactions */
.r-qazpri {
	color: var(--ctp-overlay1) !important;
}

/* Live indicators */
.r-4nw3r4,
.r-1dgebii {
	background-color: var(--ctp-red) !important;
}

.r-b5kvu3 {
	border-color: var(--ctp-red) !important;
}

/* Red hover/active states */
.r-qqmkd0 {
	background-color: rgba(243, 139, 168, 0.1) !important;
}

.r-12d83nn {
	background-color: var(--ctp-red) !important;
	filter: brightness(0.9);
}

.r-oybae9 {
	background-color: var(--ctp-red) !important;
	filter: brightness(0.85);
}

/* Green active states */
.r-1x669os {
	background-color: rgba(166, 227, 161, 0.2) !important;
}

/* Circles and indicators */
.r-s224ru {
	background-color: var(--ctp-green) !important;
}

.r-h7o7i8 {
	background-color: rgba(166, 227, 161, 0.1) !important;
}

/* Content warning buttons */
.r-n94g0g {
	background-color: rgba(205, 214, 244, 0.3) !important;
}

.r-z9i421 {
	background-color: rgba(205, 214, 244, 0.27) !important;
}

.r-19130f6 {
	background-color: var(--ctp-crust) !important;
}

.r-l8tqsx {
	background-color: rgba(205, 214, 244, 0.1) !important;
}

/* Lock svg and other icons */
.r-3gvs5h {
	background-color: var(--ctp-overlay1) !important;
}

.r-1fkb3t2 {
	background-color: var(--ctp-surface1) !important;
}

/* Search magnifying glass */
.r-1bwzh9t {
	color: var(--ctp-overlay1) !important;
}

/* More comprehensive color overrides */
[style*='color: rgb(120, 86, 255)'] {
	color: var(--ctp-mauve) !important;
}

[style*='color: rgb(255, 122, 0)'] {
	color: var(--ctp-peach) !important;
}

[style*='color: rgb(255, 212, 0)'] {
	color: var(--ctp-yellow) !important;
}

[style*='color: rgb(250, 68, 152)'] {
	color: var(--ctp-pink) !important;
}

/* Background color overrides */
[style*='background-color: rgb(142, 205, 248)'] {
	background-color: var(--ctp-accent) !important;
	filter: brightness(1.1);
}

[style*='background-color: rgb(2, 17, 61)'] {
	background-color: rgba(203, 166, 247, 0.15) !important;
}

[style*='background-color: rgba(255, 255, 255, 0.25)'] {
	background-color: rgba(205, 214, 244, 0.25) !important;
}

[style*='background-color: rgb(147, 147, 147)'] {
	background-color: var(--ctp-overlay0) !important;
}

[style*='background-color: rgb(244, 33, 46)'] {
	background-color: var(--ctp-red) !important;
}

[style*='background-color: rgba(15, 20, 25, 0.75)'] {
	background-color: rgba(17, 17, 27, 0.75) !important;
}

/* Stroke color overrides */
[stroke='#2F3336'],
[stroke='#2f3336'] {
	stroke: var(--ctp-surface2) !important;
}

[stroke='#1D9BF0'],
[stroke='#1d9bf0'] {
	stroke: var(--ctp-accent) !important;
}

[stroke='#FFD400'],
[stroke='#ffd400'] {
	stroke: var(--ctp-yellow) !important;
}

/* Fill color overrides */
[fill='#829AAB'],
[fill='#829aab'] {
	fill: var(--ctp-overlay2) !important;
}

[fill='#1DA1F2'],
[fill='#1da1f2'] {
	fill: var(--ctp-sky) !important;
}

[fill='#78C6EE'],
[fill='#78c6ee'] {
	fill: var(--ctp-sky) !important;
}

[fill='#d18800'] {
	fill: var(--ctp-yellow) !important;
}

/* Verification badges */
[stop-color='#f4e72a'],
[stop-color='#cd8105'],
[stop-color='#cb7b00'],
[stop-color='#f4ec26'],
[stop-color='#f9e87f'],
[stop-color='#e2b719'] {
	stop-color: var(--ctp-yellow) !important;
}

/* Border overrides */
[style*='border-color: rgb(83, 100, 113)'] {
	border-color: var(--ctp-surface1) !important;
}

[style*='border-color: rgb(51, 54, 57)'] {
	border-color: var(--ctp-surface0) !important;
}

[style*='border-color: rgb(103, 7, 15)'] {
	border-color: rgba(243, 139, 168, 0.5) !important;
}

[style*='border-color: rgb(29, 155, 240)'] {
	border-color: var(--ctp-accent) !important;
}

/* White border */
.r-11mg6pl {
	border-color: var(--ctp-crust) !important;
}

/* Mask overlay */
.r-11z020y {
	background-color: rgba(203, 166, 247, 0.12) !important;
}

/* More specific DM styling */
.r-eff69c {
	background-color: var(--ctp-accent) !important;
	filter: brightness(0.95);
}

.r-eff69c [style*='color: rgb(255, 255, 255)'] {
	color: var(--ctp-crust) !important;
}

/* Active DM border */
.r-1pbtemp {
	border-right-color: var(--ctp-accent) !important;
}

/* DM left border */
.r-1wyyjkm {
	border-left-color: var(--ctp-subtext0) !important;
}

/* Gradients */
[style='background-image: linear-gradient(61.63deg, rgb(45, 66, 255) -15.05%, rgb(156, 99, 250) 104.96%);'] {
	background-image: linear-gradient(61.63deg, var(--ctp-blue) -15.05%, var(--ctp-mauve) 104.96%) !important;
}

/* Who can reply background */
.r-rgqbpe {
	background-color: rgba(137, 180, 250, 0.1) !important;
}

/* Bird icon */
header h1 a svg path,
header h1 a div svg path {
	fill: var(--ctp-accent) !important;
}