Skip to content

Deezer DarkCube by cubedj21

Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/142184.user.css

Screenshot of Deezer DarkCube

Details

Authorcubedj21

LicenseCC-BY-NC-4.0

Categorydeezer

Created

Updated

Size93 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

It's my dark reskin of the deezer.com website for users who like inverted colors that are easier on your eyes.

You'll still have to select "Dark Theme" in settings on Deezer.com (click on your profile picture) to make this theme look as intended.

This style since beginning uses experimetal css feature "backdrop-filter" to graphically visualise the seek (played/remaining time) bar position with special overlay on the picture thumbnail of currently playing title.

This feature works for the time being properly only in Edge and Safari, in Chrome you have to set the "Enable Experimental Web Platform Features" flag in chrome://flags, in Opera set the "Enable Experimental Web Platform Features" preference, IE and Firefox are not supported yet..

Notes

Changelog

Changes (23-09-2021)

  • some icon positioning fixes

Changes (10-03-2021)

  • minor color fixes

Changes (13-11-2020)

  • some minor color fixes for buttons in :hover state

Changes (24-07-2020)

  • fixed colors for calendar tour dates & tour nav link tab background color bug

Changes (01-07-2020)

  • fix for form-controls (yet again)

Changes (10-06-2020)

  • fixed the "ON TOUR" warning on artist page and made it green to stand out
  • fixed the buttons, drop-downs & form fields colors after yet another annoying class name change of said elements by Deezer

Changes (03-06-2020)

  • fixed search input fields colors for "Exclusions" page

Changes (16-05-2020)

  • some form-control and search input fields fixes

Changes (06-04-2020)

  • updated colors for the new Deezer redesign
  • updated buttons to match theme colors

Changes (09-07-2019)

  • slider track color in the "player" section fixed

Changes (26-06-2019)

  • removed white border in profile header (my music pages)

Changes (21-05-2019)

  • added option to customize the main two used colors (orange & blue)

Changes (14-05-2019)

  • fixes according to latest Deezer design changes
  • inverted the app logo

Changes (14-04-2019)

  • minor fixes
  • added option for custom scrollbars for Chrome

Changes (15-01-2019)

  • some button label colors corrections

Changes (30-12-2018)

  • embeded images replaced with images hosted on imgur.com & Google cloud storage because of the script size limitation here on userstyles.org (allow loading of images from those 3p domains in your adblocking SW)
  • some minor fixes

Changes (19-12-2018)

  • fixed button search tags
  • removed darl skin css code for now obsolete Deezer Downloader userscript
  • fixed search form placeholder text colors

Changes (18-12-2018)

  • fixed the most obvious changes that has been done in the last days, but there's still a lot to be done, I was trying to make the site at least usable again

Changes (14-12-2018)

  • fixed some background issues with search bar popup (history items hover etc.)
  • quite a lot of links & other text UI elements is now properly colored for dark theme including the correctly set contrast ratio

Changes (05-12-2018)

  • highlighting the "Delete account" button with red color to indicate importance of consequences when pushing it (new design)
  • some other minor fixes

Changes (23-11-2018)

  • fixed the profile/audio/playlist etc. header padding issue (new design)
  • some minor corrections

Changes (06-11-2018)

  • fixed "added" button background (old design)

Changes (11-10-2018)

  • fixed notofication popup (new redesign)
  • some changes for the controls (new redesign)
  • other minor fixes

Changes (07-10-2018)

  • first version including the new redesign - NOT COMPLETE (so bare with me, a lot of stuff has yet to be done)
  • you can still switch to the old skin through the "Deezer labs" option in account settings (not possible anymore)

Changes (15-09-2018)

  • added some missing placeholder thumbnails
  • started working on the "inversion" of the new redesign that will be probably released as separate style or as a customizable part of this style

Changes (29-08-2018)

  • minor thumbnails & img updates

Changes (21-08-2018)

  • added the customization option for basic adblocking, since Deezer sometimes doesn't work well with browser adblockers, it could be useful for somebody (adblocking option is turned OFF as default)

Changes (18-08-2018)

  • flow slide background correction
  • on tour button text update
  • nano-card item thumbnail update

