Custom CSS

README.md

@@ -48,6 +48,9 @@ Only display voice channels
 **Public Servers:**
 A menu for displaying public servers. [Serverlist](https://github.com/Jiiks/BetterDiscordApp/blob/master/serverlist.json)
 
+**Custom CSS**
+BetterDiscord supports custom CSS for styling Discord to your liking.
+
 **Spoilers**
 Add spoilers to your chat, simply add [!s] to your message.
 

css/main.css

@@ -1,3 +1,9 @@
+#custom-css-ta {
+	background: #D8D8D8;
+	height: 200px;
+	font-family: "Consolas";
+}
+
 .spoiler {
 	color:transparent !important;
 }

js/main.js

@@ -683,6 +683,16 @@ SettingsPanel.prototype.init = function() {
 
 };
 
+SettingsPanel.prototype.applyCustomCss = function(css) {
+    if($("#customcss").length == 0) {
+        $("head").append('<style id="customcss"></style>');
+    }
+
+    $("#customcss").html(css);
+
+    localStorage.setItem("bdcustomcss", btoa(css));
+};
+
 SettingsPanel.prototype.construct = function() {
 
     var self = this;
@@ -724,30 +734,46 @@ SettingsPanel.prototype.construct = function() {
     });
 
     settingsWrapper.append(controlGroups);
-    /*settingsWrapper.append(controlGroups2);*/
+    settingsWrapper.append(controlGroups2);
     var featuresGroup = $("<div/>", {
         class: "control-group"
     });
 
-    var upcomingGroup = $("<div/>", {
+    var customCssGroup = $("<div/>", {
         class: "control-group"
     });
 
     controlGroups.append(featuresGroup);
-    controlGroups2.append(upcomingGroup);
+    controlGroups2.append(customCssGroup);
 
     featuresGroup.append($("<label/>", {
         text: "BetterDiscord Settings"
     }));
 
-    upcomingGroup.append($("<label/>", {
-        text: "Upcoming Features"
+    customCssGroup.append($("<label/>", {
+        text: "Custom CSS"
     }));
 
+    var ta = $("<textarea/>", {
+        id: "custom-css-ta"
+    });
+
+    var decode = atob(localStorage.getItem("bdcustomcss"));
+    self.applyCustomCss(decode);
+    ta.val(decode);
+
+    customCssGroup.append(ta);
+
+    ta.on("input propertychange", function() {
+        self.applyCustomCss($(this).val());
+    });
+
     var featuresCheckboxGroup = $("<ul/>", {
         class: "checkbox-group"
     });
 
+
+
     function updateSetting() {
         var cb = $(this).children().find('input[type="checkbox"]');
         var enabled = !cb.is(":checked");