/* ==UserStyle==
@name Reddit Catppuccin
@namespace github.com/catppuccin/userstyles/styles/reddit
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/reddit
@version 2024.12.31
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/reddit/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Areddit
@description Soothing pastel theme for Reddit
@author Catppuccin
@license MIT
@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */
@-moz-document domain("reddit.com") {
:root:not(.theme-dark) .theme-rpl,
:root:not(.theme-dark).theme-rpl,
:root:not(.theme-dark) .theme-beta,
:root:not(.theme-dark).theme-beta,
.theme-light {
#catppuccin(@lightFlavor);
}
:root:not(.theme-light) .theme-rpl,
:root:not(.theme-light).theme-rpl,
:root:not(.theme-light) .theme-beta,
:root:not(.theme-light).theme-beta,
.theme-dark {
#catppuccin(@darkFlavor);
}
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
/* BETA */
--color-pizzaRed: @red !important;
--color-global-brand-orangered: @peach !important;
--color-global-focus: @surface1 !important;
--color-interactive-content-disabled: @subtext0 !important;
--color-interactive-background-disabled: fade(@surface2, 70%) !important;
--color-interactive-pressed: @surface2 !important;
--color-neutral-content: @text !important;
--color-neutral-content-disabled: @subtext0 !important;
--color-neutral-content-weak: @subtext0 !important;
--color-neutral-content-strong: @text !important;
--color-global-white: @crust !important;
--color-neutral-background: @base !important;
--color-neutral-background-selected: @surface0 !important;
--color-neutral-background-weak: @mantle !important;
--color-neutral-background-medium: @base !important;
--color-neutral-background-strong: @crust !important;
--color-neutral-background-hover: @surface0 !important;
--color-neutral-border: @surface0 !important;
--color-neutral-border-medium: @surface0 !important;
--color-neutral-border-weak: @surface0 !important;
--color-neutral-border-strong: @surface2 !important;
--color-primary: @accent !important;
--color-primary-hover: lighten(@accent, 10%) !important;
--color-primary-visited: @lavender !important;
--color-primary-background: @accent !important;
--color-primary-background-hover: darken(@accent, 5%) !important;
--color-primary-background-selected: darken(@accent, 5%) !important;
--color-primary-onBackground: @base !important;
--color-primary-onBackground-selected: @crust !important;
--color-secondary: @subtext0 !important;
--color-secondary-hover: @subtext1 !important;
--color-secondary-weak: @subtext0 !important;
--color-secondary-onBackground: @text !important;
--color-secondary-background: @mantle !important;
--color-secondary-background-hover: @surface1 !important;
--color-secondary-background-selected: @surface1 !important;
--color-secondary-plain: @subtext0 !important;
--color-secondary-plain-hover: @subtext1 !important;
--color-danger-background: @red !important;
--color-danger-background-disabled: fade(@red, 20%) !important;
--color-danger-background-hover: fade(@red, 98%) !important;
--color-danger-onBackground: @text !important;
--color-danger-content: @red !important;
--color-danger-content-default: @crust;
--color-danger-content-hover: darken(@red, 2%) !important;
--color-success-content: @green !important;
--color-success-hover: darken(@green, 2%) !important;
--color-success-onBackground: @crust;
--color-success-background: @green !important;
--color-success-background-hover: darken(@green, 2%) !important;
--color-warning-content: @yellow !important;
--color-warning-content-hover: darken(@yellow, 2%) !important;
--color-warning-onBackground: @base !important;
--color-warning-background: @yellow !important;
--color-warning-background-hover: darken(@yellow, 2%) !important;
--color-upvote-content: @accent !important;
--color-upvote-disabled: @subtext0 !important;
--color-upvote-onBackground: @text !important;
--color-upvote-background: @base !important;
--color-upvote-background-hover: darken(@accent, 5%) !important;
--color-upvote-background-disabled: @base !important;
--color-downvote-content: @text !important;
--color-downvote-content-weak: @text !important;
--color-downvote-disabled: @subtext0 !important;
--color-downvote-onBackground: @text !important;
--color-downvote-background: @base !important;
--color-downvote-background-hover: darken(@blue, 5%) !important;
--color-downvote-background-disabled: @mantle !important;
--color-tone-1: @text !important;
--color-tone-2: @subtext0 !important;
--color-tone-3: @overlay2 !important;
--color-tone-4: @surface0 !important;
--color-tone-5: @surface1 !important;
--color-tone-6: @surface2 !important;
--color-tone-7: @base !important;
--color-avatar-gradient: @accent !important;
--color-transparent-background-hover: fade(@surface0, 30%) !important;
--color-opacity-50: fade(@base, 50%) !important;
--color-online: @accent !important;
--color-favorite: @accent !important;
--color-brand-background: @accent !important;
--color-brand-background-hover: darken(@accent, 5%) !important;
--color-brand-onBackground: @crust !important;
--color-global-orangered: @accent !important;
--color-action-upvote: @accent !important;
--color-action-downvote: @blue;
--color-banner-error-text: @base !important;
--shreddit-color-wordmark: @accent;
#reddit-logo {
circle[fill="#FF4500"] {
fill: @accent !important;
}
path[fill="#FFF"] {
fill: @crust !important;
}
}
/* normal stuff */
&,
div[class^="subredditvars"] {
--color-online: @green !important;
--newCommunityTheme-actionIcon: @subtext0 !important;
--newCommunityTheme-actionIconAlpha20: fade(@crust, 80%) !important;
--newCommunityTheme-actionIconAlpha50: fade(@crust, 80%) !important;
--newCommunityTheme-actionIconShaded80: @subtext0 !important;
--newCommunityTheme-actionIconTinted80: @subtext1 !important;
--newCommunityTheme-active: @accent !important;
--newCommunityTheme-activeAlpha10: fade(@crust, 80%) !important;
--newCommunityTheme-activeAlpha20: fade(@crust, 80%) !important;
--newCommunityTheme-activeAlpha50: fade(@crust, 80%) !important;
--newCommunityTheme-activeLight60: @accent !important;
--newCommunityTheme-activeShaded80: @accent !important;
--newCommunityTheme-activeShaded90: @accent !important;
--newCommunityTheme-activeTinted05: @text !important;
--newCommunityTheme-banner-backgroundColor: @accent !important;
--newCommunityTheme-banner-iconColor: @accent !important;
--newCommunityTheme-body: @mantle !important;
--newCommunityTheme-bodyAlpha50: @surface0 !important;
--newCommunityTheme-bodyAlpha70: @surface1 !important;
--newCommunityTheme-bodyAlpha80: @surface2 !important;
--newCommunityTheme-bodyFade: @subtext0 !important;
--newCommunityTheme-bodyShaded80: @mantle !important;
--newCommunityTheme-bodyText: @text !important;
--newCommunityTheme-bodyTextAlpha03: @mantle !important;
--newCommunityTheme-bodyTextAlpha20: @surface1 !important;
--newCommunityTheme-bodyTextShaded20: @surface0 !important;
--newCommunityTheme-bodyTextTinted20: @subtext0 !important;
--newCommunityTheme-bodyTinted50: @overlay1 !important;
--newCommunityTheme-bodyTinted80: @overlay0 !important;
--newCommunityTheme-button: @text !important;
--newCommunityTheme-buttonAlpha05: fade(@crust, 80%) !important;
--newCommunityTheme-buttonAlpha10: fade(@crust, 80%) !important;
--newCommunityTheme-buttonAlpha20: fade(@crust, 80%) !important;
--newCommunityTheme-buttonAlpha40: @subtext0 !important;
--newCommunityTheme-buttonAlpha50: @subtext1 !important;
--newCommunityTheme-buttonAlpha80: @subtext1 !important;
--newCommunityTheme-buttonShaded80: @overlay0 !important;
--newCommunityTheme-buttonTinted20: @accent !important;
--newCommunityTheme-buttonTinted50: @accent !important;
--newCommunityTheme-buttonTinted80: @accent !important;
--newCommunityTheme-canvas: @crust !important;
--newCommunityTheme-checkbox: @text !important;
--newCommunityTheme-errorText: @red !important;
--newCommunityTheme-field: @surface0 !important;
--newCommunityTheme-fieldFade: fade(@surface1, 70%) !important;
--newCommunityTheme-flair: @accent !important;
--newCommunityTheme-highlight: @base !important;
--newCommunityTheme-inactive: @subtext0 !important;
--newCommunityTheme-lightText: @text !important;
--newCommunityTheme-lightTextAlpha75: @subtext1 !important;
--newCommunityTheme-line: fade(@surface1, 70%) !important;
--newCommunityTheme-lineShaded80: fade(@surface1, 70%) !important;
--newCommunityTheme-lineShaded90: fade(@surface1, 70%) !important;
--newCommunityTheme-lineShadedNinety: fade(@surface1, 70%) !important;
--newCommunityTheme-linkText: @accent !important;
--newCommunityTheme-linkTextAlpha80: @accent !important;
--newCommunityTheme-linkTextShaded80: @accent !important;
--newCommunityTheme-linkTextTinted80: @accent !important;
--newCommunityTheme-linkTextWithBody: @accent !important;
--newCommunityTheme-menu: @mantle !important;
--newCommunityTheme-menuActiveText: @text !important;
--newCommunityTheme-menuButtonBackground-active: @base !important;
--newCommunityTheme-menuButtonBackground-focus: @base !important;
--newCommunityTheme-menuButtonBackground-hover: @base !important;
--newCommunityTheme-menuInactiveText: @text !important;
--newCommunityTheme-metaText: @subtext0 !important;
--newCommunityTheme-metaTextAlpha50: @subtext0 !important;
--newCommunityTheme-metaTextShaded80: @subtext0 !important;
--newCommunityTheme-monospaceColor: @accent !important;
--newCommunityTheme-navBar-activeLink: @text !important;
--newCommunityTheme-navBar-activeSubmenuCaret: @text !important;
--newCommunityTheme-navBar-activeSubmenuLink: @text !important;
--newCommunityTheme-navBar-backgroundColor: @mantle !important;
--newCommunityTheme-navBar-hoverLink: @text !important;
--newCommunityTheme-navBar-inactiveLink: @text !important;
--newCommunityTheme-navBar-inactiveSubmenuCaret: @text !important;
--newCommunityTheme-navBar-inactiveSubmenuLink: @text !important;
--newCommunityTheme-navBar-submenuBackgroundColor: @mantle !important;
--newCommunityTheme-navIcon: @text !important;
/* upvote/downvote focus */
--newCommunityTheme-navIconFaded10: fade(@crust, 80%) !important;
--newCommunityTheme-nsfw: @red !important;
--newCommunityTheme-nsfwBlocking-bgcolor: @crust !important;
--newCommunityTheme-nsfwBlocking-color: @text !important;
--newCommunityTheme-nsfwBlocking-contentTitleBgColor: @base !important;
--newCommunityTheme-nsfwBlocking-mainCtaBgColor: @mantle !important;
--newCommunityTheme-pageHeader: @surface2 !important;
--newCommunityTheme-placeholder: @surface0 !important;
--newCommunityTheme-post: @mantle !important;
--newCommunityTheme-postError: @red !important;
--newCommunityTheme-postFlairText: @crust !important;
--newCommunityTheme-postIcon: @accent !important;
--newCommunityTheme-postLine: fade(@surface1, 70%) !important;
--newCommunityTheme-postLineShaded80: fade(@surface1, 70%) !important;
--newCommunityTheme-postLineShaded90: fade(@surface1, 70%) !important;
--newCommunityTheme-postTinted20: @base !important;
--newCommunityTheme-postTransparent20: @base !important;
--newCommunityTheme-primaryButtonShadedEighty: @overlay1 !important;
--newCommunityTheme-primaryButtonTintedEighty: @overlay1 !important;
--newCommunityTheme-primaryButtonTintedFifty: @overlay0 !important;
--newCommunityTheme-primaryButtonTintedSixty: @overlay0 !important;
--newCommunityTheme-quarantine: @yellow !important;
--newCommunityTheme-report: @surface1 !important;
--newCommunityTheme-search-syntaxHighlightBackgroundColor: @accent
!important;
--newCommunityTheme-search-syntaxHighlightColor: @base !important;
--newCommunityTheme-titleText: @text !important;
--newCommunityTheme-upsell-appleIcon: @subtext1 !important;
--newCommunityTheme-upsell-ssoButtonBorderColor: fade(
@surface1,
70%
) !important;
--newCommunityTheme-upsell-ssoButtonTextColor: @text !important;
--newCommunityTheme-voteText-base: @subtext0 !important;
--newCommunityTheme-voteText-downvote: @blue !important;
--newCommunityTheme-voteText-downvoteShaded80: @blue !important;
--newCommunityTheme-voteText-downvoteTinted80: @blue !important;
--newCommunityTheme-voteText-upvote: @red !important;
--newCommunityTheme-voteText-upvoteShaded80: @red !important;
--newCommunityTheme-voteText-upvoteTinted80: @red !important;
--newCommunityTheme-widgetColors-appleIcon: @overlay0 !important;
--newCommunityTheme-widgetColors-lineColor: fade(
@surface1,
70%
) !important;
/* sidebar widgets */
--newCommunityTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle
!important;
--newCommunityTheme-widgetColors-sidebarWidgetBorderColor: fade(
@surface1,
70%
) !important;
--newCommunityTheme-widgetColors-sidebarWidgetHeaderColor: @crust
!important;
--newCommunityTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: @mantle
!important;
--newCommunityTheme-widgetColors-sidebarWidgetTextColor: @text !important;
--newCommunityTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1
!important;
--newCommunityTheme-widgetColors-sidebarWidgetTitleColor: @text
!important;
--newRedditTheme-actionIcon: @subtext0 !important;
--newRedditTheme-actionIconAlpha20: fade(@crust, 80%) !important;
--newRedditTheme-actionIconAlpha50: fade(@crust, 80%) !important;
--newRedditTheme-actionIconShaded80: @subtext0 !important;
--newRedditTheme-actionIconTinted80: @subtext1 !important;
--newRedditTheme-active: @accent !important;
--newRedditTheme-activeAlpha10: fade(@crust, 80%) !important;
--newRedditTheme-activeAlpha20: fade(@crust, 80%) !important;
--newRedditTheme-activeAlpha50: fade(@crust, 80%) !important;
--newRedditTheme-activeLight60: @accent !important;
--newRedditTheme-activeShaded80: @accent !important;
--newRedditTheme-activeShaded90: @accent !important;
--newRedditTheme-activeTinted05: @text !important;
--newRedditTheme-banner-backgroundColor: @accent !important;
--newRedditTheme-banner-iconColor: @accent !important;
--newRedditTheme-body: @mantle !important;
--newRedditTheme-bodyAlpha50: @surface0 !important;
--newRedditTheme-bodyAlpha70: @surface1 !important;
--newRedditTheme-bodyAlpha80: @surface2 !important;
--newRedditTheme-bodyFade: fade(@crust, 80%) !important;
--newRedditTheme-bodyShaded80: @mantle !important;
--newRedditTheme-bodyText: @text !important;
--newRedditTheme-bodyTextAlpha03: fade(@crust, 80%) !important;
--newRedditTheme-bodyTextAlpha20: @surface1 !important;
--newRedditTheme-bodyTextShaded20: @surface0 !important;
--newRedditTheme-bodyTextTinted20: @subtext1 !important;
--newRedditTheme-bodyTinted50: @overlay0 !important;
--newRedditTheme-bodyTinted80: @overlay1 !important;
--newRedditTheme-button: @text !important;
--newRedditTheme-buttonAlpha05: fade(@crust, 80%) !important;
--newRedditTheme-buttonAlpha10: fade(@crust, 80%) !important;
--newRedditTheme-buttonAlpha20: fade(@crust, 80%) !important;
--newRedditTheme-buttonAlpha40: @subtext0 !important;
--newRedditTheme-buttonAlpha50: @subtext1 !important;
--newRedditTheme-buttonAlpha80: @subtext1 !important;
--newRedditTheme-buttonShaded80: @overlay0 !important;
--newRedditTheme-buttonTinted20: @accent !important;
--newRedditTheme-buttonTinted50: @accent !important;
--newRedditTheme-buttonTinted80: @accent !important;
--newRedditTheme-canvas: @crust !important;
--newRedditTheme-checkbox: @text !important;
--newRedditTheme-errorText: @red !important;
--newRedditTheme-field: @base !important;
--newRedditTheme-fieldFade: @mantle !important;
--newRedditTheme-flair: @accent !important;
/* controls menu, link, and other similar highlights. very important */
--newRedditTheme-highlight: @base !important;
--newRedditTheme-inactive: @surface0 !important;
--newRedditTheme-lightText: @text !important;
--newRedditTheme-lightTextAlpha75: @subtext1 !important;
--newRedditTheme-line: fade(@surface1, 70%) !important;
--newRedditTheme-lineShaded80: fade(@surface1, 70%) !important;
--newRedditTheme-lineShaded90: fade(@surface1, 70%) !important;
--newRedditTheme-lineShadedNinety: fade(@surface1, 70%) !important;
/* links */
--newRedditTheme-linkText: @accent !important;
--newRedditTheme-linkTextAlpha80: @accent !important;
--newRedditTheme-linkTextShaded80: @accent !important;
--newRedditTheme-linkTextTinted80: @accent !important;
--newRedditTheme-linkTextWithBody: @accent !important;
/* menus */
--newRedditTheme-menu: @mantle !important;
--newRedditTheme-menuActiveText: @text !important;
--newRedditTheme-menuButtonBackground-active: @accent !important;
--newRedditTheme-menuButtonBackground-focus: @base !important;
--newRedditTheme-menuButtonBackground-hover: @base !important;
--newRedditTheme-menuInactiveText: @text !important;
--newRedditTheme-metaText: @subtext0 !important;
--newRedditTheme-metaTextAlpha50: fade(@crust, 80%) !important;
--newRedditTheme-metaTextShaded80: @subtext1 !important;
--newRedditTheme-monospaceColor: @accent !important;
--newRedditTheme-navBar-activeLink: @text !important;
--newRedditTheme-navBar-activeSubmenuCaret: @text !important;
--newRedditTheme-navBar-activeSubmenuLink: @text !important;
--newRedditTheme-navBar-backgroundColor: @mantle !important;
--newRedditTheme-navBar-hoverLink: @text !important;
--newRedditTheme-navBar-inactiveLink: @text !important;
--newRedditTheme-navBar-inactiveSubmenuCaret: @text !important;
--newRedditTheme-navBar-inactiveSubmenuLink: @text !important;
--newRedditTheme-navBar-submenuBackgroundColor: @mantle !important;
--newRedditTheme-navIcon: @text !important;
--newRedditTheme-navIconFaded10: fade(@crust, 80%) !important;
--newRedditTheme-nsfw: @red !important;
--newRedditTheme-nsfwBlocking-bgcolor: @crust !important;
--newRedditTheme-nsfwBlocking-color: @text !important;
--newRedditTheme-nsfwBlocking-contentTitleBgColor: @base !important;
--newRedditTheme-nsfwBlocking-mainCtaBgColor: @mantle !important;
--newRedditTheme-pageHeader: @surface0 !important;
--newRedditTheme-placeholder: @surface1 !important;
--newRedditTheme-post: @mantle !important;
--newRedditTheme-postError: @red !important;
--newRedditTheme-postFlairText: @text !important;
--newRedditTheme-postIcon: @accent !important;
--newRedditTheme-postLine: fade(@surface1, 70%) !important;
--newRedditTheme-postLineShaded80: fade(@surface1, 70%) !important;
--newRedditTheme-postLineShaded90: fade(@surface1, 70%) !important;
--newRedditTheme-postTinted20: @base !important;
--newRedditTheme-postTransparent20: fade(@crust, 80%) !important;
--newRedditTheme-primaryButtonShadedEighty: @surface1 !important;
--newRedditTheme-primaryButtonTintedEighty: @surface2 !important;
--newRedditTheme-primaryButtonTintedFifty: @surface1 !important;
--newRedditTheme-primaryButtonTintedSixty: @surface1 !important;
--newRedditTheme-quarantine: @yellow !important;
--newRedditTheme-report: @base !important;
--newRedditTheme-search-syntaxHighlightBackgroundColor: @accent
!important;
--newRedditTheme-search-syntaxHighlightColor: @base !important;
--newRedditTheme-titleText: @text !important;
--newRedditTheme-upsell-appleIcon: @overlay0 !important;
--newRedditTheme-upsell-ssoButtonBorderColor: @text !important;
--newRedditTheme-upsell-ssoButtonTextColor: @text !important;
--newRedditTheme-voteText-base: @subtext1 !important;
--newRedditTheme-voteText-downvote: @blue !important;
--newRedditTheme-voteText-downvoteShaded80: @blue !important;
--newRedditTheme-voteText-downvoteTinted80: @blue !important;
--newRedditTheme-voteText-upvote: @red !important;
--newRedditTheme-voteText-upvoteShaded80: @red !important;
--newRedditTheme-voteText-upvoteTinted80: @red !important;
--newRedditTheme-widgetColors-appleIcon: @overlay0 !important;
--newRedditTheme-widgetColors-lineColor: fade(
@surface1,
70%
) !important;
--newRedditTheme-widgetColors-sidebarWidgetBackgroundColor: @mantle
!important;
--newRedditTheme-widgetColors-sidebarWidgetBorderColor: fade(
@surface1,
70%
) !important;
--newRedditTheme-widgetColors-sidebarWidgetHeaderColor: @crust !important;
--newRedditTheme-widgetColors-sidebarWidgetHeaderColorAlpha60: fade(
@crust,
80%
) !important;
--newRedditTheme-widgetColors-sidebarWidgetTextColor: @text !important;
--newRedditTheme-widgetColors-sidebarWidgetTextColorShaded80: @subtext1
!important;
--newRedditTheme-widgetColors-sidebarWidgetTitleColor: @text !important;
--tw-bg-opacity: @crust !important;
--vds-video-bg-color: @crust !important;
}
/* reddit chat variables */
:root {
--activity-button-chatFilterColor: @surface0 !important;
--activity-button-newChatFilter-activeBg: @accent !important;
--activity-button-newChatFilter-activeText: @base !important;
--activity-button-newChatFilter-defaultBorder: @surface1 !important;
--activity-button-newChatFilter-defaultText: @text !important;
--activity-button-primary: @accent !important;
--activity-button-secondary: @text !important;
--activity-buttonPrimary-color: @accent !important;
--activity-buttonSecondary-active: @accent !important;
--activity-checkbox-checked: @accent !important;
--activity-checkbox-checkmark: @text !important;
--activity-checkbox-unchecked: @base !important;
--activity-checkbox-uncheckedBorder: @surface1 !important;
--activity-icon-active: @accent !important;
--activity-icon-contrast: @surface1 !important;
--activity-icon-default: @subtext0 !important;
--activity-icon-disable: @surface2 !important;
--activity-icon-hover: @surface2 !important;
--activity-icon-nsfw-bg: @base !important;
--activity-icon-nsfw-text: @text !important;
--activity-icon-subIcon-backgroundColor: @text !important;
--activity-icon-toaster: @crust !important;
--activity-input-background: fade(@crust, 80%) !important;
--activity-input-border: @surface1 !important;
--activity-input-channelRename: @subtext0 !important;
--activity-input-color: @subtext1 !important;
--activity-input-error: @red !important;
--activity-input-focusBg: @green !important;
--activity-input-focusColor: @text !important;
--activity-input-ownerBg: @surface0 !important;
--activity-link-hoverText: @red !important;
--activity-link-staticText: @accent !important;
--activity-link-staticUnderline: @accent !important;
--activity-minimizedPortal-backgroundColor-unreadFinal: @mantle
!important;
--activity-minimizedPortal-backgroundColor-unreadInitial: @accent
!important;
--activity-minimizedPortal-color-unreadFinal: @text !important;
--activity-minimizedPortal-color-unreadInitial: @text !important;
--activity-send-disable: @surface0 !important;
--activity-send-hover: @accent !important;
--activity-text-active: @accent !important;
--activity-text-fade: @subtext0 !important;
--activity-text-highlight: @text !important;
--activity-text-light: @subtext0 !important;
--activity-text-meta: @subtext0 !important;
--activity-text-regular: @text !important;
--activity-text-success: @green !important;
--activity-text-tutorial: @rosewater !important;
--activity-text-warning: @red !important;
--addReaction-backgroundColor: @surface0 !important;
--addReaction-iconFill: @surface1 !important;
--boxShadow: fade(@crust, 80%) !important;
--bubble-border: fade(@surface1, 70%) !important;
--bubble-channelsFilter-background: @crust !important;
--bubble-channelsFilter-selected: @overlay0 !important;
--bubble-color: @text !important;
--bubble-link-color: @accent !important;
--bubbleActions-hover: @surface0 !important;
--editName: @surface1 !important;
--layout-body: @mantle !important;
--layout-colsBorder: fade(@surface1, 70%) !important;
--layout-controlsBorder: fade(@surface1, 70%) !important;
--layout-dropdown-border: fade(@surface1, 70%) !important;
--layout-header-counterBg: @red !important;
--layout-header-counterText: @text !important;
--layout-overlayBackground: fade(@crust, 80%) !important;
--layout-overlayReportFlow: fade(@crust, 80%) !important;
--layout-scrollbar: @text !important;
--layout-scrollbarHover: @accent !important;
--layout-timeStamp-tooltip-background: @surface0 !important;
--message-list-item-button: @surface1 !important;
--message-list-item-onlineIndicator: @green !important;
--message-list-item-ownerBg: @surface1 !important;
--message-list-item-richItem: @overlay0 !important;
--message-list-item-richItemBorder: fade(@surface1, 70%) !important;
--message-list-item-white: @text !important;
--modal-buttonsBackground: @text !important;
--modal-primaryButtonWarning: @red !important;
--modal-secondaryButton: @text !important;
--newChat-inviteLink-borderColor: fade(@surface1, 70%) !important;
--overlay-backgroundColor: @mantle !important;
--overlay-headerColor: @text !important;
--overlay-inputBackground: @crust !important;
--overlay-searchBarBackground: @mantle !important;
--prompt-tooltip-background: @accent !important;
--searchBar-backgroundColor: @mantle !important;
--settings-color: @subtext0 !important;
--settings-dropdownItemHoverBackground: @crust !important;
--settings-panelBackground: @crust !important;
--settings-panelItemHoverBackground: @surface0 !important;
--settings-panelItemSelectedBackground: @surface1 !important;
--sidebar-background: fade(@surface1, 70%) !important;
--sidebar-basic-background-active: @accent !important;
--sidebar-basic-background-hover: @mantle !important;
--sidebar-footer-background: @crust !important;
--sidebar-item-active: @surface1 !important;
--sidebar-item-hover: @surface0 !important;
--sidebar-item-selected: @surface2 !important;
--sidebar-item-text-active: @text !important;
--sidebar-subreddit-background-active: @accent !important;
--sidebar-subreddit-background-hover: @surface1 !important;
--sidebar-text-divider: @surface1 !important;
--skeleton-field: @surface2 !important;
--skeleton-inactive: @surface0 !important;
--subreddit-iconBg: @accent !important;
--toast-error: @red !important;
--toast-pending: @crust !important;
--toast-success: @green !important;
--uploads-progress-background: @subtext0 !important;
--uploads-progress-bar: @accent !important;
--videoModal-button-background: @text !important;
--videoModal-button-color: @mantle !important;
}
/* site background */
div.ListingLayout-backgroundContainer::before {
background: @base !important;
}
/* PROFILE MENU */
/* karma count */
span#email-collection-tooltip-id > :nth-child(2) > :nth-child(2) > span {
color: @subtext0 !important;
}
/* profile button karma icon */
i.icon-karma_fill {
color: @red !important;
}
/* menu headers */
div[role="menu"] > div > div > span > span {
color: @subtext0 !important;
}
/* switches, should also apply sitewide */
button[role="switch"][aria-checked="false"] {
background: @surface0 !important;
}
button[role="switch"] > div {
background: @text !important;
}
/* online status */
._2dn5Ncenn0BSD4tCSmxQhA {
fill: @green !important;
}
._3SlBAJb2MbUHwgBZFH8eL7 {
fill: @base !important;
}
/* PROFILE PAGE */
/* create avatar button */
button._3F1tNW0P4Ff182mO_CefIg {
background: linear-gradient(90deg, @red, @peach) !important;
color: @base !important;
}
button._3F1tNW0P4Ff182mO_CefIg > i {
color: @base !important;
}
/* cake day and followers icon */
i.icon-cake_fill,
i.icon-user_fill {
color: @accent !important;
}
/* add social links button readability tweak */
div._3hew1NnzwygOKDNQDKp6R4,
div._3hew1NnzwygOKDNQDKp6R4 > i,
li._3hew1NnzwygOKDNQDKp6R4 {
color: @base !important;
}
/* profile moderation and user settings page */
div._1VP69d9lk-Wk9zokOaylL {
--background: @base !important;
--canvas: @base !important;
}
/* Beta Badge */
span._2KFJx8Dhh1o1u0Xb8e7NuD {
color: @accent !important;
}
/* Delete Account */
button.EBd2MhBQlQeZ13YeP0K8a {
color: @accent !important;
}
/* Delete Account Icon */
svg._1Fa4RPHlhrfUZuNaXK2-eP > path {
fill: @accent !important;
}
/* blocked, muted input */
input._1Vnaj3fBuYrmHKEPQD_zWW {
background-color: @base !important;
}
/* fixes profile posts not being themed */
div.scrollerItem > div,
div[data-testid="post-container"],
div[style="background:#1A1A1B"],
div._2otRz3OtuWajw1RleFDJ5P {
background: @mantle !important;
}
/* NFT AVATAR VIEWER */
/* modal background */
div._productDetails_7kbcu_53 {
background: @mantle !important;
color: @text !important;
}
/* Tag Color */
.RESUserTagImage::after {
color: @accent;
}
/* mint status */
div._mintStatus_7kbcu_264 {
color: @accent !important;
}
/* carousel background */
div._carousel_7kbcu_45 {
background: linear-gradient(243.37deg, @base 16.42%, @blue 100%);
}
/* nft card back */
div._card_1ooes_1 {
background: @blue !important;
}
ol._container_1t62i_1 {
border-color: @base !important;
}
ol._container_1t62i_1 > li {
border-color: @base !important;
}
ol._container_1t62i_1 > li > div {
color: @base !important;
}
div.MuiMobileStepper-dot {
background: @surface0 !important;
}
div.MuiMobileStepper-dotActive {
background: @accent !important;
}
div._scrollContainer_7kbcu_104 > div > h3,
div._cardAuthor_7kbcu_79 {
color: @subtext0 !important;
}
div._container_oikih_1 {
background: @crust !important;
border-color: @surface1 !important;
}
/* external links */
a._pill_7kbcu_280 {
background: @crust !important;
color: @text !important;
}
/* shop for avatars button */
button._shopForMoreButton_7kbcu_125 {
background: linear-gradient(90deg, @red, @peach) !important;
color: @base !important;
}
/* AVATAR CREATOR */
div._wrapper_1upjl_7 {
background: @base !important;
color: @text !important;
}
/* SITE HEADER */
/* reddit logo */
a[aria-label="Home"] > svg > g > circle {
fill: @accent !important;
}
a[aria-label="Home"] > svg:first-child > g > path {
fill: @base !important;
}
a[aria-label="Home"] > svg:nth-child(2) > g > path {
fill: @text !important;
}
/* Post title from notification */
h1._eYtD2XCVieq6emjKBH3m {
color: @text !important;
}
/* notification icon */
button[aria-label="Open notifications inbox"] > div > span {
background: @accent !important;
color: @mantle !important;
}
/* advertise button */
#change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a {
background: @surface0 !important;
color: @text !important;
}
#change-username-tooltip-id > span._2I12Htze2UzJmmfnrgYJOn > a > i {
color: @text !important;
}
/* reddit now notification */
a[href="/now"] > div {
background: @accent !important;
}
/* search scope pill text */
div[data-testid="search-scope-pill-text"] {
color: @text !important;
}
/* search popup title */
div[class*="_2SdHzo12ISmrC8H86TgSCp"][class*="_1QVrieUoti9cxiQSRw314E"][class*="uWdXen_41bh0iwLrgzFkc"] {
--posttitletextcolor: @text !important;
}
/* safe search toggle */
button#safe-search-toggle[aria-checked="true"] {
background: @accent !important;
}
/* NAVIGATION SIDEBAR */
/* close icon */
i.icon-close {
color: @subtext0 !important;
}
/* item color */
a[role="menuitem"] {
color: @text !important;
}
/* navigation sidebar header color */
div[role="menu"] > div[role="heading"] {
color: @subtext0 !important;
}
a[role="menuitem"]:hover {
background: @surface0 !important;
}
/* favorites */
i.icon-star_fill {
color: @accent !important;
}
i.icon-star {
color: @subtext0 !important;
}
/* RIGHT FRONTPAGE SIDEBAR */
/* reddit premium icon */
i.icon-premium_fill {
color: @accent !important;
}
/* reddit premium try now button */
button._10BQ7pjWbeYP63SAPNS8Ts.q_unSaY23rpdd3lDvGZ- {
background: @accent !important;
color: @base !important;
}
/* recent posts thumbnail borders */
div._3fWuhJ6bVet7XJT5A0mZM2 > div > div > div {
border-color: @subtext0 !important;
}
/* POSTS */
/* post background for card style */
div[data-adclicklocation="background"] {
background: @base !important;
}
/* post options (save, comment, etc.) */
div._3-miAEojrCvx_4FQ8x3P-s,
i.icon-comment,
i.icon-share,
i.icon-save,
i.icon-expand,
i.icon-collapse,
i.icon-text_post,
i.icon-image_post,
i.icon-media_gallery,
i.icon-video_post,
i.icon-gif_post,
i.icon-embed,
i.icon-external_link,
i.icon-poll_post {
color: @subtext0 !important;
}
/* post title color */
div[data-adclicklocation="title"] > div > a > div > h3,
div[data-adclicklocation="title"]
> div:first-child
> div:first-child
> h1:first-child {
color: @text !important;
}
/*
* post op color and
* post date color
*/
div[data-adclicklocation="top_bar"] > span,
a[data-testid="post_author_link"] {
color: @subtext0 !important;
}
/* nsfw flair */
span._1wzhGvvafQFOWAyA157okr {
border-color: @red !important;
color: @red !important;
}
/* pinned post icon */
i.icon-pin_fill {
color: @green !important;
}
/* give award icon */
i.icon-award {
color: @subtext0 !important;
}
/* locked post icon */
i.icon-archived_fill,
i.icon-lock_fill {
color: @yellow !important;
}
/* post button divider */
div[data-click-id="body"] > div:nth-child(3) > div:nth-child(3) {
border-color: @surface1 !important;
}
/* UPVOTES/DOWNVOTES */
/* upvote/downvote background */
div.Post,
div[data-click-id="media"] {
background: @mantle !important;
fill: @mantle !important;
}
/* inactive vote text color */
div[id^="vote-arrows"] > div {
color: @subtext0 !important;
}
/* active upvote color */
i.icon-upvote_fill {
color: @red !important;
}
button[aria-label="upvote"][aria-pressed="false"] > span:hover > i {
color: @red !important;
}
/* active upvote text color */
button[aria-label="upvote"][aria-pressed="true"] ~ div {
color: @red !important;
}
/* hover background for both upvotes and downvotes */
button[aria-label="upvote"][aria-label="downvote"] > span:hover {
background: @surface0 !important;
}
/* active downvote color */
.icon-downvote_fill {
color: @blue !important;
}
/* active downvote text color */
button[aria-label="downvote"][aria-pressed="true"] ~ div {
color: @blue !important;
}
button[aria-label="downvote"][aria-pressed="false"] > span:hover > i {
color: @blue !important;
}
/* REPORT MODAL */
a.o1ov2mzLxTFAFP-O4Uv8I {
color: @accent !important;
}
button._1lDGFVGU9k2mi-4kjU95Rp {
color: @base !important;
}
/* SUBREDDIT PAGES */
a[role="button"][target="_blank"] {
background: @text !important;
color: @base !important;
}
/* radio buttons (flair selector, etc.) */
div[role="radio"]:hover,
div[role="radio"]:focus {
background: @accent !important;
}
div[role="radio"] > svg,
div[role="radio"] > svg:active {
fill: @text !important;
}
/* checkboxes */
button[role="checkbox"] {
fill: @accent !important;
}
/* SUBREDDIT RIGHT SIDEBAR (some styles carry over from the homepage right sidebar section) */
/* header background */
._ZhON3a3vplThB8NFwuJn {
background: @crust !important;
color: @text !important;
}
/* subreddit image background */
img[alt="Subreddit Icon"][role="presentation"] {
background: @accent !important;
}
/* border between uela */
._1KrMye71CT332tKKKUWAj6:not(:last-of-type) {
border-bottom-color: @surface0;
}
/* follower color */
.bg-neutral-background {
color: @text !important;
}
/* default subreddit icon */
i.icon-community_fill {
color: @accent !important;
}
/* online users */
div._21RLQh5PvUhC6vOKoFeHUP::before {
color: @green !important;
}
/* POST VIEWER */
/* spoiler tags */
._2v4IIjPhKL0PDaWaWtjJ1E {
background: @surface0 !important;
}
/* mod comment tag */
span[id^="CommentTopMeta--Mod"] {
color: @green !important;
}
/* op comment tag */
span[id^="CommentTopMeta--OP"] {
color: @blue !important;
}
/* post overlay if you have "open in new tab" disabled */
div#overlayScrollContainer > div {
background: @crust !important;
}
/* fixes comment section background not working when "open in new tab is disabled" */
div._2M2wOqmeoPVvcSsJ6Po9-V._3287nL7j7epK9JmDC3N1VR {
background: @mantle !important;
}
/* shade applied to background when clicking on a post with "open in new tab" disabled */
div._2DJXORCrmcNpPTSq0LqL6i,
div._1DK52RbaamLOWw5UPaht_S {
background: fade(@crust, 80%) !important;
}
/* gold award gradient */
div.TmlaIdEplCzZ0F1aRGYQh[role="presentation"] {
background: linear-gradient(
188deg,
#f9e2af1f 1.7%,
#f9e2af00 46%,
rgba(0, 0, 0, 0)
) !important;
}
/* image gallery next/previous buttons */
a[title="Next"] > i,
a[title="Previous"] > i {
background: @surface0 !important;
}
/* image gallery image count */
div._61i6grM3um1yuw4GrN97P {
background: fade(@crust, 80%) !important;
color: @text !important;
}
/* comment search bar */
input#comment_search-bar {
background: @base !important;
}
/* tab bar below banner */
._1gVVmSnHZpkUgVShsn7-ua {
background: @mantle !important;
}
/* MULTIREDDITS/CUSTOM FEEDS */
/* delete custom feed button */
.bX6SqXfzfxpv4GQbuIYVZ {
color: @red !important;
}
/* TOOLTIPS */
div.HQ2VJViRjokXpRbJzPvvc {
background: @mantle !important;
color: @text !important;
}
div.HQ2VJViRjokXpRbJzPvvc::after {
border-top-color: @mantle !important;
}
/* Recap Reddit Logo */
.snoo-cls-1,
.snoo-cls-2,
.snoo-cls-3,
.snoo-cls-6,
.snoo-cls-8,
.snoo-cls-9 {
fill: @base;
}
.snoo-cls-4,
.snoo-cls-5,
.snoo-cls-7,
.snoo-cls-10,
.snoo-cls-11 {
fill: @accent;
}
}
}
/* deno-fmt-ignore */
@catppuccin: {
@latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; };
@frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; };
@macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; };
@mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; };
};