Add dark mode

[theNaut1lus]

I really like this, and I am constantly using this and even find myself using this at nights, which begs the question, could there be a dark mode or a night mode for this ? From what I understand, this uses fairly monochromatic colours and hence it will be very easy to try and implement this. It could turn out as a nice feature add on for future releases. I know you are not accepting any PRs from outside contributors but I would still love to take a shot at this. Nevertheless, I just wanted to add this 🥇

• [x] Nav
• [x] Controls
• [x] Play Tab
• [x] Record tab
• [x] Help tab
• [x] About tab
• [x] Notification
• [x] Icons

[alexbainter]

I was waiting for this to be suggested! I've known from the very beginning I would eventually have to add it. You are right that it should be pretty easy to add, and I've even attempted to write the stylesheets in a way that would be easier for me to add themes. I'll get this prioritized into a milestone and added to the project board. Not sure where it will fit in yet, but I've been trying to prioritize features based on how many :+1: and :hearts: they get. Thanks!

[alexbainter]

Update: I kicked this out of any planned releases for now. Making a functional dark mode is easy, but making one that also looks nice is more difficult (I'm not a designer) and I want to get it right. This is also complicated by the UI being in flux to accommodate other new features.

I'm sure there are talented designers who would love to do this for me but it's way more fun for me to do it myself, admittedly at the expense of taking longer. In the meantime, there are a bunch of browser extensions which do things like inverting the colors of a tab which should work well with the site.

This is still a priority for me but I just want to make sure I have enough time to dedicate to it. I hope everyone understands.

[calvinmorett]

``html,

root{

background:#000;
color:#dbdbdb;

} .title-navtab-listitemlink { background: transparent!important; color:#dbdbdb; } .pieces-tab .pieces .pieceimage > img { filter: invert(100%); } .pieces-tab .pieces .piece { border:1px solid #3c3c3c; } .pieces-tab .pieces .piece:hover { border:1px solid transparent; box-shadow:0 0 0 3px #3c3c3c; } .controls { background:#000; color:#dbdbdb; } .control-button { color:#dbdbdb; background: transparent; } .visualizer{ filter: invert(100%); } .sliderbarlevel { background: #5b4b46; }``

[HanimHank]

I see you want to do it yourself, but if this is something close to what you had in mind, I'd like to help.

The covers will need a darker background.

Great work on the app! It has helped me a lot with concentrating during work. I'd love a dark theme after evening to go easy on my eyes.