Website Dark Mode

Add a preference to switch the website to dark mode.

How’d you pull that off? Photoshop?

I’d love to have official support for dark mode! In the meantime, here’s a CSS style sheet guide I made. It’s been awhile since I worked on this, so I’m posting it as a WIP. Let me know if you make anything with it!

This should work in any browser that supports style sheets. There’s a few plugins for browsers made for managing style sheets, but I haven’t tried any of them myself.

This is the default values, I haven’t made a dark mode style sheet

/* TODO modals, song pages (comments, description, tags), playlist filter / compose upload / compose published sort, check for screen size related CSS */


/* Menu header */
.featured.sticky-top,
.page.browse .sticky-top,
.page.search .sticky-top,
.tag-profile .sticky-top {
  background-color:#fff
}

/* Menu header links */
.featured.sticky-top .links-container a,
.page.browse .links-container a,
.page.search .links-container a,
.tag-profile .links-container a {
  color:#333
}

/* Link underline hover effect */
@media(hover:hover) {
  .featured.sticky-top .links-container a:hover:after,
  .page.browse .links-container a:hover:after,
  .page.search .links-container a:hover:after,
  .tag-profile .links-container a:hover:after{
    background-color:#000
  }
}
/* Selected link underline */
.featured.sticky-top .links-container a.active:after,
.featured.sticky-top .links-container a:focus:after,
.page.browse .links-container a.active:after,
.page.browse .links-container a:focus:after,
.page.search .links-container a.active:after,
.page.search .links-container a:focus:after,
.tag-profile .links-container a.active:after,
.tag-profile .links-container a:focus:after {
  background-color:#b51016
}


/* --- */


/* Background and text color */
.layout{
  background-color:white;
  color:#292b2c
}
/* Video fix */
.jumbotron-featured .video-loop, .video-background {
  z-index:0;
  background-color:white
}

/* Song separator lines */
.item-v2 .separator {
  border-top:1px solid #ccc;
  border-bottom:1px solid #e5e5e5
}

/* Song title, compose page titles */
.item-v2 .item .item-title a {
  color:#333
}

/* Song author (not uploader) */
.item-v2 .item .item-author {
  color:#292b2c
}

/* Play / compose button default */
.item-v2 .item .item-play-buttons .item-button {
  background-color:#fff;
  color:#292b2c;
  border:1px solid gray
  
}

/* Active play button / compose pencil */
.item-v2 .item .item-play-buttons .item-button.active {
  background-color:#b51016;
  color:#fff;
  border:1px solid #fff
}

/* Active play button hover */
@media(hover:hover) {
  .item-v2 .item .item-play-buttons .item-button.active:hover {
    background-color:#c00
  }
}

/* Like and plus buttons */
.item-v2 .item-extra-buttons .item-button-small {
  background-color:#fff!important;
  color:#292b2c;
  border:1px solid gray
}

/* Plus button active */
.item-v2.selected .item {
  background-color:rgba(0,0,0,.1) /* Song highlight, does not need to be transparent */
}
.item-v2 .item-extra-buttons .dropdown.open .item-add {
  background-color:rgba(0,0,0,.15)!important /* Button highlight, does not need to be transparent */
}

/* Liked button */
.item-v2 .item-extra-buttons .item-like.liked {
  color:#fa6c8d
}


/* ---------- Right side ---------- */

/* "By" next to uploader name */
.item-right-side{
  color:#292b2c
}

/* Song upload date */
.item-v2 .item .item-date,
.small-scroller .item-v2 .item .item-date {
  color:#767676
}

/* Play count, comment count, likes, song duration */
.item-v2 .item .item-extra {
  color:#767676
}

/* Default username color */
.item-v2 .item .item-user .item-user-name a {
  color:#333
}


/* ---------- Menus ---------- */

/* Plus button drop down */
/* Drop down background */
.dropdown nav .dropdown-menu {
  background-color:#fff
}

/* Drop down items */
.dropdown nav .dropdown-menu .dropdown-item {
  color:#292b2c
}
/* Dividers */
.dropdown nav .dropdown-menu .dropdown-divider {
 background-color:#eceeef
}
/* Item hover */
@media(hover:hover) {
  .dropdown nav .dropdown-menu .dropdown-item:hover {
    background-color:#f0f0f1;
    color:#292b2c
  }
}
/* Item selected */
.dropdown nav .dropdown-menu .dropdown-item:active {
  background-color:#e1e1e2;
  color:#292b2c
}
1 Like