Sonarr: Dark Mode or Custom CSS style

[iFelix18]

Can you add the ability to import external CSS files directly into Sonarr?

[thezoggy]

you can just do this with your browser, Stylish for example?

[iFelix18]

I've created a darker theme for Sonarr, and I use it using Stylish, but I'd like to import it directly into Sonarr for greater compatibility because Stylish does not work on all browsers and all the devices I use to access Sonarr (smartphone and tablet, for example).

[keyvankr]

Great idea! Or just a simple baked in dark theme like the github desktop app if it's too much trouble to create the whole "import custom css style" feature.

[ianhyzy]

I'd love to see a custom CSS feature

[markus101]

This is something that would be tricky to support with CSS Modules and hashed class names (what we'll be using in v3), at this point I don't see it being something we'll support, but we'll need to see once v3 is out (whenever that is).

[keyvankr]

hmmmm and what about a "dark" mode that you can toggle witch a switch? 🤔
@markus101
Maybe something like this? That way you don't have to fully support the whole idea of css modules and you can tweak the exisisting css stylesheet

[markus101]

That way you don't have to fully support the whole idea of css modules and you can tweak the exisisting css stylesheet

We want CSS modules, they're much nicer to work with, but how we're using them doesn't make theming or overriding classes easier (though that was never a goal).

The problem I have with a dark theme is supporting it, it means we need to test changes twice to ensure nothing was broken.

[thezoggy]

perhaps maybe with v3, sonarr will just offer up a light+dark theme ?

[ianhyzy]

The problem I have with a dark theme is supporting it, it means we need to test changes twice to ensure nothing was broken

as much as I want a dark theme, in that case I'd say just forget it becuase that's far too effort-intensive. I'm sure people can hack together themes like they do now that'll be good enough.

[keyvankr]

aha, i see. thanks for providing the extra insight for the decision 👍

[JawsomeJason]

To be clear, switching to CSS Modules (alone) will hinder the ability to use Stylish to customize (without using a hard-coded class name + tag path selector). However, if you are willing to throw in a hard coded class on each component’s container element, this will be much more doable.

FWIW, theming even in CSS Modules wouldn’t be hard. Quick example: https://codepen.io/thejase/pen/prNKJv

Those custom properties would cascade through the document, available to all CSS Modules rendered within the container that has them initially set (or overriden).

[JawsomeJason]

Forgot to add the importance of a dark mode. There are types of people that are photosensitive to bright screens (including white backgrounds).

[markus101]

However, if you are willing to throw in a hard coded class on each component’s container element, this will be much more doable.

That sounds error prone and likely to be forgotten, not something I'd want to spend time on.

We're not using SCSS for the modules, but we are using PostCSS, it may still be possible to achieve theming support with that, but your example won't work in in our scenario.

[JawsomeJason]

CSS Custom Properties are a native CSS feature. No pre or post-processing needed (hooray!). https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

[thezoggy]

@thejase not all browsers support it: http://caniuse.com/#feat=css-variables

[JawsomeJason]

@thezoggy updated codepen example at https://codepen.io/thejase/pen/prNKJv

.container {
  background-color: #ffffff;
  color: #000000;
  /* modern browsers will allow for theming.  Those that don't will ignore these.  */
  background-color: var(--bg);
  color: var(--fg);
}

CSS's cascade is naturally designed for progressive enhancement. 👍

[JawsomeJason]

Also, I don't yet have a dev environment set up for Sonarr development, but essentially, this is where the variables might be set:

theme.less

.started #page {
  --dark-bg: #333;
  --dark-fg: #fff;

  --light-bg: #fff;
  --light-fg: #444;

  --bg: var(--light-bg);
  --fg: var(--light-fg);

  &.dark {
    --bg: var(--dark-bg);
    --fg: var(--dark-fg);
  }

  .card(#aaaaaa);
  /* width      : 1210px;
  min-width  : 1210px; */
  max-width : 1210px;
  margin    : auto;
  //  margin-top : -70px;
  padding   : 20px 0px;

  .header {
    padding-bottom : 10px;
    margin-bottom  : 20px;
    border-bottom  : 1px solid #eeeeee;
  }
}

Since all other components render within #page, these are automatically available across modules, including CSS Modules and no CSS processing needed.

Just live-testing it from Chrome DevTools:

[Qstick]

Does theme.park not fill this gap? https://github.com/gilbN/theme.park

I for one would agree from the Radarr side, this is not something we have an appetite to support native due to the work involved to maintain. The guys at theme.park are quick to keep things updated with dev changes.

[markus101]

At this time we don't have plans to maintain a separate dark theme and encourage you to look at theme.park (they have several ways to utilize the themes).