catppuccin mocha theme 😻 #1276

jupys · 2025-11-26T02:13:31Z

jupys
Nov 26, 2025

hi everyone!

i am a big lover of the catppuccin themes, specifically mocha. while this isn't a true 1:1 rendition of a typical catppuccin mocha (im lazy & busy oops), it's at least matching my discord theme now when i have feshin and discord open on my second monitor!

i hope everyone likes it, and feel free to let me know any changes you think are required! i'd like to theme the full screen view a bit better, but not sure how to approach it.

notes:

i have set default dark to ON.
accent colour is set to rgb(204, 175, 196) in the feshin settings (not sure if this is required but im in too deep now)
below code should be copy and pasted into feshin's CSS options.

.ag-header-viewport {
background-color:rgb(57, 61, 78);
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:initial;
}
.fs-right-sidebar-module-right-sidebar-container {
background-color:rgb(57, 61, 78);
background-clip:initial;
background-origin:initial;
background-attachment:initial;
background-repeat:initial;
background-size:initial;
background-position-y:initial;
background-position-x:initial;
background-image:initial;
}
.fs-feature-carousel-module-carousel .fs-poster-card-module-image-container {
border-bottom-left-radius:22px !important;
border-bottom-right-radius:22px !important;
border-top-right-radius:22px !important;
border-top-left-radius:22px !important;
overflow-y:hidden;
overflow-x:hidden;
}
.fs-feature-carousel-module-carousel {
border-bottom-left-radius:22px;
border-bottom-right-radius:22px;
border-top-right-radius:22px;
border-top-left-radius:22px;
height:0px;
}
.fs-sidebar-item-module-inner svg {
stroke-width:1.8px;
}
.mantine-Modal-content {
border-bottom-left-radius:22px !important;
border-bottom-right-radius:22px !important;
border-top-right-radius:22px !important;
border-top-left-radius:22px !important;
}
.mantine-Popover-dropdown {
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
border-top-right-radius:16px;
border-top-left-radius:16px;
}
.mantine-Input-input {
border-top-left-radius:16px !important;
border-top-right-radius:16px !important;
border-bottom-right-radius:16px !important;
border-bottom-left-radius:16px !important;
}
.mantine-Button-root {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
padding-left:18px;
padding-right:18px;
}
.fs-poster-card-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
}
.fs-feature-carousel-module-carousel .fs-image-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
overflow-x:hidden;
overflow-y:hidden;
}
.fs-dropdown-menu-module-menu-dropdown {
border-top-left-radius:22px;
border-top-right-radius:22px;
border-bottom-right-radius:22px;
border-bottom-left-radius:22px;
}
.ag-row-odd {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-foreground-color: var(--theme-colors-foreground) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
--ag-border-color: var(--theme-colors-border) !important;
--ag-borders: none !important;
--ag-font-family: var(--theme-content-font-family) !important;
}
.fs-page-header-module-background-image-overlay.fs-page-header-module-dark {
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:rgb(40, 44, 60);
}
.fs-player-bar-module-container {
background-color:rgb(57, 61, 78);
}
.fs-main-content-module-main-content-container {
background-color:rgb(40, 44, 60);
}
.fs-sidebar-module-container {
background-color:rgb(57, 61, 78);
}
.fs-sidebar-module-accordion-content {
background-color:rgb(57, 61, 78);
}
.fs-window-bar-module-macos-container {
background-color:rgb(57, 61, 78);
}
.fs-button-module-root[data-variant="default"] {
background-color:rgb(57, 61, 78);
}
.fs-text-input-module-input[data-variant="default"] {
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:rgb(57, 61, 78);
}
body {
color:rgb(198, 208, 245);
}
.fs-player-button-module-main {
background-image:initial !important;
background-position-x:initial !important;
background-position-y:initial !important;
background-size:initial !important;
background-repeat:initial !important;
background-attachment:initial !important;
background-origin:initial !important;
background-clip:initial !important;
background-color:rgb(245, 194, 231) !important;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-right-radius:50%;
border-bottom-left-radius:50%;
}
.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row {
background-color:rgb(57, 61, 78);
}
.ag-body-horizontal-scroll-viewport {
background-color:rgb(57, 61, 78);
}

