Support custom CSS

www/assets/css/custom/dark.css

@@ -0,0 +1,129 @@
+body {
+    background-color: #333333;
+}
+
+.well, .dropdown, .dropdown-menu,
+.dropdown-menu li, .dropdown-menu li a {
+    background-color: #222222;
+    color: #ffffff;
+}
+
+input[type="text"] {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+legend {
+    color: #ffffff;
+}
+
+.dropdown-menu {
+    border: 1px solid #ffffff;
+}
+
+.close {
+    color: #ffffff;
+}
+
+.alert {
+    background-color: #000066;
+    color: #ffffff;
+}
+
+.alert-error {
+    background-color: #660000;
+    color: #ffffff;
+}
+
+.videolist li {
+    color: #ffffff;
+    background-color: #000000;
+    border: 1px solid #ffffff;
+}
+
+.videolist li.alert-info {
+    background-color: #000055;
+    border: 1px solid #0000ff;
+}
+
+.qe_btn {
+    height: 20px;
+    font-family: Monospace;
+    padding: 0 5px;
+    margin: auto;
+    overflow: hidden;
+}
+
+.qe_buttons {
+    float: left;
+}
+
+.qe_title {
+    float: left;
+}
+
+.qe_time {
+    float: right;
+}
+
+.qe_clear {
+    clear: both;
+}
+
+#library {
+    width: 640px;
+}
+
+#userlist {
+    background-color: #000000;
+    color: #ffffff
+}
+
+#messagebuffer {
+    background-color: #000000;
+    color: #ffffff
+}
+
+#chatline {
+    background-color: #000000;
+    color: #ffffff;
+}
+
+.userlist_siteadmin {
+    color: #cc0000;
+    font-weight: bold;
+}
+
+.userlist_owner {
+    color: #0000cc;
+    font-weight: bold;
+}
+
+.userlist_op {
+    color: #00aa00;
+}
+
+.action {
+    color: #dddddd;
+}
+
+.spoiler {
+    color: #ffffff;
+    background-color: #ffffff;
+}
+
+.spoiler:hover {
+    color: #000000;
+}
+
+.greentext {
+    color: #789922; /* Color value directly from 4chan */
+}
+
+.poll-notify {
+    color: #5555ff;
+}
+
+.nick-highlight {
+    background-color: #446666;
+}

www/assets/js/callbacks.js

@@ -85,9 +85,14 @@ function initCallbacks() {
         $('#opt_qopen_allow_playnext').prop('checked', opts.qopen_allow_playnext);
         $('#opt_pagetitle').attr('placeholder', opts.pagetitle);
         document.title = opts.pagetitle;
-        $('#opt_bgimage').attr('placeholder', opts.bgimage);
-        if(opts.bgimage != "")
-            $('body').css("background", "url('" + opts.bgimage + "') no-repeat fixed");
+        $('#customCss').remove();
+        if(opts.customcss != "") {
+            $('<link/>').attr("rel", "stylesheet")
+                       .attr("href", opts.customcss)
+                       .attr("id", "customCss")
+                       .insertAfter($('link[href="./assets/css/ytsync.css"]'));
+        }
+
         CHANNELOPTS = opts;
         if(opts.qopen_allow_qnext)
             $('#queue_next').attr('disabled', false);

www/assets/js/client.js

@@ -221,16 +221,13 @@ $('#opt_submit').click(function() {
     var ptitle = $('#opt_pagetitle').val();
     if(ptitle == '')
         ptitle = $('#opt_pagetitle').attr('placeholder')
-    var bgimage = $('#opt_bgimage').val();
-    if(bgimage == '')
-        bgimage = $('#opt_bgimage').attr('placeholder')
     opts = {
         qopen_allow_qnext: $('#opt_qopen_allow_qnext').prop('checked'),
         qopen_allow_move: $('#opt_qopen_allow_move').prop('checked'),
         qopen_allow_delete: $('#opt_qopen_allow_delete').prop('checked'),
         qopen_allow_playnext: $('#opt_qopen_allow_playnext').prop('checked'),
         pagetitle: ptitle,
-        bgimage: $('#opt_bgimage').val()
+        customcss: $('#opt_customcss').val()
     };
     socket.emit('channelOpts', opts);
 });