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