Changes (05-08-2018)

  • added placeholder img for thumbnails in the queue panel
  • redesigned the flow slides & controls (properly inverted now)
  • some minor fixes

Changes (05-07-2018)

  • updated track list and account page borders & shadows
  • added placeholder img for artist cover

Changes (02-07-2018)

  • updated watch button
  • replaced placeholder images for albums, tracks, artists and playlists

Changes (29-06-2018)

  • fixes for modal dialogs (share dialog, create playlist and some others)

Changes (23-06-2018)

  • AppStudio page fixes

Changes (13-06-2018)

  • dropdown menu fixes
  • some form-control corrections

Changes (06-06-2018)

  • playlist header tweaked
  • improved hover states of control elements in playlist area (datagrid)
  • fixed datagrid-row imperfect rounded borders when in active or hover state
  • some other smaller datagrid area fixes

Changes (03-06-2018)

  • minor tweaks

Changes (03-06-2018)

  • song list header row fix, minor button & toolbar updates

Changes (06-03-2018)

  • color correction of buttons with social icons (Notification panel, Feed Panel)

Changes (22-02-2018)

  • fixed some minor invert omissions on the App Studio page (#page_appstudio)
  • some minor corrections on the Account Settings page (tabs "My Apps" and "Deezer Labs")

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Deezer DarkCube
@namespace    USO Archive
@author       cubedj
@description  It's my <strong>dark</strong> reskin of the <strong>deezer.com</strong> website for users who like inverted colors that are easier on your eyes.    <strong>You'll still have to select <i>"Dark Theme"</i> in settings on Deezer.com (click on your profile picture) to make this theme look as intended.</strong>     This style since beginning uses experimetal css feature <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter">"backdrop-filter"</a> to graphically visualise the seek (played/remaining time) bar position with special overlay on the picture thumbnail of currently playing title.    This feature works for the time being properly only in Edge and Safari, in Chrome you have to set the "<strong>Enable Experimental Web Platform Features</strong>" flag in <strong><a href="chrome://flags">chrome://flags</a></strong>, in Opera set the "<strong>Enable Experimental Web Platform Features</strong>" preference, IE and Firefox are not supported yet..
@version      20210922.23.05
@license      CC-BY-NC-4.0
@preprocessor uso
@advanced dropdown blockads "Ads Blocking" {
    blockadsoff "Ads Blocking OFF*" <<<EOT  EOT;
    blockadson "Ads Blocking ON" <<<EOT .ads-bottom, .ads-top, .conversion-entrypoints, div[id^="sas_"] {
	display: none !important;
	visibility: collapse !important;
} EOT;

}
@advanced dropdown scrollbars "Custom Chrome Scrollbars" {
    scrollbarson "Skinned Scrollbars*" <<<EOT *::-webkit-scrollbar {
	width: 13px !important;
	height: 10px !important;
	background: #111111 !important;
	border: 1px solid #000 !important;
}
*::-webkit-scrollbar-thumb {
	min-height: 28px !important;
	background: #333333 !important;
	border: 1px solid #555 !important;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner {
	background: #111111 !important;
	border: 1px solid #000 !important;
}
::-webkit-scrollbar-thumb:hover {
	background: /*[[colorblue]]*\/ !important;
	border: 1px solid #000 !important;
}

body::-webkit-scrollbar-track-piece {
	background-clip: padding-box;
	background-color: #111;
	border: solid #000;
	border-width: 0 0 0 1px;
	box-shadow: inset 1px 0 0 rgba(0,0,0,.14),inset -1px 0 0 rgba(0,0,0,.07)
} EOT;
    scrollbarsoff "Default Scrollbars" <<<EOT  EOT;

}
@advanced color colorblue "Color1" #0096FF
@advanced color colororange "Color2" #FF6400
@advanced text colorblue2 "Color3" "rgba(0,150,255,.8)"
@advanced text colororange2 "Color4" "rgba(255,100,0,.7)"
@advanced text colororange3 "Color5" "rgba(255,100,0,.5)"
@advanced color colorblue3 "Color6" #0070FF
==/UserStyle== */
@-moz-document domain("deezer.com") {
/*[[blockads]]*/
/*[[scrollbars]]*/
::selection, ::-moz-selection, ::-webkit-selection {
	color: #000 !important;
	background-color: /*[[colorblue]]*/ !important;
}
a:active, a:visited {
	color: /*[[colorblue]]*/;
}
a:link {
	color: /*[[colorblue]]*/ !important;
}
a:hover {
	color: /*[[colororange]]*/ !important;
}
input {
	color: #CCC;
	font-weight: bold !important;
}
#livebar_menu a {
	-moz-filter: invert(100%);
	-webkit-filter: invert(100%);
	filter: invert(100%);
	border-color: /*[[colororange]]*/ !important;
	border-left-color: /*[[colororange]]*/ !important;
}
#livebar_menu {
	border-color: /*[[colorblue]]*/ !important;
}
.channel-section {
	background-color: #0a0a0a !important;
}
div.channel-section {
	background-color: #191919 !important;
}
.page-sidebar .player-controls > .controls.controls-options .volume-handler, .page-sidebar .player-progress .progress-handler {
	background-color: /*[[colororange]]*/ !important;
}
.page-sidebar .player-controls > .controls.controls-options .volume-progress-bar, .page-sidebar .player-progress .progress-buffer {
	background-color: #969696 !important;
}
.page-sidebar .player-controls > .controls.controls-options .volume-bar, .page-sidebar .player-progress .progress {
	background-color: /*[[colorblue]]*/ !important;
}
.page-sidebar .player-progress .progress-time, .page-sidebar .player-progress .progress-length {
	color: #ffffff;
	opacity: 1;
}
.datagrid-table {
	background: #0a0a0a;
}
.datagrid-table tbody tr.active td {
	background-color: /*[[colororange2]]*/;
}
.datagrid-table tbody tr.active td.length {
	color: #FFF;
	font-weight: bold;
}
.datagrid-table tbody tr.active:hover td.length {
	color: /*[[colororange]]*/;
	font-weight: bold;
}
.datagrid-table tbody tr.active:hover td {
	background-color: rgba(150, 150, 150, .5);
}
.datagrid-table tbody tr.active a {
	color: #FFF;
	font-weight: bold;
}
.datagrid-table tbody tr.active:hover a {
	color: /*[[colororange]]*/;
	font-weight: bold;
}
.datagrid-table tbody tr:hover td {
	background-color: rgba(150, 150, 150, .5);
}
.datagrid-table tbody tr:hover td a {
	color: #FFF;
	font-weight: bold;
}
.datagrid-table tbody tr:hover td.artist {
	color: #FFF;
	font-weight: bold;
}
.datagrid-table tbody tr.song.active:hover td.artist {
	color: #FFF;
	font-weight: bold;
}
.datagrid-table tbody tr.song.active td.artist {
	color: #000;
	font-weight: bold;
}
.datagrid-table td, .datagrid-table th {
	color: #AAA;
}
.datagrid-table td.length {
	color: /*[[colororange]]*/;
}
.datagrid-table tbody tr.contributors td {
	background-color: #191919;
	color: #DDD;
	font-weight: normal;
}
.datagrid-table tbody tr.contributors:hover td {
	background-color: rgba(150, 150, 150, .5);
	color: #DDD;
}
.datagrid-table tbody tr.caption:hover td {
	background-color: rgba(150, 150, 150, 0.5);
	color: #fff;
}
.datagrid-table tbody tr.caption:hover td .icon-album {
	color: /*[[colororange]]*/;
}
.datagrid-table tbody tr.caption td .icon-album:hover {
	color: /*[[colorblue]]*/;
}
.icon-datagrid {
	color: #EEE;
	transition-duration: .15s;
	transition-property: color;
}
.icon-datagrid:hover {
	color: /*[[colororange]]*/;
}
.loved .icon.active {
	color: #ff0000 !important;
}
.loved .icon:hover {
	color: #ff0000 !important;
}
.datagrid-table tbody tr td a {
	color: #AAA;
}
a.link-gray {
	color: #AAA;
}
input[type=checkbox] {
	-webkit-filter: invert(100%) hue-rotate(180deg);
	-moz-filter: invert(100%) hue-rotate(180deg);
	filter: invert(100%) hue-rotate(180deg);
}
body:not(.paused):not([direction="ltr"]) {
	background-color: #0a0a0a !important;
	color: #EEE !important;
	font-family: "Lucida Grande", Arial, sans-serif;
	font-size: 12px;
	line-height: 1.33333333;
	margin: 0;
	/*padding: 0;*/
}
.page-main, .catalog-header {
	background-color: #0a0a0a !important;
	color: #EEE;
}
.navbar {
	background-color: #0a0a0a;
	color: /*[[colorblue]]*/ !important;
	border-bottom: 1px solid #343434;
}
.navbar {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.catalog-header .infos {
	border-top: 1px solid #343434;
}
#page_profile .user-section {
	border-bottom: 1px solid #343434;
}
#page_feed .info-down .heading-5.heading-bordered {
	border-bottom: 1px solid #343434;
}
#page_feed .title_separ {
	border-bottom: 1px solid #343434;
}
#page_feed .card-release-album .details ul > li + li {
	border-top: 1px solid #343434;
}
.heading-bordered {
	border-bottom: 1px solid #343434;
}
#page_account .account-apps .app-cell {
	border-bottom: 1px solid #343434;
}
div.catalog-content {
	background-color: #0a0a0a;
	color: #FFF;
}
#page_naboo_artist .content-left {
	background-color: #0a0a0a;
}
#page_naboo_artist .content-left {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.naboo-catalog .catalog-tab-box, .page-naboo-search .search-header, .page-naboo-search .search-suggest {
	background-color: #0a0a0a;
}
.btn {
	border: 1px solid transparent;
	border-radius: 4px;
	color: #FFF;
	background-color: /*[[colorblue]]*/;
	cursor: pointer;
	font-size: 12px;
	margin: 0;
	padding: 7px 12px;
	vertical-align: middle;
	transition-duration: .15s;
	transition-property: background-color, border-color, color, opacity;
}
.btn:hover {
	background-color: /*[[colororange]]*/;
	color: #000;
}
.btn .label {
	color: #FFF;
}
.btn:hover .label {
	color: #000;
}
.line {
	background-color: #343434 !important;
}
#page_naboo_artist .content-right {
	border-bottom: 1px solid #343434;
	border-top: 1px solid #343434;
}
.btn > .action-active .icon-love {
	color: #ff1e1e;
}
.btn-group > .btn.btn-default.active {
	background-color: #444444;
	color: /*[[colorblue]]*/;
	border-color: #000;
}
.btn-group > .btn.btn-default.active .label {
	color: /*[[colororange]]*/;
}
.btn-group > .btn.btn-default.active .icon {
	color: /*[[colororange]]*/;
}
.btn-group > .btn.btn-default.active:hover .icon {
	color: #000;
}
.btn-group > .btn.btn-default.active:hover .label {
	color: #000;
}
.btn-group > .btn.btn-default.active:hover {
	background-color: /*[[colororange]]*/;
	color: #000;
	border-color: /*[[colororange]]*/;
}
.page-sidebar {
	background-color: #0f0f0f;
	color: #EEE;
}
.page-main, .page-scroll {
	background-color: #0a0a0a;
	color: #EEE;
}
.page-sidebar .nav-link {
	background-color: #0f0f0f;
	color: #EEE;
}
.page-sidebar .nav-link:hover {
	background-color: #333;
	color: /*[[colororange]]*/;
}
.page-sidebar .nav-link:focus {
	background-color: #1c1c1c;
}
.page-sidebar .nav-link[href="/en/profile/1286179544/loved"]:active {
	background-color: #1c1c1c;
	color: /*[[colororange]]*/;
}
.page-sidebar .nav-link[href="/en/profile/1286179544/loved"]:active .svg-icon {
	fill: /*[[colorblue]]*/;
}
.page-sidebar .nav-link.active-link {
	background-color: #1c1c1c;
	border-left-color: /*[[colorblue]]*/;
	color: #eee;
}
.page-sidebar .nav-link:hover .svg-icon {
	fill: /*[[colorblue]]*/;
}
.page-sidebar .nav-link.active-panel {
	background-color: #1c1c1c;
	color: /*[[colororange]]*/;
}
.page-sidebar .nav-link.active-panel .svg-icon {
	fill: /*[[colorblue]]*/;
}
.page-sidebar .player-contr...

Reviews

No reviews yet.