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
Size203 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.25
@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 dropdown mcis "Iconset (Media Controls)" {
phosphor "Phosphor" <<<EOT
ph EOT;
spoticons "Spotify" <<<EOT
sp EOT;
fluentfill "Fluent Filled" <<<EOT
ff EOT;
fluentreg "Fluent Outlined" <<<EOT
fo 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 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 gdpr "Cookie Notice" {
gdpr-on "Show" <<<EOT
display:inherit; EOT;
gdpr-off "Hide" <<<EOT
display:none; 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 color bg1 "Background color" #111
@advanced dropdown promoted "EXPERIMENTAL: Hide promoted tracks (Requires Chromium 105+. See: https://caniuse.com/css-has)" {
promo-off "Hide" <<<EOT
display:none; EOT;
promo-on "Show" <<<EOT
display:inherit; 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');
/* Icon select */
@import url('https://cdn.jsdelivr.net/gh/JunkiEDM/scultradark/spoticons.css');
@import url('https://cdn.jsdelivr.net/gh/phosphor-icons/phosphor-icons/src/css/icons.css');
@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");
}
/* navmenu icons */
:root {
--ic-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-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-stream: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" stroke="white" fill-rule="evenodd" d="M4.25 14.5c0-.69.56-1.25 1.25-1.25h21c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-21c-.69 0-1.25-.56-1.25-1.25v-13Zm1.5.25v12.5h20.5v-12.5H5.75ZM8.25 9c0-.414.336-.75.75-.75h14c.414 0 .75.336.75.75s-.336.75-.75.75H9c-.414 0-.75-.336-.75-.75Zm3-5c0-.414.336-.75.75-.75h8c.414 0 .75.336.75.75s-.336.75-.75.75h-8c-.414 0-.75-.336-.75-.75Z"/></svg>');
--ic-stream-active: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="white" stroke="white" fill-rule="evenodd" d="M4.25 14.5c0-.69.56-1.25 1.25-1.25h21c.69 0 1.25.56 1.25 1.25v13c0 .69-.56 1.25-1.25 1.25h-21c-.69 0-1.25-.56-1.25-1.25v-13Zm4-5.5A.75.75 0 0 1 9 8.25h14a.75.75 0 0 1 0 1.5H9A.75.75 0 0 1 8.25 9Zm3-5a.75.75 0 0 1 .75-.75h8a.75.75 0 0 1 0 1.5h-8a.75.75 0 0 1-.75-.75Z"/></svg>');
--ic-stream-old: 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-stream-active-old: 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-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-.12L21.75 6.5a1.13 1.13 0 0 0-1.07-.74Z" fill="white" stroke="white"/></svg>');
--ic-library-active: 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 2.75 2.58V25a2.75 2.75 0 0 1-5.5.17V7A2.75 2.75 0 0 1 5 4.25Zm8 0a2.75 2.75 0 0 1 2.74 2.58l.01.17v18a2.75 2.75 0 0 1-5.5.17V7A2.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.53Z" fill="white" stroke="white"/></svg>');
}
:root {
--ph-font: Phosphor;
--ph-play: "\fd5a";
--ph-pause: "\fd38";
--ph-next: "\fdb7";
--ph-prev: "\fdb5";
--ph-repeat: "\f96b";
--ph-repeat-1: "\f96c";
--ph-shuffle: "\f994";
--ph-volume-0: "\fdd2";
--ph-volume-1: "\fdcf";
--ph-volume-2: "\fdce";
--sp-font: glue1-spoticon;
--sp-play: "\f132";
--sp-pause: "\f130";
--sp-next: "\f148";
--sp-prev: "\f146";
--sp-repeat: "\f13e";
--sp-repeat-1: "\f200";
--sp-shuffle: "\f144";
--sp-volume-0: "\f1EF";
--sp-volume-1: "\f206";
--sp-volume-2: "\f15e";
--ff-font: FluentSystemIcons-Resizable;
--ff-play: "\ea69";
--ff-pause: "\e995";
--ff-next: "\e922";
--ff-prev: "\eaa5";
--ff-repeat: "\f002";
--ff-repeat-1: "\f004";
--ff-shuffle: "\f000";
--ff-volume-0: "\ec49";
--ff-volume-1: "\ec41";
--ff-volume-2: "\ec43";
--fo-font: FluentSystemIcons-Resizable;
--fo-play: "\ea6a";
--fo-pause: "\e996";
--fo-next: "\e923";
--fo-prev: "\eaa6";
--fo-repeat: "\f003";
--fo-repeat-1: "\f005";
--fo-shuffle: "\f001";
--fo-volume-0: "\ec4a";
--fo-volume-1: "\ec42";
--fo-volume-2: "\ec44";
}
/* Required colours */
:root {
--shd-modal-width: 880px;
--shd-accent-primary: #f50;
--shd-accent-secondary: #f30;
--shd-accent-orange: hsl(calc(20deg + /*[[hue]]*/deg) 100% 61%);
--shd-accent-blue: hsl(calc(203deg + /*[[blu]]*/deg) 100% 65%);
--shd-bg-primary: /*[[bg1]]*/;
--shd-bg-lighter: #1a1a1a;
--shd-bg-darker: #0d0d0d;
--shd-bg-translucent: #1119;
--shd-bg-dropdown: #191919aa;
--shd-ds-small: drop-shadow(0 2px 5px #0009);
--background-surface-color: var(--shd-bg-primary);
--background-highlight-color: #303030;
--background-light-color: #fff;
--background-dark-color: var(--shd-bg-primary);
--font-primary-color: #fff;
--font-secondary-color: #999;
--font-special-color: #f50;
--font-link-color: #3370dd;
--font-error-color: #d61348;
--font-light-color: #fff;
--font-dark-color: #111;
--button-primary-background-color: #fff;
--button-primary-font-color: #000;
--button-secondary-background-color: #303030;
--button-secondary-font-color: #fff;
--button-disabled-background-color: #303030;
--button-disabled-font-color: #999;
--button-special-background-color: #f50;
--button-special-font-color: #fff;
--button-light-background-color: #fff;
--button-light-font-color: #000;
--button-dark-background-color: ...