Base code from dark-theme-soundcloud
, but i made the background pitch black and actually maintain it
Amoled Dark SoundCloud theme/mode by Meqativ
Details
AuthorMeqativ
LicenseNo License
Categorysoundcloud.com
Created
Updated
Size10 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Amoled Dark SoundCloud theme/mode
@version 20231005.00.01
@namespace userstyles.world/user/Meqativ
@description read the name
@author meqativ, thomasbnt
@license No License
==/UserStyle== */
@-moz-document domain("soundcloud.com") {
/*
* @Author : Thomas Bnt
* @Website : https://thomasbnt.dev
* @Twitter : https://twitter.com/Thomasbnt_
*
*/
/*
* @Author : Meqativ
* @Website : https://kutt.it/meqa
* @Twitter : https://twitter.com/meqativ
*
*/
body {
color: black;
}
:root {
--soundcloud-color: #FF6B00;
--not-black: #000;
--black: #151515;
}
a.sc-link-light:hover {
color: var(--soundcloud-color);
}
.sc-classic .dropdownContent__container {
background-color: var(--black)
}
.sc-classic .volume__sliderWrapper, .teaser {
background-color: var(--not-black)
}
body {
color: white;
background-color: var(--not-black) !important;
background: var(--not-black) !important;
}
#widget > .visualSoundContainer.relatedVisible .visualSoundContainer__related {
background-color: #000000aa;
}
#widget > div.singleSound.g-box-full > div > div.visualSoundContainer__sound > div > div > div.visualAudible__artwork > div.visualAudible__artworkOverlay.g-transition-opacity {
display: none;
}
.sc-classic .modal.modalWhiteout { /* BLACKOUT*/
background-color: hsla(0,0%,0%,.9);
backdrop-filter: blur(8px);
}
.sc-classic .modal__modal {
background-color: var(--black)
}
body.sc-classic, .sc-classic .searchTitle {
background: var(--not-black);
}
.sc-classic .soundBadge__additional {
background: none;
}
.sc-classic .fullHero__foreground {
padding: 2rem;
}
.queue {
background-color: #000 !important;
}
.sc-classic .playControls__bg,
.sc-classic .playControls__inner,
.l-container.l-content,
.sc-classic .l-container.l-content,
.sc-classic .dropbar__content,
.sc-classic .uploadMain__chooserContainer,
.sc-classic .quotaMeterWrapper,
.sc-classic .uploadMain__foot {
background-color: var(--black);
}
.sc-classic .uploadMain__chooserContainer,
.sc-classic .quotaMeterWrapper,
.sc-classic .uploadMain__foot {
padding: 1rem;
margin: 0;
}
.sc-classic .quotaMeter__lightLine,
.sc-classic .quotaMeter__upsellText,
.sc-classic .uploadMain__foot > .l-footer a:not(.localeSelector) {
color: #dedede;
}
.l-container.l-content,
.sc-classic .l-container.l-content,
.sc-classic .dropbar__content {
background-color: var(--not-black);
color: white;
}
.searchOptions__navigation > li:not(.active) > a {
color: #555;
filter: invert(80%);
}
.searchOptions__navigation > li:not(.active) > a:hover {
color: #000;
filter: invert(100%);
}
.sc-tag, .sc-tag:visited {
background-color: #222;
}
.sc-tag:hover {
background-color: #444;
}
a.sc-link-dark, .teaser__trackLink, .teaser__trackLink:visited {
color: #aaa;
transition: .3s;
}
a, a:visited {
text-decoration: underline;
}
.dialog a.sc-link-dark {
color: var(--soundcloud-color);
transition: .3s;
}
a.sc-link-dark:hover,
a.sc-link-medium:hover {
color: var(--soundcloud-color);
}
a.sc-link-light,
.sc-classic .commentBadge:hover .commentBadge__title a,
.commentPopover.darkText .commentPopover__body{
color: white;
font-weight: 300;
}
.sc-border-light {
border: none;
}
.headerMenu__link:focus .headerMenu__link:hover {
color: var(--soundcloud-color);
}
.sc-classic .m-light .headerMenu__link,
.sc-classic .m-light,
.sc-classic .m-light {
color: #e1e1e1;
background-color: var(--black);
min-width: 8.2rem;
}
.sc-classic .m-light .headerMenu__link:focus,
.sc-classic .m-light .headerMenu__link:hover,
.sc-classic .linkMenu li:hover,
.sc-classic .linkMenu li:focus{
color: var(--soundcloud-color);
background-color: var(--not-black);
}
.sc-classic .linkMenu__list {
padding: 0;
}
.sc-classic .linkMenu__link {
padding: 8px 10px;
min-width: 8.2rem;
}
.sc-button-small:before, .volume__button:before, .playbackSoundBadge__queueCircle {
background-color: transparent !important;
}
.sc-classic .m-light .headerMenu__list {
border-color: unset;
}
.sc-classic .headerMenu__list {
border-bottom: unset;
}
.sc-classic .headerMenu.m-light {
border: unset;
overflow: hidden;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
min-width: unset;
}
.headerMenu__link:hover {
background-color: #000000;
}
.queue.m-visible .queue__itemWrapper,
.queue__itemsContainer,
.sc-classic .headerMenu.m-light, .sc-classic .listenLogin, .sc-classic .keyboardShortcuts__shortcutsGroup>dl>dt>kbd>kbd{
background-color: #111111;
}
.queue__panel {
border-bottom: none;
background-color: var(--soundcloud-color);
}
.sc-classic .sound__soundActions,
.sc-classic .header__logoLink {
background-color: transparent;
}
.sc-classic .compactTrackListItem__number,
.sc-classic .compactTrackListItem__trackTitle,
.sc-buylink,
.sc-buylink:visited,
.artistShortcutTile__username span,
.teaser__trackLink:active, .teaser__trackLink:focus, .teaser__trackLink:hover{
transition: .3s;
color: #ffffff;
}
.sc-buylink:hover,
.sc-buylink:visited {
color: var(--soundcloud-color);
}
.sc-border-light-right,
.sc-border-light-left,
.sc-border-light-top,
.sc-border-light-bottom,
.mixedSelectionModule {
border: 1px solid var(--not-black) !important;
}
.playControls__bg,
.playControls__inner {
border-top: none;
}
.sc-classic .header,
.playControls__bg,
.playControls__inner,
.sc-classic .tokenInput__token{
background: var(--black);
}
.playControls__bg,
.playControls__inner span,
.playControls__control,
.sc-text {
color: white;
}
.sc-button-small:before,
.volume__button:before,
.playbackSoundBadge__queueCircle {
background-color: white;
border-radius: 3px;
}
.queueItemView.m-active,
.queueItemView:hover,
.sc-classic .queueItemView.m-active,
.sc-classic .queueItemView:hover,
.sc-classic .queueItemView:hover.m-active,
.queue,
.sc-classic .queue__itemsHeight,
.sc-classic .dialog,
.sc-classic .linkMenu,
.sc-classic .callout__bubble,
.sc-classic .callout__bubble:before{
background: #0c0c0c;
background-color: #0c0c0c;
}
.sc-classic .tabs__headingContainer, .sc-classic .tabs__tabs, .sharePanel section, .g-modal-section {
background-color: black !important;
}
.publicShare {
filter: none !important;
}
.sc-classic .queue__itemsHeight {
background-image: unset;
}
.sc-classic .g-tabs-link,
.sc-classic .g-tabs-link:visited {
transition: .3s;
color: white;
}
.queueItemView.m-active .queueItemView__actions,
.queueItemView.m-overlayOpen .queueItemView__actions,
.queueItemView:hover .queueItemView__actions {
gap: .2rem;
}
.sc-classic .g-tabs-link:focus,
.sc-classic .g-tabs-link:hover {
color: var(--soundcloud-color);
border-color: var(--soundcloud-color);
}
button,
.sc-classic .commentPopover.darkText .commentPopover__body {
color: black;
}
.sc-classic .listenEngagement__commentForm, .sc-classic .listenEngagement__commentFormDisabled {
margin-bottom: 0;
}
.sc-classic .image__whiteOutline .image__full {
border-color: var(--black);
}
/*.sc-classic .m-light .profileMenu__profile:after*/
*:not(.sc-classic .searchOptions__navigationItem.active):after,
.m-none,
.shuffleControl.sc-ir:not(.m-shuffling),
.playControls__elements > button,
.volume__button,
.playbackSoundBadge__showQueue > svg,
.sc-classic .paging-eof:before,
.emptyNetworkPage__image,
.sc-classic .loading,
.soundBadge.playlist .soundBadge__artwork,
.sc-classic .featureHeader__closeButton,
.noConversations__image,
.tokenInput__tokenRemove,
.emptyPage__image,
.commentItem__usernameLink, .commentItem__body p, .commentItem__controls a, .commentForm :not(.sc-artwork){
filter: invert(100%);
}
*:after:not(.sc-classic .playButton.m-stretch.sc-button-buffering) {
filter: invert(100%);
}
.webiRedirectionHeader {
background: hsl(269, 100%, 25%);
}
.webiRedirectionHeader__new {
background-color: var(--soundcloud-color);
}
.webiRedirectionHeader__button, .webiRedirectionHeader__button:hover {
color: black;
}
.webiRedirectionHeader__button:hover {
background-color: var(--soundcloud-color);
}
.sc-classic .header__logo {
background: transparent;
}
.header__userNavButton:after {
filter: unset;
}
.listenEngagement__footer {
min-height: unset;
}
.sc-classic .listenEngagement {
display: flex;
flex-direction: column-reverse;
border: unset;
box-shadow: unset;
gap: .5rem;
}
.listenEngagement__footer, .sc-classic .listenEngagement, .sc-classic .commentForm.m-large {
margin: 0;
padding: 0;
}
.sc-classic .listenEngagement__commen...