Skip to content

MusicBrainz Dark Mode by lukethacoder

Screenshot of MusicBrainz Dark Mode

Details

Authorlukethacoder

LicenseNo License

Categorymusicbrainz.org

Created

Updated

Size3.0 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Dark mode theme for MusicBrainz

Notes

Please raise any issues on Github

Source code

/* ==UserStyle==
@name           MusicBrainz Dark Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Dark theme for MusicBrainz
@author         https://lukesecomb.digital
==/UserStyle== */

@-moz-document domain("musicbrainz.org") {
  :root {
    --primary-color: #eb743b;
    --bg-color: #131414;
    --text-color: #fff;
    --text-disabled-color: #999;
    --border-color: #3b3b3a;
    --highlight-color: #382807;
  }
  body {
    background-color: var(--bg-color);
    color: var(--text-color);
  }
  table.tbl thead,
  table.tbl tr.subh td, table.tbl tr.subh th {
    background: none;
  }
  table.tbl tr.even td, table.tbl tr.even th {
    background-color: hsl(236, 2%, 10%);    
  }
  a,
  #footer a {
    color: var(--primary-color);
  }
  h1 a {
    color: var(--text-color) !important;
  }
  input, select {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
  }
  .buttons a, .buttons button {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-top: 1px solid var(--primary-color);
    border-left: 1px solid var(--primary-color);
    color: var(--text-color);
  }
  div.tabs ul li a {
    color: var(--text-color);    
  }
  .banner {
    background-color: var(--bg-color);
    border: var(--border-color) 1px solid;
  }
  .header .right .top .search-container form input#headerid-query,
  .header .right .top .search-container form select#headerid-type {
    background-color: var(--bg-color);   
    color: var(--text-color);
  }
  .header .right .top .search-container form input#headerid-query {
    border-right-color: var(--border-color);
  }
  .header .right .top .search-container form button {
    background-color: var(--bg-color);
    color: var(--text-color);
    border-left-color: var(--border-color);
  }
  span.artwork-icon, span.caa-icon, span.eaa-icon,
  .header .right .top .search-container form button img {
    filter: invert(1);
  }
  nav .pagination span {
    background-color: var(--bg-color);
    color: var(--text-disabled-color);
    border: var(--border-color) solid 1px;
  }
  nav .pagination a {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: var(--border-color) solid 1px;
  }
  .annotation-collapsed:after, .collapsed:after, .review-collapsed:after, .wikipedia-extract-collapsed:after {
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0, var(--bg-color) 100%);
  }
  div.mp, span.mp, table.tbl tr.mp td, table.tbl tr.mp th, tr.diff-changes {
    background: var(--highlight-color) !important;
  }
  #sidebar .listenbrainz-button,
  #sidebar .cover-art.present ~ .listenbrainz-button {
    color: var(--text-color);
    background-color: var(--bg-color);
  }
  .content-loading,
  .ui-widget-content {
    background: var(--bg-color);
  }
}

Reviews

No reviews yet.