/* ==UserStyle==
@name Chess.com Catppuccin
@namespace github.com/catppuccin/userstyles/styles/chess.com
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/chess.com
@version 2026.04.13
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/chess.com/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Achess.com
@description Soothing pastel theme for Chess.com
@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"]
@var select highlightColor1 "Highlight 1" ["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"]
@var select highlightColor2 "Highlight 2" ["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"]
@var select highlightColor3 "Highlight 3" ["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"]
@var select highlightColor4 "Highlight 4" ["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"]
@var checkbox styleBoardAndPieces "Style Board & Pieces" 1
==/UserStyle== */
@import "https://userstyles.catppuccin.com/lib/lib.less";
@-moz-document domain("chess.com") {
.light-mode {
#catppuccin(@lightFlavor);
}
.dark-mode {
#catppuccin(@darkFlavor);
}
#catppuccin(@flavor) {
#lib.palette();
#lib.defaults();
@highlight1: @catppuccin[@@flavor][@@highlightColor1];
@highlight2: @catppuccin[@@flavor][@@highlightColor2];
@highlight3: @catppuccin[@@flavor][@@highlightColor3];
@highlight4: @catppuccin[@@flavor][@@highlightColor4];
--color-bg-opaque: @mantle;
--color-bg-opaque-lighter: @base;
--color-bg-subtle: @surface1;
--color-bg-subtler: @surface0;
--color-bg-input: @mantle;
--color-bg-speech: @surface0;
--color-bg-secondary: @surface0;
--color-bg-tertiary: @surface1;
--color-bg-quaternary: @surface2;
--color-gray-100: @overlay1;
--color-text-speech: @text;
--color-icon-default: @subtext0;
--color-icon-default-hovered: @subtext1;
--color-icon-bolder: @subtext1;
--color-icon-boldest: @text;
--color-text-boldest: @text;
--color-text-bolder: @text;
--color-text-default: @text;
--color-text-default-hovered: @subtext1;
--color-text-subtle: @subtext1;
--color-text-placeholder: @subtext0;
--color-text-inverse: @crust;
--color-text-link: @blue;
--color-text-link-hovered: @sky;
--color-border-default: @surface1;
--color-border-subtle: @overlay2;
--color-border-selected: @accent;
--color-green-200: lighten(@accent, 5%);
--color-green-300: @accent;
--color-green-400: darken(@accent, 5%);
--color-red-300: @red; /* Danger */
--color-red-400: @red; /* Danger */
/* Links */
--color-blue-200: @sapphire;
--color-blue-300: @sky;
--color-blue-400: @blue;
--color-classification-blunder: @red;
--color-classification-miss: @maroon;
--color-classification-mistake: @peach;
--color-classification-inaccuracy: @yellow;
--color-classification-best: @green;
--color-classification-excellent: @green;
--color-classification-good: @teal;
--color-classification-great: @blue;
--color-classification-brilliant: @sapphire;
--color-classification-book: @rosewater;
--color-icon-win: @green;
--color-text-win: @green;
--color-icon-draw: @subtext0;
--color-text-draw: @subtext0;
--color-bg-draw: @subtext0;
--color-border-draw: var(--color-transparent-white-10);
--color-icon-loss: @red;
--color-text-loss: @red;
--color-border-loss: @red;
--color-icon-bullet: @peach;
--color-icon-blitz: @yellow;
body {
--theme-background-color: @base !important;
--theme-background-image: none;
--globalBackground: @mantle !important;
--globalBackgroundOpaque: @mantle !important;
--globalSecondaryBackground: @crust !important;
--globalTertiaryBackground: @surface0 !important;
--globalAccentBackground: @accent !important;
--globalSecondaryAccentBackground: @surface0 !important;
--globalSiteBackground: @base !important;
--globalBorder: @surface0 !important;
--globalColorThemeFull: @text !important;
--globalColorThemeHigh: @text;
--globalColorThemeMid: @overlay2 !important;
--globalColorThemeLow: @overlay0 !important;
--globalColorThemeLower: @base !important;
--globalColorThemeLink: @sapphire !important;
--globalColorThemeBlueToMid: @text;
--globalOverlayBackground: @base !important;
--globalColorWin: @green !important;
--globalColorDraw: @accent !important;
--globalColorLoss: @red !important;
--labelBgColor: @surface1;
--activeLabelColor: @accent;
--buttonBgColor: @text;
--nodeColor: @text;
--nodeBackground: @yellow;
}
/* Home page */
.index-title,
.index-info-item-counter {
color: @text !important;
}
.index-info-item {
color: @subtext0 !important;
}
.index-suggestion-title,
.index-posts-title,
.index-post-name {
color: @text;
}
.index-quote-author,
.index-quote-body,
.index-post-author {
color: @subtext1;
}
.promo-title,
.promo-rank {
color: @text;
}
.promo-subtitle {
color: @subtext1;
}
.home-username-link {
color: @text;
}
/* Lessons page */
.level-title {
color: @text;
}
.level-desc,
.course-header-description strong {
color: @subtext1;
}
.lessons-search-filter {
.form-dropdown-chevron,
.form-dropdown-control-label,
.form-dropdown-value {
color: @subtext1;
}
}
/* Play lesson video */
.lesson-status {
background-color: @text;
}
/* More page */
.landing-header {
color: @text;
}
/* UI */
.v5-title-label {
color: @text;
}
.v5-tabs-list,
.v5-tabs-list-dark {
--borderColor: @surface2;
--tabTitleColor: @subtext0;
--tabHoverTitleColor: @subtext1;
--tabSelectedBorderColor: @subtext1;
--tabSelectedTitleColor: @text;
}
.ui_v5-input-component {
--borderColor: @surface0;
--borderFocus: @surface1;
--bgColor: @base;
--textColor: @text;
--secondaryTextColor: @subtext1;
}
.ui_v5-input-group-component {
--inputIconColor: @subtext0;
}
.ui_v5-button-component {
--boxShadow: none;
--boxShadowHover: none;
box-shadow: none;
&.ui_v5-button-basic {
--basicColor: @text !important;
--basicHoverColor: @text !important;
--basicBgColor: @surface1 !important;
--basicBghover: @surface2 !important;
--borderColor: @surface0 !important;
}
&.ui_v5-button-primary {
color: @crust !important;
background-color: @accent;
&:hover {
background-color: darken(@accent, 5%);
box-shadow: none;
}
}
}
.ui_v5-select-component {
--borderColor: @surface0;
--borderFocus: @surface1;
--bgColor: @base;
--textColor: @text;
--arrowColor: @subtext0;
}
.ui_pagination-item-component {
--paginationColor: @text;
--paginationBgColor: @surface1;
--paginationBgHover: @surface2;
--paginationColorMuted: @base;
--paginationBgColorMuted: @overlay1;
}
.nav-link-text {
color: @text !important;
}
.nav-menu-area:last-of-type .icon-font-chess {
color: @mantle !important;
}
.nav-link-main-design,
.nav-link-main-link {
color: @text !important;
&:hover {
color: @subtext1 !important;
}
}
#tb {
.toolbar-action-icon {
color: @subtext1;
}
.toolbar-action-wrapper:hover .toolbar-action-icon {
color: @text !important;
}
}
#sb {
color: @subtext0;
&.open {
background-color: @mantle;
}
.nav-action:hover {
background-color: @surface0;
color: @text;
}
.nav-panel-shade,
.nav-panel-theme-bg,
.nav-action.has-popover + .nav-popover {
background: @mantle !important;
}
.nav-popover.dark .btn-link {
color: @text;
}
.nav-menu-area:last-of-type {
color: @text !important;
}
.nav-popover.nav-search {
--search-bg-color: @surface0;
}
}
.nav-popover.dark {
background: @mantle;
}
.section-heading-component .back-link-component {
color: currentcolor;
}
.section-heading-black {
background-color: @surface1;
color: @text;
}
.nav-section-header-component {
background-color: @base;
color: @text;
}
.popover-friends-header,
.popover-friends-content,
.popover-messages-header,
.popover-messages-content,
.popover-settings-header,
.popover-settings-content {
background: @mantle;
}
/* Buttons */
.selector-button-button,
.time-selector-button-button {
background: @surface0;
&:hover {
background: @surface1;
}
}
.cc-switch-checkbox:not(.cc-switch-readonly):checked
+ .cc-switch-label
.cc-switch-button {
background-color: @surface1;
}
.cc-button-component,
.cc-button-primary {
--bgColor: @accent;
--bgColorHover: darken(@accent, 5%);
--textColor: @crust;
--textColorHover: @crust;
box-shadow: none;
}
.cc-button-primary,
.cc-button-monetization {
--borderBottomLine: darken(@accent, 2%);
--borderBottomLineHover: darken(@accent, 4%);
}
.cc-button-secondary {
--bgColor: @surface0;
--bgColorHover: darken(@surface0, 5%);
--iconColor: @text;
--iconColorHover: @text;
--textColor: @text;
--textColorHover: @text;
}
.cc-button-danger {
--bgColor: @red;
--bgColorHover: darken(@red, 5%);
color: @crust;
}
.v5-section-shadow,
.v5-section-shadow-hover {
--linkHoverBackground: @surface1;
--linkBoxShadow: 0 0.5rem 0 0 @surface2;
}
/* Game */
.user-username-component,
.cc-user-username-white,
.cc-user-rating-white {
color: @text;
text-shadow: none;
}
.user-tagline-rating.user-tagline-white {
color: @overlay1;
}
.clock-component.clock-black {
background: @surface0;
}
.clock-component.clock-white {
background: @text;
}
.highlight {
&[style*="rgb(235, 97, 80)"] {
background: fade(@highlight1, 80%) !important;
}
&[style*="rgb(172, 206, 89)"] {
background: fade(@highlight2, 80%) !important;
}
&[style*="rgb(255, 170, 0)"] {
background: fade(@highlight3, 80%) !important;
}
&[style*="rgb(82, 176, 220)"] {
background: fade(@highlight4, 80%) !important;
}
opacity: 1 !important;
}
.hover-square rect {
stroke: @overlay1 !important;
}
.hint {
background-color: @overlay1;
filter: drop-shadow(0 0 1px @crust);
}
.capture-hint {
background-color: @overlay1;
filter: drop-shadow(0 0 1px @crust);
z-index: -1;
}
/* Review/evaluation */
.evaluation-bar-bar {
.evaluation-bar-black {
background-color: @surface2;
}
.evaluation-bar-draw {
background-color: @overlay1;
}
.evaluation-bar-white {
background-color: @text;
}
}
.review-rating-white {
background-color: @text;
}
.review-rating-black {
background-color: @surface0;
color: @text;
}
.overview-view-new-game-button {
background-color: @surface1;
}
.arrow {
&[style*="rgba(248, 85, 63, 0.8)"] {
fill: @highlight1 !important;
}
&[style*="rgba(159, 207, 63, 0.8)"] {
fill: @highlight2 !important;
}
&[style*="rgba(255, 170, 0, 0.8)"] {
fill: @highlight3 !important;
}
&[style*="rgba(72, 193, 249, 0.8)"] {
fill: @highlight4 !important;
}
}
g#winner [fill="#dbac16"] {
fill: @yellow !important;
}
/* Game over */
.modal-game-over-header-grey,
.modal-game-over-header-black-win,
.game-over-header-component {
background-color: @base;
color: @text;
}
.modal-game-over-user-winner-active,
.modal-game-over-user-crown {
background: @lavender;
}
.game-over-review-button-label {
color: @crust;
text-shadow: none;
}
/* Ads */
.placeholder-ad-upgrade {
background-color: @accent;
}
.placeholder-ad-link {
color: @crust;
}
.modal-trial-component.modal-trial-special-offer {
.modal-trial-header-background {
background-color: @accent;
}
}
.coach-nudges-modal-component {
background: @mantle;
}
.ready-to-play-banner-component {
background-color: @mantle;
.ready-to-play-banner-title,
.ready-to-play-banner-list {
color: @text;
}
}
.notifications-links-trial .nav-link-text {
color: @crust !important;
}
/* Misc */
/* GM/IM/etc badge */
--color-bg-chesstitle: @accent;
.course-author-title,
.course-header-author-title,
.form-dropdown-short-title,
.index-chess-title,
.leaderboard-index-chess-title,
.player-header-title,
.category-headline-chess-title {
color: @crust !important;
}
.tooltip-body {
background: @surface0;
color: @text;
&::after {
border-top-color: @surface0 !important;
}
}
.popup-component {
background-color: @surface0;
color: @text;
&.popup-left .popup-arrow {
border-left-color: @surface0;
}
&.popup-right .popup-arrow {
border-right-color: @surface0;
}
}
/* Error banner */
.alerts-alert {
color: @crust;
}
div.mode-selection-button-selected {
> .mode-selection-button-description {
color: @surface1;
}
> .mode-selection-button-mode {
color: @mantle;
}
}
.status-component {
background-color: @accent;
color: @crust;
}
.navigation-footer-page-component,
.navigation-footer-platform-icon {
color: @subtext1;
text-shadow: none;
}
.download-button-button {
color: @crust !important;
}
.table-hover tbody tr:hover {
background-color: @surface2;
}
/* Board */
@light-cell: @catppuccin[@mocha][@text];
@dark-cell: @catppuccin[@mocha][@@accentColor];
@board: escape(
''
);
& when (@styleBoardAndPieces = 1) {
#board-play-computer,
.board.theme-selector-preview-board,
.fade-in-overlay {
background-image: url("data:image/svg+xml,@{board}") !important;
}
/* Coordinates - Inside */
.coordinate-light {
fill: @dark-cell;
}
.coordinate-dark {
fill: @light-cell;
}
/* Coordinates - Outside */
.coordinate-grey {
fill: @subtext0;
}
}
#piece(@piece, @type) {
@border: @catppuccin[@mocha][@base];
@darkest: if(
@type = black,
@catppuccin[@mocha][@base],
@catppuccin[@mocha][@text]
);
@darker: if(
@type = black,
@catppuccin[@mocha][@surface0],
@catppuccin[@mocha][@subtext1]
);
@main: if(
@type = black,
@catppuccin[@mocha][@surface1],
@catppuccin[@mocha][@subtext0]
);
@lighter: if(
@type = black,
@catppuccin[@mocha][@surface2],
@catppuccin[@mocha][@overlay2]
);
@lightest: if(
@type = black,
@catppuccin[@mocha][@overlay0],
@catppuccin[@mocha][@overlay1]
);
@bishop: '';
@king: '';
@knight: '';
@rook: '';
@pawn: '';
@queen: '';
@svg: escape(@@piece);
@result: url("data:image/svg+xml,@{svg}");
}
.board-popover-component {
background-color: @surface0;
}
& when (@styleBoardAndPieces = 1) {
--theme-board-style-image: url("data:image/svg+xml,@{board}");
--theme-board-style-highlight-color: @highlight1;
--theme-piece-set-wp: #piece(pawn, white)[];
--theme-piece-set-wn: #piece(knight, white)[];
--theme-piece-set-wr: #piece(rook, white)[];
--theme-piece-set-wb: #piece(bishop, white)[];
--theme-piece-set-wq: #piece(queen, white)[];
--theme-piece-set-wk: #piece(king, white)[];
--theme-piece-set-bp: #piece(pawn, black)[];
--theme-piece-set-bn: #piece(knight, black)[];
--theme-piece-set-bb: #piece(bishop, black)[];
--theme-piece-set-br: #piece(rook, black)[];
--theme-piece-set-bq: #piece(queen, black)[];
--theme-piece-set-bk: #piece(king, black)[];
.piece {
/* Black */
&.bp {
background-image: #piece(pawn, black)[] !important;
}
&.bn {
background-image: #piece(knight, black)[] !important;
}
&.bb {
background-image: #piece(bishop, black)[] !important;
}
&.br {
background-image: #piece(rook, black)[] !important;
}
&.bk {
background-image: #piece(king, black)[] !important;
}
&.bq {
background-image: #piece(queen, black)[] !important;
}
/* White */
&.wp {
background-image: #piece(pawn, white)[] !important;
}
&.wn {
background-image: #piece(knight, white)[] !important;
}
&.wb {
background-image: #piece(bishop, white)[] !important;
}
&.wr {
background-image: #piece(rook, white)[] !important;
}
&.wk {
background-image: #piece(king, white)[] !important;
}
&.wq {
background-image: #piece(queen, white)[] !important;
}
}
}
.chessboard-pkg-move-list-component .dark-row {
background-color: @surface1;
}
}
}