Allowing for user-customizable CSS

[PaulTGG]

I saw that someone made a comment about dark mode. An easy way to let people add their own CSS would be to add an extra header to the html files. Something like...

<link rel=stylesheet href="user_custom_css_file_for_whatever_colours_you_want.css">

(...but perhaps with a better file name). That would let people do whatever, without you having to change the index.css, and without them having to worry about file merges in case you do make changes down the road. (There might be some issues with precedence, and I can't remember if the order of the header lines affects the cascade of the style sheets, but meh... it's a start!)

[Rosuav]

Definitely possible, but where would that go in the UI? Also, from what I've generally found, most people who make demands about dark mode aren't ACTUALLY willing to put in the work to create their own style sheet, which is why I tend to be pretty short with requests like that. (Anyway, it's not like web browsers don't have that sort of feature built into them already.)

[PaulTGG]

I was thinking it wouldn't be a UI feature (not worth the effort IMHO). More of an instruction along the lines of "if you want custom css, put a file named x alongside the rest of the files." Makes it easy on you, and if someone wants a custom look, nothing's stopping them, and there's no risk to the codebase.

[Rosuav]

If you have the ability to put it alongside the rest of the files, wouldn't you also have the ability to just edit the existing file, or edit the HTML to reference it? People who use vol.rosuav.com aren't putting files anywhere.

[PaulTGG]

Yep, for sure! (That's what I did anyway... haha) I was just thinking (after I'd already changed the index.css) that if you updated the css at some point in the future, I wouldn't have an easy way of merging the changes, in case you added some new features. So adding a second reference to another style sheet gives the best of both worlds (although I haven't done a full test to make sure things cascade properly). And you're right - it's definitely a pretty limited use-case - people who want a different design AND who are running it locally themselves...

[Rosuav]

Yeah, that's fair enough. It may be easier to have your own style sheet and then just add one line to the HTML; that way, even if I do happen to edit the very top of the HTML file (fairly unlikely), it's an easy merge to just re-add the link line.

[PaulTGG]

Sooo, in case anyone in the future wants to try it, add this line to the "head" section of the html files:

<link rel=stylesheet href="custom.css" />

Then add your css into a file named "custom.css" (the filename doesn't matter) and put that file into the same folder as the html files. Et voila!

[PaulTGG]

...and here's some sample css to play with (I am NOT a graphic designer...)

body {
  background: #222222;
    color: #eeeeee;
}
header {
    background: #663399;
    color: #dddddd;
}

main section {
    background: #181818;
    border: 1px solid #181818;
}

.titlebar {
    background: #0058cc;
    color: bbbbbb;
}

[data-subtype=sceneswitch] button {
    background: #737373;
    color: #eeeeee;
}
[data-subtype=sceneswitch] button:hover {background: #4a4a4a;}
[data-subtype=sceneswitch] button.current {background: #ee4400;}
[data-subtype=sceneswitch] button.current:hover {background: #ff6611;}

.status_streaming {
  background: #663399;
  color: #eeeeee;
}

.status_recording {
  background: #663399;
  color: #eeeeee;
}

[data-status=CURRENTLY] {
    background: #ff5100;
}

.mutebtn {
  background: #663399;
  color: #eeeeee;
}