/* ==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; } } }