Skip to content

Mixcloud Dark 2024 by FoxxMD

Screenshot of Mixcloud Dark 2024

Details

AuthorFoxxMD

LicenseCC0-1.0

Categorymixcloud.com

Created

Updated

Size5.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Barebones dark theme for Mixcloud

Notes

Does not convert all elements to dark versions, just the main feed page and any text required to interact with mixes on it.

Source code

/* ==UserStyle==
@name         MixCloud Dark 2024
@namespace    http://github.com/FoxxMD
@version      20240410.0.0
@description  A barebones mixcloud dark theme
@author       FoxxMD
@license      CC0-1.0==/UserStyle== */

@-moz-document domain("mixcloud.com") {
.player-follow-popover,
.player-comment-popover {
 display: none !important;
}

    body {
        color:rgb(152, 154, 162);
    }


a.announcement.webby {
    display: none;
}
    
    div[class*="CardWrapper"]:hover::before {
        opacity: 0.1;
    }
    
    a:hover,a[class*="Link"]:hover,p[class*="Link"]:hover {
        color: white !important;
    }
    
        div[class*="SideNavWrapper"] [class*="Sticky_"],
        nav[class*="SideNavBar__Nav"]{
        background-color: #242424;
    }

    ul[class*="styles__PillProfileNav"] a,
    section[class*="CreatorDashboard__Section"] a[class*="TitleLink"],
    div[class*="styles__ProfileContent"] a[class*="TitleLink"],
    section[class*="CreatorDashboard__Section"] div[class*="TitleWrapper"] button,
    div[class*="AudioCardTitle"] a,
    div[class*="PlayButtonWrapper"] a[class*="TitleLink"],
    div[class*="CreatorDashboard__SideNavWrapper"] div[class*="UserNameWrapper"] p,
    a[class*="AuthorLink"] span{
        color:rgb(152, 154, 162);
    }
    
    [class*="AudioCardActionSheet"] button {
        background-color: transparent;
    }
    [class*="AudioCardActionSheet"] button svg path {
        fill:rgb(149, 151, 162);
    }
    [class*="Action__ActionContainer"] {
        border: 1px solid rgb(149, 151, 162);
    }
    
    div[class*="PlayButtonWrapper"] svg,
    div[class*="PlayButtonWrapper"] svg circle{
        stroke:rgb(152, 154, 162) !important;
        fill: none;
    }
    div[class*="PlayButtonWrapper"] button[class*="play-button"] {
        background: var(--color-core-primary) !important;
    }
    
    div[class*="styles__ProfileContent"] circle.ring-remaining,
    section[class*="CreatorDashboard__Section"] circle.ring-remaining{
        stroke:rgb(152, 154, 162);
    }
    div[class*="styles__ProfileContent"] circle.ring-listened,
    section[class*="CreatorDashboard__Section"] circle.ring-listened{
        stroke:rgb(235, 235, 236);
    }
    
        section[class*="CreatorDashboard__Section"] div[class*="AudioCardProgress__ProgressContainer"]{
        background-color:rgb(166, 166, 166);
    }
    
    [class*="UserCardContainer"], [class*="UserCardButton"] {
        background-color: transparent;
        border: 1px solid rgb(149, 151, 162);
       
    }
    [class*="UserCardContainer"] p,
    [class*="UserCardButton"] span,
    [class*="HeaderText"],
    [class*="SideBarFooter"]{
        color: white;
    }

div.announcement.job-ad.events-job-ad.ng-scope {
    display: none;
}

div.announcement.job-ad.newbiz-ad.ng-scope {
    display: none;
}

div.big-tag-cloud.ng-scope {
    background-color: #242424;
}

div.cf.ng-scope,.cf {
    background-color: #242424;
}

div.chained-content.content-comment.cf.ng-scope {
    display: none;
}

#react-root section,
.site-wrapper {
    background-color: #242424;
}

nav a.active {
	color: #ab85ff;
}

div.contents-inner-wrapper.cf {
    background-color: #242424;
}

div.incomplete-nag.incomplete-good {
    display: none;
}

div.inner-container.cf {
    background-color: #242424;
}

div.nav-fade-bottom {
    background-color: #000000;
    display: none;
}

div.tag-cloud-outer-container.ng-scope {
    background-color: #242424;
}

h1.discover-title.default-title {
    background-color: #242424;
}

p.profile-location {
    border-color: #212121;
    color: #787478;
}

section.scroll-bar.show-scroll-bar.fixed-scroll-bar {
    background-color: #242424;
}

span.small-card-info b {
    color: #bdb3bd;
}

textarea.ng-pristine.ng-invalid.ng-invalid-required {
    background-color: #1f1e1f;
}

.popover {
	background: #242424;
}

.big-tag-cloud {
	background: #242424;
    padding: 15px;
}

.tag-cloud-inner {
	background: #242424;
}

.carousel-arrow-left {
    left: -10px;
}

.carousel-arrow-right {
    right: -10px;
}

.card {
    border-bottom-color: #707273;
}

.card-waveform img {
    filter: invert(75%);
}

.card .card-show-length {
    color: #a6aeb5;
    text-shadow: -1px -1px 0 #191919, 1px -1px 0 #1b1b1b, -1px 1px 0 #0a0a0a, 1px 1px 0 #000;
}
.play-button {
    filter: brightness(200%);
}

.card-waveform:after {
    background-color: transparent;
}
.card-actions .btn {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #5d5e61
}

.tag {
    border-color: #5d5e61;
}

.jKwuem {
    color: #a0a6bf;
}

.diYcBm {
    background-color: #808080;
}
    

/** styles__UserCardContainer */

.ePbPOS {
	background-color: transparent;
}
.bDxmym {
    color: #636674;
}
.emILyH {
	background-color: #5000ff;
}

.sidebar .gfPDaW,
.sidebar .dxeYUW {
    color: #636674;
}
    


.sidebar-small nav>a:hover+ul,
.sidebar-small nav div>a:hover+ul {
    background: #2b2b2b;
}

@media (max-width: 1320px) {
	.inner-container-dashboard .sidebar-small {
		background: #28394a;
	}
    
    .container-wide .contents-inner-wrapper {
		box-shadow: none;
    }
}
}

Reviews

No reviews yet.