rounded corners used with love from @manuel-rw in #1272_

jupys · 2025-11-26T02:34:56Z

jupys
Nov 26, 2025
Author

i might actually switch the background and sidebar colours, because it should be lighter in the main view and darker on the outside view. hopefully ill get some time this week, otherwise someone else feel free to beat me to it!

0 replies

jupys · 2025-12-04T04:00:20Z

jupys
Dec 4, 2025
Author

can confirm the above works on 1.0.0, however you'll need to add a line for the new lyrics in the queue.

.fs-sidebar-play-queue-module-lyrics-section {
background: rgb(40, 44, 60);
}

0 replies

jupys · 2025-12-04T04:02:59Z

jupys
Dec 4, 2025
Author

ive also made changes to my colour codes, bringing it more in line with the catppuccin style guide- here.

additionally, i have removed the code for rounded corners from @manuel-rw's #1272 , as it's going to be easier to copy and paste each of our code when we update individually :)

ps. i have tried to collate this into multiple css targets, but it didnt work first try + im too busy to keep trying more stuff lol

.fs-full-screen-player-queue-module-grid-container {
background-color:rgb(30, 30, 46);
}
.fs-item-table-list-module-item-table-container {
background-color:rgb(49, 50, 68);
}
.full-screen-player-queue-header {
background-color:rgb(30, 30, 46);
}
.ag-body-horizontal-scroll-viewport {
background-color:rgb(57, 61, 78);
}
.ag-row {
background-color:rgb(57, 61, 78);
}
.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
body {
color:rgb(245, 194, 231);
}
.fs-text-input-module-input[data-variant="default"] {
background-color:rgb(57, 61, 78);
}
.fs-button-module-root[data-variant="default"] {
background-color:rgb(57, 61, 78);
}
.fs-window-bar-module-macos-container {
background-color:rgb(57, 61, 78);
}
.fs-sidebar-module-accordion-content {
background-color:rgb(49, 50, 68);
}
.fs-sidebar-module-container {
background-color:rgb(49, 50, 68);
}
.fs-main-content-module-main-content-container {
background-color:rgb(40, 44, 60);
}
.fs-player-bar-module-container {
background-color:rgb(49, 50, 68);
}
.fs-page-header-module-background-image-overlay.fs-page-header-module-dark {
    background-color: rgb(88, 91, 112);
}
:root .ag-theme-alpine-dark {
--ag-font-family: var(--theme-content-font-family) !important;
--ag-borders: none !important;
--ag-border-color: var(--theme-colors-border) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
--ag-header-foreground-color: var(--theme-colors-foreground) !important;
--ag-background-color: rgb(40, 44, 60) !important;
}
.ag-row-odd {
background-color:rgb(40, 44, 60);
}
.fs-right-sidebar-module-right-sidebar-container {
background-color:rgb(49, 50, 68);
}
.ag-header-viewport {
background-color:rgb(57, 61, 78);
}
.fs-sidebar-play-queue-module-lyrics-section {
background-color:rgb(49, 50, 68);
}

0 replies

jupys · 2025-12-06T10:08:24Z

jupys
Dec 6, 2025
Author

hi everyone ! i have made a few changes to tie this theme together a bit more. there's a ton more hover + pop-up menu changes. i've also condensed the css down quite a bit.

