diff --git a/client/css/style.css b/client/css/style.css
index e5036c7f..321d215f 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -572,6 +572,7 @@ button {
}
#windows .input {
+ background-color: white;
border: 1px solid #cdd3da;
border-radius: 2px;
color: #222;
@@ -581,10 +582,13 @@ button {
outline: 0;
padding: 8px 10px;
transition: border-color .2s;
- -webkit-appearance: none;
width: 100%;
}
+#windows select.input {
+ height: 35px;
+}
+
#user-specified-css-input {
resize: vertical;
}
diff --git a/client/index.html b/client/index.html
index 74940d40..1276b99b 100644
--- a/client/index.html
+++ b/client/index.html
@@ -15,7 +15,7 @@
- ">
+
@@ -241,6 +241,19 @@
Enable colored nicknames
+
+
Theme
+
+
+
+
+
<% if (typeof prefetch === "undefined" || prefetch !== false) { %>
Links and URLs
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 167ba0b3..a5105f1b 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -462,18 +462,19 @@ $(function() {
var userStyles = $("#user-specified-css");
var settings = $("#settings");
var options = $.extend({
- desktopNotifications: false,
coloredNicks: true,
+ desktopNotifications: false,
join: true,
links: true,
mode: true,
motd: false,
nick: true,
notification: true,
- part: true,
- thumbnails: true,
- quit: true,
notifyAllMessages: false,
+ part: true,
+ quit: true,
+ theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration
+ thumbnails: true,
userStyles: userStyles.text(),
}, JSON.parse(window.localStorage.getItem("settings")));
@@ -483,9 +484,11 @@ $(function() {
$(document.head).find("#user-specified-css").html(options[i]);
}
settings.find("#user-specified-css-input").val(options[i]);
- continue;
} else if (i === "highlights") {
settings.find("input[name=" + i + "]").val(options[i]);
+ } else if (i === "theme") {
+ $("#theme").attr("href", "themes/" + options[i] + ".css");
+ settings.find("select[name=" + i + "]").val(options[i]);
} else if (options[i]) {
settings.find("input[name=" + i + "]").prop("checked", true);
}
@@ -493,7 +496,7 @@ $(function() {
var highlights = [];
- settings.on("change", "input, textarea", function() {
+ settings.on("change", "input, select, textarea", function() {
var self = $(this);
var name = self.attr("name");
@@ -515,14 +518,13 @@ $(function() {
"notifyAllMessages",
].indexOf(name) !== -1) {
chat.toggleClass("hide-" + name, !self.prop("checked"));
- }
- if (name === "coloredNicks") {
+ } else if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked"));
- }
- if (name === "userStyles") {
+ } else if (name === "theme") {
+ $("#theme").attr("href", "themes/" + options[name] + ".css");
+ } else if (name === "userStyles") {
$(document.head).find("#user-specified-css").html(options[name]);
- }
- if (name === "highlights") {
+ } else if (name === "highlights") {
var highlightString = options[name];
highlights = highlightString.split(",").map(function(h) {
return h.trim();
diff --git a/client/themes/crypto.css b/client/themes/crypto.css
index 3179c5a3..d86c6070 100644
--- a/client/themes/crypto.css
+++ b/client/themes/crypto.css
@@ -10,7 +10,7 @@ GitHub: https://github.com/aynik
@font-face {
font-family: Inconsolata-g;
- src: url("fonts/inconsolatag.woff") format("woff"), url("fonts/inconsolatag.ttf") format("ttf");
+ src: url("../css/fonts/inconsolatag.woff") format("woff"), url("../css/fonts/inconsolatag.ttf") format("ttf");
}
body {
@@ -126,6 +126,10 @@ a:hover,
font-size: 12px;
}
+#windows select.input {
+ height: 38px;
+}
+
#footer .icon {
color: #666;
}
diff --git a/src/server.js b/src/server.js
index 872e4308..4dcade40 100644
--- a/src/server.js
+++ b/src/server.js
@@ -122,6 +122,11 @@ function index(req, res, next) {
Helper.config
);
data.gitCommit = gitCommit;
+ data.themes = fs.readdirSync("client/themes/").filter(function(file) {
+ return file.endsWith(".css");
+ }).map(function(css) {
+ return css.slice(0, -4);
+ });
var template = _.template(file);
res.setHeader("Content-Security-Policy", "default-src *; style-src * 'unsafe-inline'; script-src 'self'; child-src 'none'; object-src 'none'; form-action 'none'; referrer no-referrer;");
res.setHeader("Content-Type", "text/html");