A functional, modern redesign of the outdated Soundcloud UX.
Soundcloud Hyper Dark by junki
Imported and mirrored from https://raw.githubusercontent.com/JunkiEDM/scultradark/master/SC-HyperDark.user.css
Details
Authorjunki
LicenseBSD 2-Clause
Categorysoundcloud.com
Created
Updated
Size286 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Issues or Suggestions can be made on the GitHub's Issues page: GitHub.com/JunkiEDM/scultradark
Credits:
Primarily based on 'SoundCloud Ultra Dark' by IgChi
'SoundCloud - Quite Dark' by pawelos076232
❌ 'Custom Waveform Hue' by CriAsuDre (No longer included as of v0.9.120)
Font used: 'Inter' by @rsms
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Soundcloud Hyper Dark
@description A functional, modern redesign of the outdated Soundcloud UX.
@namespace https://github.com/JunkiEDM
@author JunkiEDM, IgChi, pawelos076232, tadghh (ec719ea)
@version 0.9.49
@homepageURL https://github.com/JunkiEDM/scultradark
@supportURL https://github.com/JunkiEDM/scultradark/issues
@license BSD 2-Clause
@preprocessor uso
@advanced text user "Profile Name" "Profile"
@advanced text hue "Orange Hue" "-20"
@advanced text blu "Blue Hue" "15"
@advanced text font "Font" "Inter"
@advanced range avradius "Avatar Roundedness" [50, 0, 50, 2.5]
@advanced dropdown mcis "Iconset (Media Controls)" {
phosphor "Phosphor" <<<EOT
ph EOT;
phosphorol "Phosphor Outlined" <<<EOT
po EOT;
spoticons "Spotify" <<<EOT
sp EOT;
fluentfill "Fluent Filled" <<<EOT
ff EOT;
fluentreg "Fluent Outlined" <<<EOT
fo EOT;
picon "Picon (Low quality)" <<<EOT
pi EOT;
}
@advanced dropdown dist "Soundcloud for Artists Button" {
dist-on "Show" <<<EOT
--w1:46px;--w2:46px; EOT;
dist-off "Hide" <<<EOT
--w1:0px;--w2:0px; EOT;
}
@advanced dropdown probdg "Next Pro profile badges" {
probdg-off "Hide" <<<EOT
.proUnlimitedBadge, .creatorBadge {
display: none;
} EOT;
probdg-a "Style A" <<<EOT
.proUnlimitedBadge, .creatorBadge {
margin-right: 1px;
margin-top: 7px;
margin-bottom: -12px;
display: flex;
}
#app .l-container #content .l-vertical-bar .userInfoBar .userInfoBar__buttons {
bottom: 118px;
}
:is(.proUnlimitedBadge, .creatorBadge) svg > g[clip-path="url(#a)"] {
transform: translateX(78px)
}
:is(.proUnlimitedBadge, .creatorBadge) svg > path[fill^="#fff"] {
transform: translateX(-16px);
}
:is(.proUnlimitedBadge, .creatorBadge) svg > rect[fill^="#000"] {
fill: #0000 !important;
} EOT;
probdg-b "Style B" <<<EOT
.proUnlimitedBadge, .creatorBadge {
display: flex;
position: absolute;
top: 198px;
right: -124px
}
:is(.proUnlimitedBadge, .creatorBadge) svg > rect[fill^="#000"] {
fill: #0000 !important;
} EOT;
}
@advanced dropdown widget "Style embeds" {
embeds-on "Yes" <<<EOT
/**\/ EOT;
embeds-off "No" <<<EOT
/* EOT;
}
@advanced dropdown sort-pl "Playlist sorting mode" {
sort-pl-reg "Normal" <<<EOT
column EOT;
sort-pl-rev "Reversed" <<<EOT
column-reverse EOT;
}
@advanced dropdown sort-fol "Following list sorting mode" {
sort-fol-reg "Normal" <<<EOT
wrap EOT;
sort-fol-rev "Reversed" <<<EOT
wrap-reverse EOT;
}
@advanced dropdown sin "Insights on sidebar" {
stats-on "Show" <<<EOT
height:100%; EOT;
stats-off "Hide" <<<EOT
height:0; EOT;
}
@advanced dropdown hin "Artist Insights on homepage" {
hin-on "Show Both" <<<EOT EOT;
hin-a "Latest Upload only" <<<EOT
.artistConnectExperimentWrapper {
display: none;
} EOT;
hin-b "Artist Connect only" <<<EOT
.l-content > div > div[classname*="latestUpload"]:not(.modular-home-mixed-selection) > div:has(.mixedModularHome__item .latestUploadContainer) {
display: none;
} EOT;
hin-off "Hide Both" <<<EOT
[classname*="latestUpload"], [classname*="artistConnect"], .artistConnectExperimentWrapper, .mixedModularHome__item:has(.artistConnectExperimentWrapper) {
display:none;
} EOT;
}
@advanced dropdown gdpr "Cookie Notice" {
gdpr-on "Show" <<<EOT
display:inherit; EOT;
gdpr-off "Hide" <<<EOT
display:none; EOT;
}
@advanced dropdown promoted "Promoted tracks" {
promo-off "Hide" <<<EOT
display:none; EOT;
promo-on "Show" <<<EOT
display:revert; EOT;
}
@advanced dropdown prban "Promotion Banners" {
prban-off "Hide" <<<EOT
display:none; EOT;
prban-on "Show" <<<EOT
display:block; EOT;
}
@advanced dropdown gopro "Soundcloud Go/Next Links" {
gopro-off "Hide" <<<EOT
display:none; EOT;
gopro-on "Show" <<<EOT
display:flex; EOT;
}
@advanced dropdown adblk "Other Ads" {
adblk-off "Hide" <<<EOT
display:none; EOT;
adblk-on "Show" <<<EOT
display:revert; EOT;
}
@advanced dropdown evt "Events on homepage" {
evt-on "Show" <<<EOT
display:revert; EOT;
evt-off "Hide" <<<EOT
display:none; EOT;
}
@advanced dropdown logo "Sidebar logo" {
logo-on "Show" <<<EOT EOT;
logo-off "Hide" <<<EOT
.sc-classic .show .header__logo {
display: none;
}
.header__right {
top: 14px;
}
.header__left {
top: 108px;
}
.header__middle {
top: 288px;
}
.sc-classic .l-search .l-fixed-left, .l-search .l-fixed-left {
top: 338px;
}
.searchOptions__scrollable {
height: 515px !important;
} EOT;
}
@advanced color bg1 "Background color" #111
@advanced dropdown lowmotion "Reduce motion" {
embeds-off "No" <<<EOT
/* EOT;
embeds-on "Yes" <<<EOT
/**\/ EOT;
}
@advanced dropdown home "Home button style" {
regular "Regular" <<<EOT
EOT;
old "Old" <<<EOT
-old EOT;
}
@advanced dropdown feed "Feed button style" {
regular "Regular" <<<EOT
EOT;
old "Old" <<<EOT
-old EOT;
}
@advanced dropdown libs "Library button style" {
regular "Regular" <<<EOT
EOT;
old "Old" <<<EOT
-old EOT;
}
==/UserStyle== *//* --- REMOVE THIS LINE TO SHOW ADVANCED FILTER CONTROLS ---
@advanced dropdown adv "Enable Advanced Filters?" {
adv-off "Disabled" <<<EOT
/* ---[ Disabled ]--- *\/ EOT;
adv-on "Enabled" <<<EOT
/*[[fil]]*\/ EOT;
}
@advanced text fil "Advanced CSS Filters" "brightness(100%) contrast(100%) saturate(100%)"
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
/* Font imports */
@import url('https://rsms.me/inter/inter.css');
@import url('https://style.sndcdn.com/css/interstate-a86f07cf94ae5a496b24.css');
/* Icon select */
@import url('https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/spoticons.css');
@font-face {
font-family: "Phosphor";
src: url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.woff2") format("woff2"),
url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.woff") format("woff"),
url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.ttf") format("truetype"),
url("https://unpkg.com/@phosphor-icons/web/src/regular/Phosphor.svg#Phosphor") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "Phosphor-Fill";
src: url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.woff2") format("woff2"),
url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.woff") format("woff"),
url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.ttf") format("truetype"),
url("https://unpkg.com/@phosphor-icons/web/src/fill/Phosphor-Fill.svg#Phosphor-Fill") format("svg");
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face {
font-family: "FluentSystemIcons-Resizable";
src: url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.woff2") format("woff2"),
url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.woff") format("woff"),
url("https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/fonts/FluentSystemIcons-Resizable-mod.ttf") format("truetype");
}
@font-face {
font-family: picon;
src: url(https://unpkg.com/picon);
}
/* navmenu icons */
:root {
--ic-old-home: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m16 3.08 14.44 10.31-.88 1.22-1.81-1.3v15.44h-8.5V21a3.25 3.25 0 1 0-6.5 0v7.75h-8.5V13.31l-1.81 1.3-.88-1.22L16 3.08Zm0 1.84L5.75 12.24v15.01h5.5V21a4.75 4.75 0 0 1 9.5 0v6.25h5.5v-15L16 4.91Z" fill="white" stroke="white"/></svg>');
--ic-old-home-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2.77 30.58 13.2l-1.16 1.62-1.67-1.19v15.13h-8.5V21a3.25 3.25 0 1 0-6.5 0v7.75h-8.5V13.62l-1.67 1.2-1.16-1.63L16 2.77Z" fill="white" stroke="white"/></svg>');
--ic-old-stream: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.35 4.21A2.75 2.75 0 0 1 13 2.25h6.32a2.75 2.75 0 0 1 2.64 3.54L20 12.25h2.47a2.75 2.75 0 0 1 1.76 4.86L8.57 30.17l3.42-11.42H6l4.36-14.54ZM13 3.75c-.55 0-1.04.36-1.2.9l-3.78 12.6h6l-2.58 8.58 11.85-9.87c.9-.75.36-2.2-.8-2.2h-4.49l2.52-8.4c.24-.8-.36-1.61-1.2-1.61H13Z" fill="white" stroke="white"/></svg>');
--ic-old-stream-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M12.99 2.25c-1.22 0-2.29.8-2.64 1.96L6 18.75h6L8.56 30.17l15.68-13.06a2.75 2.75 0 0 0-1.76-4.86H20l1.94-6.46a2.75 2.75 0 0 0-2.64-3.54H13Z" fill="white" stroke="white"/></svg>');
--ic-old-library: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5 4.25A2.75 2.75 0 0 1 7.75 7v18a2.75 2.75 0 1 1-5.5 0V7A2.75 2.75 0 0 1 5 4.25Zm8 0A2.75 2.75 0 0 1 15.75 7v18a2.75 2.75 0 1 1-5.5 0V7A2.75 2.75 0 0 1 13 4.25Zm7.68 0c1.05 0 1.99.62 2.4 1.56l.08.17 6.63 18.24a2.63 2.63 0 0 1-4.88 1.97l-.07-.17-6.63-18.24a2.63 2.63 0 0 1 2.47-3.53ZM5 5.75c-.69 0-1.25.56-1.25 1.25v18a1.25 1.25 0 0 0 2.5 0V7c0-.69-.56-1.25-1.25-1.25Zm8 0c-.69 0-1.25.56-1.25 1.25v18a1.25 1.25 0 0 0 2.5 0V7c0-.69-.56-1.25-1.25-1.25Zm7.68 0c-.74 0-1.27.7-1.1 1.4l.04.12 6.63 18.24a1.13 1.13 0 0 0 2.16-.66l-.03-....