.fs-full-screen-player-queue-module-grid-container {
    background-color: #1c1c2b;
    border-radius: 20px;
}
:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-sidebar-module-accordion-control:hover,:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6 {
background-color:rgb(108, 112, 134);
}
.fs-code-module-root,.fs-sidebar-play-queue-module-lyrics-section,.fs-right-sidebar-module-right-sidebar-container,.fs-sidebar-module-accordion-content,.fs-sidebar-module-container,.fs-code-module-root,.fs-item-table-list-module-item-table-container,.fs-window-bar-module-macos-container,.fs-button-module-root[data-variant="default"],.fs-text-input-module-input[data-variant="default"] {
background-color:rgb(49, 50, 68);
}
.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-sidebar-module-accordion-control:hover,.fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown, .fs-context-menu-module-content, .fs-popover-module-dropdown,[data-mantine-color-scheme="dark"] .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-selected::before, .fs-server-selector-module-button-group,.fs-page-header-module-background-image-overlay.fs-page-header-module-dark,[data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:focus-visible, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:focus-visible, .fs-action-icon-module-root[data-variant="default"]:hover,.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-hover-highlight-enabled.fs-item-table-list-column-module-row-hovered::before {
background-color:rgb(88, 91, 112);
}
.fs-textarea-module-input, .fs-action-icon-module-root[data-variant="default"], .fs-textarea-module-input,.fs-featured-genres-module-genre-container {
background-color:rgb(69, 71, 90);
}
.ag-header-viewport,.ag-row,.ag-body-horizontal-scroll-viewport,.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row-odd,.fs-main-content-module-main-content-container {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
}
.fs-player-bar-module-container {
background-color:color-mix(in srgb, rgb(49, 50, 68) 90%, rgb(57, 61, 78));
}
body {
color:rgb(245, 194, 231);
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
.full-screen-player-queue-header {
background-color:rgb(30, 30, 46);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
border-top-right-radius:10px !important;
border-top-left-radius:10px !important;
}

0 replies

jupys · 2025-12-11T04:27:18Z

jupys
Dec 11, 2025
Author

additional code for v1.0.0-beta.7, including some padding changes for albums, as well as a pink (rounded) scrollbar, and changes to the full screen queue:

old album view:

new album view:

new full screen queue:

.fs-full-screen-player-queue-module-grid-container {
    background-color: rgb(49, 50, 68);
    border-radius: 20px;
}
:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-sidebar-module-accordion-control:hover,:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-dropdown-menu-module-menu-item:hover {
background-color:rgb(108, 112, 134);
}
.fs-code-module-root,.fs-sidebar-play-queue-module-lyrics-section,.fs-right-sidebar-module-right-sidebar-container,.fs-sidebar-module-accordion-content,.fs-sidebar-module-container,.fs-code-module-root,.fs-item-table-list-module-item-table-container,.fs-window-bar-module-macos-container,.fs-button-module-root[data-variant="default"],.fs-text-input-module-input[data-variant="default"] {
background-color:rgb(49, 50, 68);
}
.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-sidebar-module-accordion-control:hover,.fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown, .fs-context-menu-module-content, .fs-popover-module-dropdown,[data-mantine-color-scheme="dark"] .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-selected::before, .fs-server-selector-module-button-group,.fs-page-header-module-background-image-overlay.fs-page-header-module-dark,[data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:focus-visible, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:focus-visible, .fs-action-icon-module-root[data-variant="default"]:hover,.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-hover-highlight-enabled.fs-item-table-list-column-module-row-hovered::before {
background-color:rgb(88, 91, 112);
}
.fs-textarea-module-input, .fs-action-icon-module-root[data-variant="default"], .fs-textarea-module-input,.fs-featured-genres-module-genre-container {
background-color:rgb(69, 71, 90);
}
.ag-header-viewport,.ag-row,.ag-body-horizontal-scroll-viewport,.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row-odd,.fs-main-content-module-main-content-container,.fs-modal-module-content,.fs-modal-module-header {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
}
.fs-player-bar-module-container {
background-color:color-mix(in srgb, rgb(49, 50, 68) 90%, rgb(57, 61, 78));
}
body {
color:rgb(245, 194, 231);
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
.full-screen-player-queue-header {
background-color: rgb(49, 50, 68);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
border-top-right-radius:10px !important;
border-top-left-radius:10px !important;
}
.fs-album-detail-content-module-detail-container {
padding: 5rem 2rem 5rem;
}
.fs-library-header-module-library-header {
    padding: 5rem 4rem 1rem;
}
.os-scrollbar-handle {
    border-radius: 10px;
    background: rgb(245, 194, 231);
}

0 replies

jupys · 2025-12-11T07:48:22Z

jupys
Dec 11, 2025
Author

if you'd rather a solid-colour for your full screen queue, use the following code:

.fs-full-screen-player-queue-module-grid-container {
    background-color: rgb(49, 50, 68);
    border-radius: 20px;
}
:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-sidebar-module-accordion-control:hover,:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-dropdown-menu-module-menu-item:hover {
background-color:rgb(108, 112, 134);
}
.fs-code-module-root,.fs-sidebar-play-queue-module-lyrics-section,.fs-right-sidebar-module-right-sidebar-container,.fs-sidebar-module-accordion-content,.fs-sidebar-module-container,.fs-code-module-root,.fs-window-bar-module-macos-container,.fs-button-module-root[data-variant="default"],.fs-text-input-module-input[data-variant="default"] {
background-color:rgb(49, 50, 68);
}
.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-sidebar-module-accordion-control:hover,.fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown, .fs-context-menu-module-content, .fs-popover-module-dropdown,[data-mantine-color-scheme="dark"] .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-selected::before, .fs-server-selector-module-button-group,.fs-page-header-module-background-image-overlay.fs-page-header-module-dark,[data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:focus-visible, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:focus-visible, .fs-action-icon-module-root[data-variant="default"]:hover,.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-hover-highlight-enabled.fs-item-table-list-column-module-row-hovered::before {
background-color:rgb(88, 91, 112);
}
.fs-item-table-list-module-item-table-container {
background-color:rgb(46, 46, 64);
}
.fs-textarea-module-input, .fs-action-icon-module-root[data-variant="default"], .fs-textarea-module-input,.fs-featured-genres-module-genre-container {
background-color:rgb(69, 71, 90);
}
.ag-header-viewport,.ag-row,.ag-body-horizontal-scroll-viewport,.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row-odd,.fs-main-content-module-main-content-container,.fs-modal-module-content,.fs-modal-module-header {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
}
.fs-player-bar-module-container {
background-color:color-mix(in srgb, rgb(49, 50, 68) 90%, rgb(57, 61, 78));
}
body {
color:rgb(245, 194, 231);
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
.full-screen-player-queue-header {
background-color: rgb(49, 50, 68);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
border-top-right-radius:10px !important;
border-top-left-radius:10px !important;
}
.fs-album-detail-content-module-detail-container {
padding: 5rem 2rem 5rem;
}
.fs-library-header-module-library-header {
    padding: 5rem 4rem 1rem;
}
.os-scrollbar-handle {
    border-radius: 10px;
    background: rgb(245, 194, 231);
}

0 replies

jupys · 2025-12-20T00:39:30Z

jupys
Dec 20, 2025
Author

updated for v1.0.1-beta1. i prefer my theme over the in-built catppuccin, so i'll continue to maintain this :3

.fs-full-screen-player-queue-module-grid-container {
    background-color: rgb(49, 50, 68);
    border-radius: 20px;
}
:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-sidebar-module-accordion-control:hover,:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6,.fs-dropdown-menu-module-menu-item:hover {
background-color:rgb(108, 112, 134);
}
.fs-code-module-root,.fs-sidebar-play-queue-module-lyrics-section,.fs-right-sidebar-module-right-sidebar-container,.fs-sidebar-module-accordion-content,.fs-sidebar-module-container,.fs-code-module-root,.fs-window-bar-module-macos-container,.fs-button-module-root[data-variant="default"],.fs-text-input-module-input[data-variant="default"] {
background-color:rgb(49, 50, 68);
}
.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-sidebar-module-accordion-control:hover,.fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown, .fs-context-menu-module-content, .fs-popover-module-dropdown,[data-mantine-color-scheme="dark"] .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-selected::before, .fs-server-selector-module-button-group,.fs-page-header-module-background-image-overlay.fs-page-header-module-dark,[data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:focus-visible, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:focus-visible, .fs-action-icon-module-root[data-variant="default"]:hover,.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root,.fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-hover-highlight-enabled.fs-item-table-list-column-module-row-hovered::before {
background-color:rgb(88, 91, 112);
}
.fs-item-table-list-module-item-table-container {
background-color:rgb(46, 46, 64);
}
.fs-textarea-module-input, .fs-action-icon-module-root[data-variant="default"], .fs-textarea-module-input,.fs-featured-genres-module-genre-container {
background-color:rgb(69, 71, 90);
}
.ag-header-viewport,.ag-row,.ag-body-horizontal-scroll-viewport,.ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row-odd,.fs-main-content-module-main-content-container,.fs-modal-module-content,.fs-modal-module-header,.fs-page-header-module-header {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
}
.fs-player-bar-module-container {
background-color:color-mix(in srgb, rgb(49, 50, 68) 90%, rgb(57, 61, 78)) !important;
}
body {
color:rgb(245, 194, 231);
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
.full-screen-player-queue-header {
background-color: rgb(49, 50, 68);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
border-top-right-radius:10px !important;
border-top-left-radius:10px !important;
}
.fs-album-detail-content-module-detail-container {
padding: 5rem 2rem 5rem;
}
.fs-library-header-module-library-header {
    padding: 5rem 4rem 1rem;
}
.os-scrollbar-handle {
    border-radius: 10px;
    background: rgb(245, 194, 231);
}

0 replies

jupys · 2026-01-29T02:19:28Z

jupys
Jan 29, 2026
Author

updated for 1.3.0, but i cant figure out how to make this look nicer like the built-in themes. if anyone has any ideas please let me know, i prefer my colour scheme over the build-in catppuccin

mine:

built in:

:root {
--mantine-radius-default: 32px !important;
--pill-radius: 1000rem !important;
}
.fs-context-menu-module-container div.fs-context-menu-module-left svg {
stroke-width:3.5px;
}
.mantine-Checkbox-input {
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
}
.fs-feature-carousel-module-carousel .fs-poster-card-module-image-container {
border-bottom-left-radius:22px !important;
border-bottom-right-radius:22px !important;
border-top-right-radius:22px !important;
border-top-left-radius:22px !important;
overflow-y:hidden;
overflow-x:hidden;
}
.fs-feature-carousel-module-carousel {
border-bottom-left-radius:22px;
border-bottom-right-radius:22px;
border-top-right-radius:22px;
border-top-left-radius:22px;
height:0px;
}
.fs-sidebar-item-module-inner svg {
stroke-width:1.8px;
}
.mantine-Button-root {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
padding-left:18px;
padding-right:18px;
}
.mantine-Modal-content, .mantine-Popover-dropdown, .mantine-Input-input, .fs-poster-card-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
}
.fs-feature-carousel-module-carousel .fs-image-module-image-container {
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-right-radius:16px;
border-bottom-left-radius:16px;
overflow-x:hidden;
overflow-y:hidden;
}
.fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown {
overflow-y:hidden;
overflow-x:hidden;
padding-left:0px;
padding-bottom:0px;
padding-right:0px;
padding-top:0px;
border-top-left-radius:22px;
border-top-right-radius:22px;
border-bottom-right-radius:22px;
border-bottom-left-radius:22px;
}
.fs-full-screen-player-queue-module-grid-container::before, .fs-library-header-module-image, .mantine-Pill-root, .fs-full-screen-player-image-module-image {
border-top-left-radius:32px;
border-top-right-radius:32px;
border-bottom-right-radius:32px;
border-bottom-left-radius:32px;
}
.fs-full-screen-player-queue-module-grid-container {
background-color:rgb(49, 50, 68);
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
}
:where([data-mantine-color-scheme="dark"]) .m_7cda1cd6, .fs-sidebar-module-accordion-control:hover, :where([data-mantine-color-scheme="dark"]) .m_7cda1cd6, .fs-dropdown-menu-module-menu-item:hover {
background-color:rgb(108, 112, 134);
}
.fs-code-module-root, .fs-sidebar-play-queue-module-lyrics-section, .fs-right-sidebar-module-right-sidebar-container, .fs-sidebar-module-accordion-content, .fs-sidebar-module-container, .fs-code-module-root, .fs-window-bar-module-macos-container, .fs-button-module-root[data-variant="default"], .fs-text-input-module-input[data-variant="default"] {
background-color:rgb(49, 50, 68);
}
.fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root, .fs-sidebar-module-accordion-control:hover, .fs-context-menu-module-container, .fs-dropdown-menu-module-menu-dropdown, .fs-context-menu-module-content, .fs-popover-module-dropdown, [data-mantine-color-scheme="dark"] .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-selected::before, .fs-server-selector-module-button-group, .fs-page-header-module-background-image-overlay.fs-page-header-module-dark, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-button-module-root[data-variant="subtle"]:focus-visible, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:hover, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:active, [data-mantine-color-scheme="dark"] .fs-action-icon-module-root[data-variant="subtle"]:focus-visible, .fs-action-icon-module-root[data-variant="default"]:hover, .fs-select-module-input[data-variant="default"], .fs-color-input-module-input[data-variant="default"], [data-mantine-color-scheme="dark"] .m_9307d992, .fs-number-input-module-input[data-variant="default"], .fs-multi-select-module-input[data-variant="default"], .fs-segmented-control-module-root, .fs-item-table-list-column-module-container.fs-item-table-list-column-module-data-row.fs-item-table-list-column-module-row-hover-highlight-enabled.fs-item-table-list-column-module-row-hovered::before {
background-color:rgb(88, 91, 112);
}
.fs-item-table-list-module-item-table-container {
background-color:rgb(46, 46, 64);
}
.fs-textarea-module-input, .fs-action-icon-module-root[data-variant="default"], .fs-textarea-module-input, .fs-featured-genres-module-genre-container {
background-color:rgb(69, 71, 90);
}
.ag-header-viewport, .ag-row, .ag-body-horizontal-scroll-viewport, .ag-row-odd {
background-color:rgb(57, 61, 78) !important;
}
.ag-row-odd, .fs-main-content-module-main-content-container, .fs-modal-module-content, .fs-modal-module-header, .fs-page-header-module-header {
background-color:rgb(40, 44, 60);
}
:root .ag-theme-alpine-dark {
--ag-background-color: rgb(40, 44, 60) !important;
--ag-header-background-color: rgb(40, 44, 60) !important;
}
.fs-player-bar-module-container {
background-color:color-mix(in srgb, rgb(49, 50, 68) 90%, rgb(57, 61, 78)) !important;
}
body {
color:rgb(245, 194, 231);
}
.fs-player-button-module-main {
background-color:rgb(245, 194, 231) !important;
}
.full-screen-player-queue-header {
background-color:rgb(49, 50, 68);
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar {
border-bottom-left-radius:10px !important;
border-bottom-right-radius:10px !important;
border-top-right-radius:10px !important;
border-top-left-radius:10px !important;
}
.os-scrollbar-handle {
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
background-image:initial;
background-position-x:initial;
background-position-y:initial;
background-size:initial;
background-repeat:initial;
background-attachment:initial;
background-origin:initial;
background-clip:initial;
background-color:rgb(245, 194, 231);
}

1 reply

jeffvli Jan 29, 2026
Maintainer

You need to override header overlay background-image property which uses a linear gradient and css variables which targets the original theme.

.fs-library-background-overlay-module-overlay {
background-image:linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, rgb(40, 44, 60) 100%), var(--theme-background-noise);
}

This is the original:

background-image: linear-gradient(180deg, rgb(0 0 0 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)

Because the linear gradient targets the original theme's background, it results in an ugly transition between colors.

Uh oh!

catppuccin mocha theme 😻 #1276

Uh oh!

jupys Nov 26, 2025

Replies: 8 comments · 1 reply

Uh oh!

jupys Nov 26, 2025 Author

Uh oh!

Uh oh!

jupys Dec 4, 2025 Author

Uh oh!

Uh oh!

jupys Dec 4, 2025 Author

Uh oh!

jupys Dec 6, 2025 Author

Uh oh!

Uh oh!

jupys Dec 11, 2025 Author

Uh oh!

jupys Dec 11, 2025 Author

Uh oh!

jupys Dec 20, 2025 Author

Uh oh!

jupys Jan 29, 2026 Author

Uh oh!

Uh oh!

jeffvli Jan 29, 2026 Maintainer

jupys
Nov 26, 2025

Replies: 8 comments 1 reply

jupys
Nov 26, 2025
Author

jupys
Dec 4, 2025
Author

jupys
Dec 4, 2025
Author

jupys
Dec 6, 2025
Author

jupys
Dec 11, 2025
Author

jupys
Dec 11, 2025
Author

jupys
Dec 20, 2025
Author

jupys
Jan 29, 2026
Author

jeffvli Jan 29, 2026
Maintainer