A dark skin that keeps the classic blue/purple color scheme.
Mixcloud Midnight Theme by BoffinBrain
Details
AuthorBoffinBrain
LicenseCC-BY-4.0
Categorymixcloud
Created
Updated
Size6.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
A dark skin that keeps the classic blue/purple color scheme.
Tested and working on the various Home, Feed and Account Settings pages. NOT tested on Creator Tools pages, since I am not a creator.
I also highly recommend that you use my Mixcloud Accessibility Fixes style for better popup menus and scrollbars on the playlist.
Version History
V1.1.0 - 2025-02-26
Updated core variables (Mixcloud devs have been adding more of them. Good!)
Tweaked the colors of the waveforms beside each mix (possible thanks to the new core variables).
Fixed some class name selectors that are fragile but necessary.
V1.0.1 - 2024-12-21
Made most selectors far more resilient to class-name changes.
V1.0.0 - 2024-12-18
Initial release.
Source code
/* ==UserStyle==
@name Mixcloud Midnight Theme
@namespace github.com/openstyles/stylus
@version 1.1.0
@description A dark skin that keeps the classic blue/purple color scheme.
@author BoffinBrain
==/UserStyle== */
@-moz-document domain("mixcloud.com") {
/*
My apologies for all the poorly-performing attribute selectors in this project.
Unfortunately, like many big companies, Mixcloud devs use some kind of design
framework that randomizes the class names with every change they make, which
makes all CSS mods extremely fragile.
*/
/* Keep the original theme variables for the following elements */
div[class^="styles__HQAudioTag"], /* HQ badge over mix artwork */
div[class^="styles__TagWrapper"], /* PRO badge on Creator Dashboard */
div[class^="styles__PopoverContentWrapper"], /* Popup menu */
div[data-testid="playerHero"], /* Top section of mix page */
div.bGZWVW[class^="styles__FullWidthHeader"], /* Nav bar when search is open */
div[class^="Search__SearchContainer"], /* Search results */
div[class^="playerAlreadyOpen"], /* Player-related panels */
.player-height-placeholder,
.player-open,
.up-next-open {
--color-core-primary: #5000FF;
--color-core-primary-hover: #4100CC;
--color-core-secondary: #F778EB;
--color-core-secondary-hover: #F555E5;
--color-core-premium: #F3F810;
--color-core-premium-hover: #E4E807;
--color-core-subtle: #D2D3D7;
--color-core-success: #E3FAF0;
--color-core-warning: #F9FBB2;
--color-core-info: #E2E3FF;
--color-core-error: #FDE1F7;
--color-core-disabled: #61667A;
--color-core-important: #D20442;
--color-core-important-hover: #EF054B;
--color-core-confirm: #0CC281;
--color-core-confirm-hover: #0BAD74;
--color-core-black: #000000;
--color-text-primary: #171C2B;
--color-text-secondary: #61667A;
--color-text-tertiary: #FFFFFF;
--color-text-hover: #2A3145;
--color-text-link: #171C2B;
--color-text-link-hover: #61667A;
--color-surface-primary: #FFFFFF;
--color-surface-primary-hover: #F7F7F7;
--color-surface-secondary: #171C2B;
--color-surface-secondary-hover: #22293C;
--color-surface-tertiary: #F4F4F5;
--color-surface-tertiary-hover: #ECECEE;
--color-surface-subtle: #F4F4F54D;
--color-surface-subtle-hover: #F4F4F580;
--color-surface-raised: #FFFFFF;
--color-border-primary: #F4F4F5;
--color-border-secondary: #D2D3D7;
--color-twitter: #1DA1F2;
--color-twitter-dark: #0c85d0;
--color-facebook: #3360FF;
--color-facebook-dark: #0038ff;
--color-facebook-light: #6688FF;
--color-focus-indicator: #FF8C00;
--color-waveform-active-default: #D2D3D7;
--color-waveform-active-listened: #5000FF;
--color-waveform-active-interacted: #5000ff80;
--color-waveform-initial-default: #D2D3D7;
--color-waveform-initial-listened: #61667A;
--color-waveform-initial-interacted: #61667a80;
}
/* Change the theme variables for the rest of the page */
:root {
--color-core-primary: #a060ff;
--color-core-secondary: #f778eb;
--color-core-premium: #5060ab;
--color-core-premium-hover: #34f;
--color-core-subtle: #334;
--color-text-primary: #fff;
--color-text-secondary: #838999;
--color-text-tertiary: #fff;
--color-text-hover: #ddf;
--color-text-link: #b0b8ff;
--color-surface-primary: #10131a;
--color-surface-secondary: #171c2b;
--color-surface-tertiary: #404460;
--color-surface-tertiary-hover: #404460;
--color-surface-subtle: #00000080;
--color-card-background-light: #00000080;
--color-waveform-active-default: #86a;
--color-waveform-active-listened: #f6f;
--color-waveform-active-interacted: #fff;
--color-waveform-initial-default: #485566;
--color-waveform-initial-listened: #99f;
--color-waveform-initial-interacted: #fff;
}
body {
background: var(--color-surface-primary);
}
/* Nav */
menu[data-menu="top-level"] > li > button::after {
filter: invert(1) !important;
}
div[class^="styles__DropdownMenu"] {
background: var(--color-surface-secondary);
color: var(--color-text-primary);
}
/* Home Sidebar */
nav[class^="styles__LeftNavWrapper"] > a {
color: var(--color-text-primary);
}
nav[class^="styles__LeftNavWrapper"] > a > svg > path {
fill: var(--color-text-primary);
}
/* Genre tag rankings on mix details */
span[class^="styles__GenreTagPosition"] {
background: var(--color-surface-secondary);
}
/* Sidebar on Profile page */
ul[class^="styles__OptionContainer"],
div[class^="styles__ProfileMeta-"] {
box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 22px;
}
div[class^="styles__Expander-"] > button > svg > path,
a[class^="button__InlineAnchor-"] > svg > path {
color: var(--color-text-hover);
fill: var(--color-text-hover) !important;
}
/* Scrolling tabs nav on Profile page */
main[class^="styles__ProfileTabs"] .scroll-bar {
background: var(--color-surface-secondary);
color: var(--color-text-primary);
box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 10px;
}
/* Links next to left/right sidebar headings */
h4 > a[class^="button__StyledLink-"] {
color: var(--color-text-secondary);
}
/* Account Settings */
.incomplete-nag {
background: var(--color-card-background-light) !important;
}
.incomplete-nag .meter-inner {
background: var(--color-surface-subtle) !important;
}
.bWufsN.percentage {
color: var(--color-text-secondary);
}
.fieldset,
.dtjSYs,
.diRxPC,
.hkiJMt,
div[class^="DEPRECATED_Forms__DEPRECATEDFieldset"] {
border-color: var(--color-core-subtle);
}
div[class^="DEPRECATED_Forms__DEPRECATEDFieldset"] label > b {
color: var(--color-text-primary);
font-weight: normal
}
}