From 4127533f8be78cb6cc65e175a088048969796022 Mon Sep 17 00:00:00 2001
From: Evert <imsonotsleepy@gmail.com>
Date: Wed, 28 Sep 2016 21:00:57 +0300
Subject: [PATCH] themes

---
 README.md                        |   1 -
 public/css/layout.css            | 345 +++++++++++++++++++++++
 public/css/theme_default.css     | 453 ++++++++++++++++++++++++++++++
 public/css/theme_night.css       | 468 +++++++++++++++++++++++++++++++
 public/index.html                |   6 +-
 public/js/main.js                | 114 ++++++--
 public/js/theme.js               |  46 +++
 public/main.styl                 | 251 +----------------
 public/stylus/layout.styl        | 297 ++++++++++++++++++++
 public/stylus/theme_default.styl | 282 +++++++++++++++++++
 public/stylus/theme_night.styl   | 292 +++++++++++++++++++
 11 files changed, 2293 insertions(+), 262 deletions(-)
 create mode 100644 public/css/layout.css
 create mode 100644 public/css/theme_default.css
 create mode 100644 public/css/theme_night.css
 create mode 100644 public/js/theme.js
 create mode 100644 public/stylus/layout.styl
 create mode 100644 public/stylus/theme_default.styl
 create mode 100644 public/stylus/theme_night.styl

diff --git a/README.md b/README.md
index 1d7d732..84afe81 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,6 @@ The server will look for passwords in `webirc.data.json`. The format is: `"serve
 
 ###The (non-complete) TODO List (of things left to do)
 
-* [MEDIUM] Theme engine
 * [NORMAL] CAP negotiation
 * [LOW] Better input
 * [LOW] irc:// URL scheme handling
diff --git a/public/css/layout.css b/public/css/layout.css
new file mode 100644
index 0000000..c1b035a
--- /dev/null
+++ b/public/css/layout.css
@@ -0,0 +1,345 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: Open Sans, Everson Mono, Helvetica;
+}
+.grade1 {
+  margin-bottom: 0;
+  margin-top: 0;
+  display: block;
+  text-align: center;
+}
+.grade2 {
+  margin-bottom: 0;
+  margin-top: 20px;
+  display: block;
+  text-align: center;
+}
+.grade3 {
+  margin-bottom: 0;
+  margin-top: 20px;
+  display: block;
+  text-align: center;
+}
+.ircclient {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+  padding: 8px;
+  width: 300px;
+  border-radius: 5px;
+}
+.ircclient input[type="submit"] {
+  width: 318px;
+  padding: 12px;
+  margin-top: 20px;
+  display: block;
+  border-radius: 4px;
+  font-size: 120%;
+  font-weight: bold;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.ircclient .coverwindow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.ircclient .coverwindow#authdialog {
+  z-index: 100;
+}
+.ircclient .coverwindow .wrapper {
+  width: 320px;
+  margin: auto;
+  margin-top: 5%;
+  padding: 15px;
+}
+.ircclient .coverwindow .wrapper label {
+  display: block;
+  font-size: 80%;
+  margin-top: 5px;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+  width: auto;
+  display: inline-block !important;
+  font-size: 90% !important;
+  margin-bottom: 10px;
+}
+.ircclient #chat {
+  overflow: hidden;
+}
+.ircclient #chat .ircwrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.ircclient #chat .ircwrapper .toolbar {
+  height: 56px;
+  position: relative;
+  z-index: 15;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+  width: 36px;
+  height: 36px;
+  display: inline-block;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  -webkit-transition: transform 0.2s linear;
+  -moz-transition: transform 0.2s linear;
+  -ms-transition: transform 0.2s linear;
+  -o-transition: transform 0.2s linear;
+  transition: transform 0.2s linear;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings:hover {
+  transform: rotateZ(-90deg);
+}
+.ircclient #chat .ircwrapper .toolbar .tabby {
+  display: inline-block;
+  height: 56px;
+  position: absolute;
+  right: 45px;
+  left: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+  display: inline-block;
+  min-width: 60px;
+  height: 25px;
+  margin: 5px;
+  margin-right: 0;
+  padding: 10px;
+  line-height: 25px;
+  -webkit-transition: background-color 0.2s linear;
+  -moz-transition: background-color 0.2s linear;
+  -ms-transition: background-color 0.2s linear;
+  -o-transition: background-color 0.2s linear;
+  transition: background-color 0.2s linear;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: 600;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+  display: inline-block;
+  min-width: 18px;
+  height: 18px;
+  text-align: center;
+  font-size: 12px;
+  margin: 0 5px;
+  line-height: 20px;
+  border-radius: 100%;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread.none {
+  display: none;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+  display: inline-block;
+  width: 12px;
+  text-align: center;
+  margin-left: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea {
+  position: absolute;
+  top: 56px;
+  width: 100%;
+  bottom: 46px;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+  width: 46px;
+  height: 46px;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  border-radius: 100%;
+  display: none;
+  opacity: 0.5;
+  cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+  position: absolute;
+  top: 0;
+  height: 20px;
+  right: 0;
+  left: 0;
+  padding: 12px;
+  display: none;
+  overflow: hidden;
+  z-index: 10;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+  height: auto;
+  max-height: 100px;
+  overflow: auto;
+  word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .letterbox {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  padding: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+  width: 280px;
+  position: absolute;
+  right: 0;
+  padding: 10px;
+  top: 0;
+  bottom: 0;
+  display: none;
+  z-index: 11;
+  overflow: auto;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick {
+  cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .nickname {
+  font-size: 120%;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  padding: 2px;
+  display: inline-block;
+  border-radius: 4px;
+  text-align: center;
+  margin-right: 5px;
+  font-weight: bold;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .no-prefix {
+  width: 25px;
+  display: inline-block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px;
+  width: 60%;
+  min-width: 360px;
+  margin: auto;
+  overflow: auto;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+  width: 120px;
+  height: 140px;
+  border-radius: 5px;
+  display: inline-block;
+  margin: 5px;
+  cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .sampler {
+  width: 90%;
+  height: 75%;
+  margin: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .sampler .s_toolbar {
+  width: 100%;
+  height: 40%;
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .name {
+  width: 100%;
+  text-align: center;
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .grade1,
+.ircclient #chat .ircwrapper .chatarea .settings .grade2,
+.ircclient #chat .ircwrapper .chatarea .settings .grade3 {
+  text-align: left;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .letterbox {
+  right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .topicbar {
+  right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .topicbar {
+  display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .letterbox {
+  top: 45px;
+}
+.ircclient #chat .ircwrapper .input {
+  position: absolute;
+  bottom: 0;
+  height: 46px;
+  width: 100%;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+  margin: 5px;
+  padding: 7px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  padding-right: 20px;
+  margin-right: 0;
+  width: 183px;
+  overflow: hidden;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper {
+  display: inline-block;
+  position: absolute;
+  margin: 5px 0;
+  left: 210px;
+  right: 55px;
+  top: 0;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+  width: 100%;
+  padding: 6px;
+  font-size: 120%;
+  border-left: 0;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+  width: 32px;
+  position: absolute;
+  height: 32px;
+  float: right;
+  top: 5px;
+  right: 5px;
+  cursor: pointer;
+}
+@media all and (max-width: 600px) {
+  .vnicks .nicklist {
+    display: none !important;
+  }
+  .vnicks .letterbox {
+    right: 0 !important;
+  }
+  .vnicks .topicbar {
+    right: 0 !important;
+  }
+  .vnicks.vopentrig .nicklist {
+    display: block !important;
+  }
+  .vnicks.vopentrig .topicbar {
+    right: 45px;
+  }
+  .vnicks .smsc-nicklistbtn {
+    z-index: 12;
+    display: block !important;
+  }
+  .my_nickname {
+    display: none;
+  }
+  .inputwrapper {
+    left: 38px !important;
+  }
+}
diff --git a/public/css/theme_default.css b/public/css/theme_default.css
new file mode 100644
index 0000000..3a68ffc
--- /dev/null
+++ b/public/css/theme_default.css
@@ -0,0 +1,453 @@
+.grade1 {
+  font-size: 200%;
+  color: #00bcd4;
+}
+.grade2 {
+  font-size: 150%;
+  color: #00bcd4;
+}
+.grade3 {
+  font-size: 120%;
+  color: #00bcd4;
+}
+.ircclient {
+  background: #fff;
+  background: -moz-linear-gradient(top, #fff 0%, #e5e5e5 100%);
+  background: -webkit-linear-gradient(top, #fff 0%, #e5e5e5 100%);
+  background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100%);
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+  padding: 8px;
+  width: 300px;
+  border-radius: 5px;
+  border: 1px solid #d2d2d2;
+  -webkit-box-shadow: inset 2px 2px 4px #dcdcdc;
+  -moz-box-shadow: inset 2px 2px 4px #dcdcdc;
+  box-shadow: inset 2px 2px 4px #dcdcdc;
+}
+.ircclient input[type="submit"] {
+  background: #87e0fd;
+  background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  border: 1px solid #2196f3;
+  color: #fff;
+  font-size: 120%;
+}
+.ircclient input[type="submit"]:hover {
+  background: #c4effc;
+  background: -moz-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+  background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+  background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+}
+.ircclient .coverwindow .wrapper {
+  background-color: #f7f7f7;
+  border: 1px solid #dadada;
+  -webkit-box-shadow: 4px 4px 18px #d6d6d6;
+  -moz-box-shadow: 4px 4px 18px #d6d6d6;
+  box-shadow: 4px 4px 18px #d6d6d6;
+}
+.ircclient .coverwindow .wrapper .msg.error {
+  color: #f00;
+}
+.ircclient .coverwindow .wrapper label {
+  font-size: 80%;
+  color: #2196f3;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+  font-size: 90% !important;
+}
+.ircclient #chat .ircwrapper .toolbar {
+  background-color: #00c7e0;
+  -webkit-box-shadow: 2px 2px 4px #cecece;
+  -moz-box-shadow: 2px 2px 4px #cecece;
+  box-shadow: 2px 2px 4px #cecece;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+  background-image: url("../image/settings.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+  background-color: #29e1ff;
+  border: 1px solid #00d0ea;
+  -webkit-box-shadow: inset 4px 4px 8px #44ebff;
+  -moz-box-shadow: inset 4px 4px 8px #44ebff;
+  box-shadow: inset 4px 4px 8px #44ebff;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+  background-color: #bf0000;
+  border: 1px solid #b00;
+  -webkit-box-shadow: inset 2px 2px 3px #f00;
+  -moz-box-shadow: inset 2px 2px 3px #f00;
+  box-shadow: inset 2px 2px 3px #f00;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+  color: #ff3d3d;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
+  background-color: #63e9ff;
+  -webkit-box-shadow: inset 4px 4px 8px #86f2ff;
+  -moz-box-shadow: inset 4px 4px 8px #86f2ff;
+  box-shadow: inset 4px 4px 8px #86f2ff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
+  background-color: #00b9d8;
+  border: 1px solid #009aad;
+  -webkit-box-shadow: inset 4px 4px 8px #009caf;
+  -moz-box-shadow: inset 4px 4px 8px #009caf;
+  box-shadow: inset 4px 4px 8px #009caf;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover {
+  background-color: #00c7e8;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+  background-image: url("../image/users.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-color: #00bcd4;
+  border: 5px solid #389dbb;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+  height: auto;
+  max-height: 100px;
+  overflow: auto;
+  word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+  border-left: 1px solid #ddd;
+  background-color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick:hover {
+  background-color: #aeebff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+  background-color: #05abe0;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+  background-color: #e0e0e0;
+  border: 1px solid #a7a7a7;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button:hover {
+  background-color: #efefef;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button.selected {
+  border: 2px solid #00a0b5 !important;
+}
+.ircclient #chat .ircwrapper .input {
+  background-color: #00c7e0;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+  background-color: #00efef;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+  border: 1px solid #929292;
+  -webkit-box-shadow: inset 4px 4px 8px #d8d8d8;
+  -moz-box-shadow: inset 4px 4px 8px #d8d8d8;
+  box-shadow: inset 4px 4px 8px #d8d8d8;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+  background-image: url("../image/send.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.message.type_simple.mentioned {
+  background-color: #aeebff;
+}
+.message.type_simple .timestamp {
+  color: #696969;
+}
+.message.type_simple .timestamp:before {
+  color: #607d8b;
+  content: "[";
+}
+.message.type_simple .timestamp:after {
+  color: #607d8b;
+  content: "]";
+}
+.message.type_simple .sender {
+  color: #3f51b5;
+}
+.message.type_simple .sender:before {
+  content: "<";
+}
+.message.type_simple .sender:after {
+  content: ">";
+}
+.message.type_simple .arrowin,
+.message.type_simple .arrowout {
+  font-weight: bolder;
+}
+.message.type_simple .channel {
+  font-weight: bold;
+  color: #a0a0a0;
+}
+.message.type_simple .m_listentry .channel {
+  min-width: 120px;
+  display: inline-block;
+}
+.message.type_simple .m_listentry .usercount {
+  display: inline-block;
+  min-width: 45px;
+  text-align: center;
+}
+.message .reason:before,
+.message .hostmask:before {
+  content: "(";
+}
+.message .reason:after,
+.message .hostmask:after {
+  content: ")";
+}
+.message .reason:before,
+.message .hostmask:before,
+.message .reason:after,
+.message .hostmask:after {
+  color: #009606;
+  font-weight: bold;
+}
+.message .reason {
+  color: #bf0000;
+}
+.message .hostmask {
+  color: #004c88;
+}
+.message .arrowin {
+  color: #00ab00;
+}
+.message .arrowout {
+  color: #dc0f00;
+}
+.message.m_quit,
+.message.m_part,
+.message.m_kick {
+  color: #f00;
+}
+.message.m_join {
+  color: #008000;
+}
+.message.m_topic .content,
+.message.m_names .content {
+  color: #03a9f4;
+  font-weight: bold;
+}
+.message.m_motd .content {
+  font-family: monospace;
+}
+.message.m_nick .content,
+.message.m_notice .content {
+  color: #ff9800;
+  font-weight: bold;
+}
+.message.m_action .actionee {
+  color: #3f51b5;
+}
+.message.m_action .asterisk {
+  color: #e4c000;
+}
+.message.m_mode .content {
+  font-style: italic;
+}
+.message.m_mode .mode {
+  color: #008000;
+}
+.message.m_mode .asterisk {
+  color: #05abe0;
+}
+.message.m_error .content {
+  color: #f00;
+  font-weight: bold;
+}
+.message.m_help .content {
+  color: #008000;
+  font-weight: bold;
+}
+.message .irc-bg00,
+.topicbar .irc-bg00,
+.message .irc-bg0,
+.topicbar .irc-bg0 {
+  background-color: #fff;
+}
+.message .irc-bg01,
+.topicbar .irc-bg01,
+.message .irc-bg1,
+.topicbar .irc-bg1 {
+  background-color: #000;
+}
+.message .irc-bg02,
+.topicbar .irc-bg02,
+.message .irc-bg2,
+.topicbar .irc-bg2 {
+  background-color: #000080;
+}
+.message .irc-bg03,
+.topicbar .irc-bg03,
+.message .irc-bg3,
+.topicbar .irc-bg3 {
+  background-color: #008000;
+}
+.message .irc-bg04,
+.topicbar .irc-bg04,
+.message .irc-bg4,
+.topicbar .irc-bg4 {
+  background-color: #f00;
+}
+.message .irc-bg05,
+.topicbar .irc-bg05,
+.message .irc-bg5,
+.topicbar .irc-bg5 {
+  background-color: #a52a2a;
+}
+.message .irc-bg06,
+.topicbar .irc-bg06,
+.message .irc-bg6,
+.topicbar .irc-bg6 {
+  background-color: #800080;
+}
+.message .irc-bg07,
+.topicbar .irc-bg07,
+.message .irc-bg7,
+.topicbar .irc-bg7 {
+  background-color: #ffa500;
+}
+.message .irc-bg08,
+.topicbar .irc-bg08,
+.message .irc-bg8,
+.topicbar .irc-bg8 {
+  background-color: #ff0;
+}
+.message .irc-bg09,
+.topicbar .irc-bg09,
+.message .irc-bg9,
+.topicbar .irc-bg9 {
+  background-color: #0f0;
+}
+.message .irc-bg10,
+.topicbar .irc-bg10 {
+  background-color: #008080;
+}
+.message .irc-bg11,
+.topicbar .irc-bg11 {
+  background-color: #0ff;
+}
+.message .irc-bg12,
+.topicbar .irc-bg12 {
+  background-color: #00f;
+}
+.message .irc-bg13,
+.topicbar .irc-bg13 {
+  background-color: #ffc0cb;
+}
+.message .irc-bg14,
+.topicbar .irc-bg14 {
+  background-color: #808080;
+}
+.message .irc-bg15,
+.topicbar .irc-bg15 {
+  background-color: #d3d3d3;
+}
+.message .irc-fg00,
+.topicbar .irc-fg00,
+.message .irc-fg0,
+.topicbar .irc-fg0 {
+  color: #fff;
+}
+.message .irc-fg01,
+.topicbar .irc-fg01,
+.message .irc-fg1,
+.topicbar .irc-fg1 {
+  color: #000;
+}
+.message .irc-fg02,
+.topicbar .irc-fg02,
+.message .irc-fg2,
+.topicbar .irc-fg2 {
+  color: #000080;
+}
+.message .irc-fg03,
+.topicbar .irc-fg03,
+.message .irc-fg3,
+.topicbar .irc-fg3 {
+  color: #008000;
+}
+.message .irc-fg04,
+.topicbar .irc-fg04,
+.message .irc-fg4,
+.topicbar .irc-fg4 {
+  color: #f00;
+}
+.message .irc-fg05,
+.topicbar .irc-fg05,
+.message .irc-fg5,
+.topicbar .irc-fg5 {
+  color: #a52a2a;
+}
+.message .irc-fg06,
+.topicbar .irc-fg06,
+.message .irc-fg6,
+.topicbar .irc-fg6 {
+  color: #800080;
+}
+.message .irc-fg07,
+.topicbar .irc-fg07,
+.message .irc-fg7,
+.topicbar .irc-fg7 {
+  color: #ffa500;
+}
+.message .irc-fg08,
+.topicbar .irc-fg08,
+.message .irc-fg8,
+.topicbar .irc-fg8 {
+  color: #dcdc00;
+}
+.message .irc-fg09,
+.topicbar .irc-fg09,
+.message .irc-fg9,
+.topicbar .irc-fg9 {
+  color: #00e600;
+}
+.message .irc-fg10,
+.topicbar .irc-fg10 {
+  color: #008080;
+}
+.message .irc-fg11,
+.topicbar .irc-fg11 {
+  color: #00d2d2;
+}
+.message .irc-fg12,
+.topicbar .irc-fg12 {
+  color: #00f;
+}
+.message .irc-fg13,
+.topicbar .irc-fg13 {
+  color: #ffc0cb;
+}
+.message .irc-fg14,
+.topicbar .irc-fg14 {
+  color: #808080;
+}
+.message .irc-fg15,
+.topicbar .irc-fg15 {
+  color: #d3d3d3;
+}
+.message .irc-bold,
+.topicbar .irc-bold {
+  font-weight: bold;
+}
+.message .irc-italic,
+.topicbar .irc-italic {
+  font-style: italic;
+}
+.message .irc-underline,
+.topicbar .irc-underline {
+  text-decoration: underline;
+}
diff --git a/public/css/theme_night.css b/public/css/theme_night.css
new file mode 100644
index 0000000..6a51dde
--- /dev/null
+++ b/public/css/theme_night.css
@@ -0,0 +1,468 @@
+.grade1 {
+  font-size: 200%;
+  color: #00bcd4;
+}
+.grade2 {
+  font-size: 150%;
+  color: #00bcd4;
+}
+.grade3 {
+  font-size: 120%;
+  color: #00bcd4;
+}
+a {
+  color: #23e7ff;
+}
+a:hover {
+  color: #5dedff;
+}
+.ircclient {
+  background: #1d1d1d;
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+  padding: 8px;
+  width: 300px;
+  border-radius: 5px;
+  border: 1px solid #d2d2d2;
+  -webkit-box-shadow: inset 2px 2px 4px #dcdcdc;
+  -moz-box-shadow: inset 2px 2px 4px #dcdcdc;
+  box-shadow: inset 2px 2px 4px #dcdcdc;
+}
+.ircclient input[type="submit"] {
+  background: #87e0fd;
+  background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+  border: 1px solid #2196f3;
+  color: #fff;
+  font-size: 120%;
+}
+.ircclient input[type="submit"]:hover {
+  background: #c4effc;
+  background: -moz-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+  background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+  background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+}
+.ircclient .coverwindow .wrapper {
+  background-color: #3e3e3e;
+  border: 1px solid #171717;
+  -webkit-box-shadow: 4px 4px 18px #383838;
+  -moz-box-shadow: 4px 4px 18px #383838;
+  box-shadow: 4px 4px 18px #383838;
+  color: #fff;
+}
+.ircclient .coverwindow .wrapper .msg.error {
+  color: #f00;
+}
+.ircclient .coverwindow .wrapper label {
+  font-size: 80%;
+  color: #67bcff;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+  font-size: 90% !important;
+}
+.ircclient #chat .ircwrapper .toolbar {
+  background-color: #008e8e;
+  -webkit-box-shadow: 2px 2px 4px #585858;
+  -moz-box-shadow: 2px 2px 4px #585858;
+  box-shadow: 2px 2px 4px #585858;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+  background-image: url("../image/settings.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+  background-color: #00bfde;
+  border: 1px solid #0092a5;
+  -webkit-box-shadow: inset 4px 4px 8px #00d1ea;
+  -moz-box-shadow: inset 4px 4px 8px #00d1ea;
+  box-shadow: inset 4px 4px 8px #00d1ea;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+  background-color: #bf0000;
+  border: 1px solid #b00;
+  -webkit-box-shadow: inset 2px 2px 3px #f00;
+  -moz-box-shadow: inset 2px 2px 3px #f00;
+  box-shadow: inset 2px 2px 3px #f00;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+  color: #ff3d3d;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
+  background-color: #00dbff;
+  -webkit-box-shadow: inset 4px 4px 8px #23e7ff;
+  -moz-box-shadow: inset 4px 4px 8px #23e7ff;
+  box-shadow: inset 4px 4px 8px #23e7ff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
+  background-color: #006a7b;
+  border: 1px solid #006a77;
+  -webkit-box-shadow: inset 4px 4px 8px #003940;
+  -moz-box-shadow: inset 4px 4px 8px #003940;
+  box-shadow: inset 4px 4px 8px #003940;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover {
+  background-color: #00859a;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+  background-image: url("../image/users.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-color: #00bcd4;
+  border: 5px solid #389dbb;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+  background-color: #2d2d2d;
+  border-bottom: 1px solid #000;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+  height: auto;
+  max-height: 100px;
+  overflow: auto;
+  word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+  background-color: #2d2d2d;
+  border-left: 1px solid #000;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick:hover {
+  background-color: #006282;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+  background-color: #05abe0;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings {
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+  background-color: #424242;
+  border: 1px solid #444;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button:hover {
+  background-color: #545454;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button.selected {
+  border: 2px solid #00e2ff !important;
+}
+.ircclient #chat .ircwrapper .input {
+  background-color: #005a5a;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+  background-color: #009494;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+  -webkit-box-shadow: inset 4px 4px 8px #001419;
+  -moz-box-shadow: inset 4px 4px 8px #001419;
+  box-shadow: inset 4px 4px 8px #001419;
+  background-color: #002b36;
+  border: 1px solid #008e8e;
+  color: #fff;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+  background-image: url("../image/send.svg");
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.message {
+  color: #fff;
+}
+.message.type_simple.mentioned {
+  background-color: #006282;
+}
+.message.type_simple .timestamp {
+  color: #afafaf;
+}
+.message.type_simple .timestamp:before {
+  color: #607d8b;
+  content: "[";
+}
+.message.type_simple .timestamp:after {
+  color: #607d8b;
+  content: "]";
+}
+.message.type_simple .sender {
+  color: #3f51b5;
+}
+.message.type_simple .sender:before {
+  content: "<";
+}
+.message.type_simple .sender:after {
+  content: ">";
+}
+.message.type_simple .arrowin,
+.message.type_simple .arrowout {
+  font-weight: bolder;
+}
+.message.type_simple .channel {
+  font-weight: bold;
+  color: #a0a0a0;
+}
+.message.type_simple .m_listentry .channel {
+  min-width: 120px;
+  display: inline-block;
+}
+.message.type_simple .m_listentry .usercount {
+  display: inline-block;
+  min-width: 45px;
+  text-align: center;
+}
+.message .reason:before,
+.message .hostmask:before {
+  content: "(";
+}
+.message .reason:after,
+.message .hostmask:after {
+  content: ")";
+}
+.message .reason:before,
+.message .hostmask:before,
+.message .reason:after,
+.message .hostmask:after {
+  color: #009606;
+  font-weight: bold;
+}
+.message .reason {
+  color: #bf0000;
+}
+.message .hostmask {
+  color: #1999ff;
+}
+.message .arrowin {
+  color: #00ab00;
+}
+.message .arrowout {
+  color: #dc0f00;
+}
+.message.m_quit,
+.message.m_part,
+.message.m_kick {
+  color: #f00;
+}
+.message.m_join {
+  color: #008000;
+}
+.message.m_topic .content,
+.message.m_names .content {
+  color: #03a9f4;
+  font-weight: bold;
+}
+.message.m_motd .content {
+  font-family: monospace;
+}
+.message.m_nick .content,
+.message.m_notice .content {
+  color: #ff9800;
+  font-weight: bold;
+}
+.message.m_action .actionee {
+  color: #3f51b5;
+}
+.message.m_action .asterisk {
+  color: #e4c000;
+}
+.message.m_mode .content {
+  font-style: italic;
+}
+.message.m_mode .mode {
+  color: #0f0;
+}
+.message.m_mode .asterisk {
+  color: #05abe0;
+}
+.message.m_error .content {
+  color: #f00;
+  font-weight: bold;
+}
+.message.m_help .content {
+  color: #0f0;
+  font-weight: bold;
+}
+.message .irc-bg00,
+.topicbar .irc-bg00,
+.message .irc-bg0,
+.topicbar .irc-bg0 {
+  background-color: #fff;
+}
+.message .irc-bg01,
+.topicbar .irc-bg01,
+.message .irc-bg1,
+.topicbar .irc-bg1 {
+  background-color: #000;
+}
+.message .irc-bg02,
+.topicbar .irc-bg02,
+.message .irc-bg2,
+.topicbar .irc-bg2 {
+  background-color: #000080;
+}
+.message .irc-bg03,
+.topicbar .irc-bg03,
+.message .irc-bg3,
+.topicbar .irc-bg3 {
+  background-color: #008000;
+}
+.message .irc-bg04,
+.topicbar .irc-bg04,
+.message .irc-bg4,
+.topicbar .irc-bg4 {
+  background-color: #f00;
+}
+.message .irc-bg05,
+.topicbar .irc-bg05,
+.message .irc-bg5,
+.topicbar .irc-bg5 {
+  background-color: #a52a2a;
+}
+.message .irc-bg06,
+.topicbar .irc-bg06,
+.message .irc-bg6,
+.topicbar .irc-bg6 {
+  background-color: #800080;
+}
+.message .irc-bg07,
+.topicbar .irc-bg07,
+.message .irc-bg7,
+.topicbar .irc-bg7 {
+  background-color: #ffa500;
+}
+.message .irc-bg08,
+.topicbar .irc-bg08,
+.message .irc-bg8,
+.topicbar .irc-bg8 {
+  background-color: #ff0;
+}
+.message .irc-bg09,
+.topicbar .irc-bg09,
+.message .irc-bg9,
+.topicbar .irc-bg9 {
+  background-color: #0f0;
+}
+.message .irc-bg10,
+.topicbar .irc-bg10 {
+  background-color: #008080;
+}
+.message .irc-bg11,
+.topicbar .irc-bg11 {
+  background-color: #0ff;
+}
+.message .irc-bg12,
+.topicbar .irc-bg12 {
+  background-color: #0091bd;
+}
+.message .irc-bg13,
+.topicbar .irc-bg13 {
+  background-color: #ffc0cb;
+}
+.message .irc-bg14,
+.topicbar .irc-bg14 {
+  background-color: #808080;
+}
+.message .irc-bg15,
+.topicbar .irc-bg15 {
+  background-color: #d3d3d3;
+}
+.message .irc-fg00,
+.topicbar .irc-fg00,
+.message .irc-fg0,
+.topicbar .irc-fg0 {
+  color: #fff;
+}
+.message .irc-fg01,
+.topicbar .irc-fg01,
+.message .irc-fg1,
+.topicbar .irc-fg1 {
+  color: #000;
+}
+.message .irc-fg02,
+.topicbar .irc-fg02,
+.message .irc-fg2,
+.topicbar .irc-fg2 {
+  color: #000080;
+}
+.message .irc-fg03,
+.topicbar .irc-fg03,
+.message .irc-fg3,
+.topicbar .irc-fg3 {
+  color: #008000;
+}
+.message .irc-fg04,
+.topicbar .irc-fg04,
+.message .irc-fg4,
+.topicbar .irc-fg4 {
+  color: #f00;
+}
+.message .irc-fg05,
+.topicbar .irc-fg05,
+.message .irc-fg5,
+.topicbar .irc-fg5 {
+  color: #a52a2a;
+}
+.message .irc-fg06,
+.topicbar .irc-fg06,
+.message .irc-fg6,
+.topicbar .irc-fg6 {
+  color: #800080;
+}
+.message .irc-fg07,
+.topicbar .irc-fg07,
+.message .irc-fg7,
+.topicbar .irc-fg7 {
+  color: #ffa500;
+}
+.message .irc-fg08,
+.topicbar .irc-fg08,
+.message .irc-fg8,
+.topicbar .irc-fg8 {
+  color: #dcdc00;
+}
+.message .irc-fg09,
+.topicbar .irc-fg09,
+.message .irc-fg9,
+.topicbar .irc-fg9 {
+  color: #00e600;
+}
+.message .irc-fg10,
+.topicbar .irc-fg10 {
+  color: #008080;
+}
+.message .irc-fg11,
+.topicbar .irc-fg11 {
+  color: #00d2d2;
+}
+.message .irc-fg12,
+.topicbar .irc-fg12 {
+  color: #00f;
+}
+.message .irc-fg13,
+.topicbar .irc-fg13 {
+  color: #ffc0cb;
+}
+.message .irc-fg14,
+.topicbar .irc-fg14 {
+  color: #808080;
+}
+.message .irc-fg15,
+.topicbar .irc-fg15 {
+  color: #d3d3d3;
+}
+.message .irc-bold,
+.topicbar .irc-bold {
+  font-weight: bold;
+}
+.message .irc-italic,
+.topicbar .irc-italic {
+  font-style: italic;
+}
+.message .irc-underline,
+.topicbar .irc-underline {
+  text-decoration: underline;
+}
diff --git a/public/index.html b/public/index.html
index b1ced17..4c2f5f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,9 +11,11 @@
 		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
 		<script type="text/javascript" src="js/main.js"></script>
 		<script type="text/javascript" src="js/colorparser.js"></script>
+		<script type="text/javascript" src="js/theme.js"></script>
 
 		<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
-		<link rel="stylesheet" type="text/css" href="css/main.css">
+		<link rel="stylesheet" type="text/css" href="css/layout.css">
+		<link rel="stylesheet" type="text/css" href="css/theme_default.css" id="theme_stylesheet">
 	</head>
 	<!-- Codepony Diamond -->
 	<body>
@@ -70,7 +72,7 @@
 							<input type="text" name="timestamp_format" id="s_timestampFormat" value="HH:mm:ss"><br>
 							<i style="font-size: 80%;">`<code>hh:mm:ss TT</code>` would be 12-hour format with PM/AM</i>
 							<h1 class="grade3">Themes</h1>
-							<p><i>Coming soon!</i></p>
+							<div class="available_themes"></div>
 							<br>
 							<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
 							<span class="grade3" id="settings_status"></span>
diff --git a/public/js/main.js b/public/js/main.js
index fad200a..18070cf 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -7,7 +7,8 @@ window.irc = {
 		timestamps: true,
 		timestampFormat: "HH:mm:ss",
 		colorNicknames: true,
-		colorNicklist: false
+		colorNicklist: false,
+		theme: "default"
 	},
 	serverData: {},
 	serverChatQueue: {},
@@ -18,16 +19,13 @@ window.irc = {
 window.clientdom = {connector: {}, settings: {}};
 
 window.colorizer = {
-	theme: {
-		H: [1, 360],
-		S: [30, 100],
-		L: [30, 70]
-	},
 	get_random_color: function(nickname) {
+		let themefunc = window.themes.available[irc.config.theme].nick_pallete;
+
 		Math.seedrandom(nickname);
-		let h = rand(colorizer.theme.H[0], colorizer.theme.H[1]); // color hue between 1 and 360
-		let s = rand(colorizer.theme.S[0], colorizer.theme.S[1]); // saturation 30-100%
-		let l = rand(colorizer.theme.L[0], colorizer.theme.L[1]); // lightness 30-70%
+		let h = rand(themefunc.H[0], themefunc.H[1]);
+		let s = rand(themefunc.S[0], themefunc.S[1]);
+		let l = rand(themefunc.L[0], themefunc.L[1]);
 		return 'hsl(' + h + ',' + s + '%,' + l + '%)';
 	},
 	strip: function(message) {
@@ -252,12 +250,19 @@ function linkify(text) {
 
 function removeClass(element, cl) {
 	let classList = element.className.split(" ");
-	remove_str(classList, cl);
+
+	if(classList.indexOf(cl) != -1)
+		classList.splice(classList.indexOf(cl), 1);
+	
 	element.className = classList.join(" ");
 }
 
 function addClass(element, cl) {
 	let classList = element.className.split(" ");
+	
+	if(classList.indexOf(cl) != -1)
+		return;
+
 	classList.push(cl);
 	element.className = classList.join(" ");
 }
@@ -339,6 +344,25 @@ let composer = {
 			}
 			return element;
 		}
+	},
+	theme_selection: function(name, theme) {
+		let btn = document.createElement('div');
+		btn.className = "theme_button theme_"+theme.type;
+		let sampler = document.createElement('div');
+		sampler.className = "sampler";
+		sampler.style['background-color'] = theme.colorSamples.background;
+		let toolbar = document.createElement('span');
+		toolbar.className = "s_toolbar";
+		toolbar.style['background-color'] = theme.colorSamples.toolbar;
+		let nameb = document.createElement('span');
+		nameb.className = "name";
+		nameb.innerHTML = theme['name'];
+		sampler.appendChild(toolbar);
+		btn.appendChild(sampler);
+		btn.appendChild(nameb);
+		btn.setAttribute('id', 'theme-'+name);
+
+		return btn;
 	}
 }
 
@@ -939,6 +963,7 @@ class Settings extends Buffer {
 		this.tab = null;
 		this.isOpen = false;
 		this.timeout = null;
+		this.themeSelection = "";
 
 		clientdom.settings.save.onclick = (e) => {
 			this.saveSpecified();
@@ -947,6 +972,46 @@ class Settings extends Buffer {
 		clientdom.settings.open.onclick = (e) => {
 			this.open();
 		}
+
+		this.theme_buttons();
+	}
+
+	set_active_selection(name) {
+		let all = clientdom.settings.available_themes.querySelectorAll('.theme_button');
+		if(all.length > 0) {
+			for(let a in all) {
+				if(all[a] && all[a]['className']) {
+					let elem = all[a];
+					if(elem.getAttribute('id') == 'theme-'+name) {
+						addClass(elem, "selected");
+					} else {
+						removeClass(elem, "selected");
+					}
+				}
+			}
+		}
+	}
+
+	theme_buttons() {
+		for(let n in window.themes.available) {
+			let theme = window.themes.available[n];
+			let button = composer.theme_selection(n, theme);
+
+			clientdom.settings.available_themes.appendChild(button);
+
+			button.onclick = (e) => {
+				this.themeSelection = n;
+				this.set_active_selection(this.themeSelection);
+			}
+		}
+	}
+
+	switch_theme() {
+		if(this.themeSelection != '') {
+			window.themes.change_theme(this.themeSelection);
+			irc.config.theme = this.themeSelection;
+			this.set_active_selection(this.themeSelection);
+		}
 	}
 
 	open() {
@@ -972,14 +1037,18 @@ class Settings extends Buffer {
 		if(this.timeout)
 			clearTimeout(this.timeout);
 
+		this.switch_theme();
+
 		for(let key in irc.config) {
 			let value = irc.config[key];
 			let type = typeof(value);
 
-			if(type == "boolean")
-				irc.config[key] = clientdom.settings[key].checked;
-			else
-				irc.config[key] = clientdom.settings[key].value;
+			if(clientdom.settings[key]) {
+				if(type == "boolean")
+					irc.config[key] = clientdom.settings[key].checked;
+				else
+					irc.config[key] = clientdom.settings[key].value;
+			}
 		}
 		clientdom.settings.saveStatus.innerHTML = "<span class='success'>Settings saved!</span>";
 
@@ -1000,7 +1069,13 @@ class Settings extends Buffer {
 					for(let key in irc.config) {
 						let value = irc.config[key];
 						let type = typeof(value);
+
 						if(settings[key]) {
+							if(key == 'theme') {
+								this.themeSelection = settings[key];
+								continue;
+							}
+
 							if(type == "boolean")
 								clientdom.settings[key].checked = settings[key];
 							else
@@ -1017,10 +1092,12 @@ class Settings extends Buffer {
 			let value = irc.config[key];
 			let type = typeof(value);
 
-			if(type == "boolean")
-				clientdom.settings[key].checked = value;
-			else
-				clientdom.settings[key].value = value;
+			if(clientdom.settings[key]) {
+				if(type == "boolean")
+					clientdom.settings[key].checked = value;
+				else
+					clientdom.settings[key].value = value;
+			}
 		}
 	}
 
@@ -1777,6 +1854,7 @@ window.onload = function() {
 		clientdom.settings[key] = clientdom.settings.frame.querySelector('#s_'+key);
 	}
 
+	clientdom.settings['available_themes'] = clientdom.settings.frame.querySelector('.available_themes');
 	clientdom.settings['save'] = clientdom.settings.frame.querySelector('#save_settings');
 	clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
 	clientdom.connector['frame'] = irc.primaryFrame.querySelector('#authdialog');
diff --git a/public/js/theme.js b/public/js/theme.js
new file mode 100644
index 0000000..6434d53
--- /dev/null
+++ b/public/js/theme.js
@@ -0,0 +1,46 @@
+function swapSheet(name) {
+	document.querySelector("#theme_stylesheet").setAttribute('href', "css/"+name+".css");
+}
+
+window.themes = {
+	available: {
+		default: {
+			name: "Default",
+			type: "bright",
+			nick_pallete: {
+				H: [1, 360],
+				S: [30, 100],
+				L: [30, 70]
+			},
+			stylesheet: "theme_default",
+			default: true,
+			colorSamples: {
+				toolbar: "#00c7e0",
+				background: "#f5f5f5"
+			}
+		},
+
+		night: {
+			name: "Night",
+			type: "dark",
+			nick_pallete: {
+				H: [1, 360],
+				S: [30, 100],
+				L: [40, 90]
+			},
+			stylesheet: "theme_night",
+			default: false,
+			colorSamples: {
+				toolbar: "#008e8e",
+				background: "#1d1d1d"
+			}
+		}
+	},
+
+	change_theme: function(name) {
+		if(name in themes.available) {
+			swapSheet(themes.available[name].stylesheet);
+			window.irc.config.theme = name;
+		}
+	}
+}
diff --git a/public/main.styl b/public/main.styl
index cabe842..ab996c4 100644
--- a/public/main.styl
+++ b/public/main.styl
@@ -1,4 +1,4 @@
-// Run `stylus -w main.styl -o css` to compile
+// Run `stylus -w styl -o css` to compile
 props(prop, args)
     -webkit-{prop} args
     -moz-{prop} args
@@ -6,54 +6,36 @@ props(prop, args)
     -o-{prop} args
     {prop} args
     
-props2(prop, args)
-    -webkit-{prop} args
-    -moz-{prop} args
-    {prop} args
-    
 transition()
     props('transition', arguments)
 
-box-shadow()
-    props2('box-shadow', arguments)
-
 body
     margin: 0
     padding: 0
     font-family: Open Sans, Everson Mono, Helvetica
 
 .grade1
-    font-size: 200%
     margin-bottom: 0
     margin-top: 0
     display: block
-    color: #00BCD4
     text-align: center
 
 .grade2
-    font-size: 150%
     margin-bottom: 0
     margin-top: 20px
     display: block
-    color: #00BCD4
     text-align: center
 
 .grade3
-    font-size: 120%
     margin-bottom: 0
     margin-top: 20px
     display: block
-    color: #00BCD4
     text-align: center
 
 .ircclient
     position: absolute
     width: 100%
     height: 100%
-    background: rgb(255,255,255)
-    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%)
-    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
-    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
     .coverwindow
         position: absolute
         width: 100%
@@ -65,16 +47,10 @@ body
             margin: auto
             margin-top: 5%
             padding: 15px
-            background-color: #f7f7f7;
-            border: 1px solid #dadada;
-            box-shadow 4px 4px 18px #d6d6d6;
-            .msg.error
-                color: red;
             label
                 display: block
                 font-size: 80%
                 margin-top: 5px
-                color: #2196F3
                 &.autosize
                     width: auto
                     display: inline-block !important
@@ -84,29 +60,16 @@ body
                 padding: 8px;
                 width: 300px;
                 border-radius: 5px;
-                border: 1px solid #d2d2d2;
-                box-shadow inset 2px 2px 4px #dcdcdc;
             input[type="submit"]
                 width: 318px;
                 padding: 12px;
                 margin-top: 20px;
                 display: block;
-                background: rgb(135,224,253);
-                background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
-                background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
-                background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
-                border: 1px solid #2196F3;
                 border-radius: 4px;
-                color: #fff;
                 font-size: 120%;
                 font-weight: bold;
                 text-transform: uppercase;
                 cursor: pointer
-                &:hover
-                    background: rgb(196,239,252);
-                    background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
-                    background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
-                    background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
     #chat
         overflow: hidden;
         .ircwrapper
@@ -115,10 +78,8 @@ body
             height: 100%
             .toolbar
                 height: 56px
-                background-color: #00c7e0
                 position: relative
                 z-index: 15
-                box-shadow 2px 2px 4px #cecece
                 .open_settings
                     width: 36px;
                     height: 36px;
@@ -127,21 +88,18 @@ body
                     right: 10px;
                     top: 10px;
                     cursor: pointer;
-                    background-image: url(../image/settings.svg);
-                    background-repeat: no-repeat;
-                    background-size: contain;
                     transition transform 0.2s linear
                     &:hover
                         transform: rotateZ(-90deg);
                 .tabby
-                    display: inline-block;
-                    height: 56px;
-                    position: absolute;
-                    right: 45px;
-                    left: 0;
-                    white-space: nowrap;
-                    overflow-x: auto;
-                    overflow-y: hidden;
+                    display: inline-block
+                    height: 56px
+                    position: absolute
+                    right: 45px
+                    left: 0
+                    white-space: nowrap
+                    overflow-x: auto
+                    overflow-y: hidden
                     .tab
                         display: inline-block;
                         min-width: 60px;
@@ -150,21 +108,14 @@ body
                         margin-right: 0;
                         padding: 10px;
                         line-height: 25px;
-                        background-color: #29e1ff;
                         transition background-color 0.2s linear
                         border-radius: 5px;
-                        border: 1px solid #00d0ea;
-                        box-shadow inset 4px 4px 8px #44ebff;
-                        color: #fff;
                         cursor: pointer;
                         font-weight: 600;
                         #unread
                             display: inline-block;
                             min-width: 18px;
                             height: 18px;
-                            background-color: #bf0000;
-                            border: 1px solid #b00;
-                            box-shadow inset 2px 2px 3px #f00;
                             text-align: center;
                             font-size: 12px;
                             margin: 0 5px;
@@ -176,35 +127,20 @@ body
                             display: inline-block;
                             width: 12px;
                             text-align: center;
-                            color: #ff3d3d;
                             margin-left: 5px
-                        &:hover
-                            background-color: #63e9ff;
-                            box-shadow inset 4px 4px 8px #86f2ff;
-                        &.active
-                            background-color: #00b9d8;
-                            border: 1px solid #009aad;
-                            box-shadow inset 4px 4px 8px #009caf;
-                            color: #ffffff;
-                            &:hover
-                                background-color: #00c7e8;
+
             .chatarea
                 position: absolute;
                 top: 56px;
                 width: 100%;
                 bottom: 46px;
                 .smsc-nicklistbtn
-                    background-image: url(../image/users.svg);
-                    background-repeat: no-repeat;
-                    background-size: contain;
                     width: 46px;
                     height: 46px;
                     position: absolute;
                     top: 16px;
                     right: 16px;
-                    background-color: #00bcd4;
                     border-radius: 100%;
-                    border: 5px solid #389dbb;
                     display: none;
                     opacity: 0.5;
                     cursor: pointer;
@@ -214,8 +150,6 @@ body
                     height: 20px;
                     right: 0;
                     left: 0;
-                    background-color: #fff;
-                    border-bottom: 1px solid #ddd;
                     padding: 12px;
                     display: none;
                     overflow: hidden;
@@ -239,18 +173,14 @@ body
                     width: 280px;
                     position: absolute;
                     right: 0;
-                    border-left: 1px solid #ddd;
                     padding: 10px;
                     top: 0;
                     bottom: 0;
                     display: none;
                     z-index: 11;
-                    background-color: #ffffff;
                     overflow: auto;
                     .nick
                         cursor: pointer;
-                        &:hover
-                            background-color: #aeebff;
                         .nickname
                             font-size: 120%;
                         .prefix
@@ -259,9 +189,7 @@ body
                             line-height: 16px;
                             padding: 2px;
                             display: inline-block;
-                            background-color: #05abe0;
                             border-radius: 4px;
-                            color: #fff;
                             text-align: center;
                             margin-right: 5px;
                             font-weight: bold;
@@ -298,9 +226,7 @@ body
                 bottom: 0;
                 height: 46px;
                 width: 100%;
-                background-color: #00c7e0;
                 .my_nickname
-                    background-color: #00efef;
                     margin: 5px;
                     padding: 7px;
                     border-top-left-radius: 10px;
@@ -320,13 +246,8 @@ body
                         width: 100%
                         padding: 6px
                         font-size: 120%
-                        border: 1px solid #929292
                         border-left: 0
-                        box-shadow inset 4px 4px 8px #d8d8d8
                 .sendbutton
-                    background-image: url(../image/send.svg);
-                    background-repeat: no-repeat;
-                    background-size: contain;
                     width: 32px;
                     position: absolute;
                     height: 32px;
@@ -334,158 +255,6 @@ body
                     top: 5px;
                     right: 5px;
                     cursor: pointer;
-                        
-
-.message
-    &.type_simple
-        &.mentioned
-            background-color: #aeebff;
-        .timestamp
-            color: #696969;
-            &:before
-                color: #607D8B;
-                content: "[";
-            &:after
-                color: #607D8B;
-                content: "]";
-        .sender
-            color: #3F51B5;
-            &:before
-                content: "<";
-            &:after
-                content: ">";
-        .arrowin, .arrowout
-            font-weight: bolder;
-        .channel
-            font-weight: bold;
-            color: #a0a0a0;
-        .m_listentry 
-            .channel
-                min-width: 120px;
-                display: inline-block;
-            .usercount
-                display: inline-block;
-                min-width: 45px;
-                text-align: center;
-
-    .reason, .hostmask
-        &:before
-            content: "(";
-        &:after
-            content: ")";
-        &:before, &:after
-            color: #009606;
-            font-weight: bold;
-    .reason
-        color: #bf0000;
-    .hostmask
-        color: #004c88;
-    .arrowin
-        color: #00ab00;
-    .arrowout
-        color: #dc0f00;
-    &.m_quit, &.m_part, &.m_kick
-        color: red;
-    &.m_join
-        color: green;
-    &.m_topic .content, &.m_names .content
-        color: #03A9F4;
-        font-weight: bold;
-    &.m_motd .content
-        font-family: monospace;
-    &.m_nick .content, &.m_notice .content
-        color: #FF9800;
-        font-weight: bold;
-    &.m_action 
-        .actionee
-            color: #3f51b5;
-        .asterisk
-            color: #e4c000;
-    &.m_mode 
-        .content
-            font-style: italic;
-        .mode
-            color: #008000;
-        .asterisk
-            color: #05abe0
-    &.m_error .content
-        color: red;
-        font-weight: bold;
-    &.m_help .content
-        color: #008000;
-        font-weight: bold;
-
-.message, .topicbar
-    .irc-bg00,.irc-bg0 
-        background-color: white
-    .irc-bg01,.irc-bg1 
-        background-color: black
-    .irc-bg02,.irc-bg2 
-        background-color: navy
-    .irc-bg03,.irc-bg3 
-        background-color: green
-    .irc-bg04,.irc-bg4 
-        background-color: red
-    .irc-bg05,.irc-bg5 
-        background-color: brown
-    .irc-bg06,.irc-bg6 
-        background-color: purple
-    .irc-bg07,.irc-bg7 
-        background-color: orange
-    .irc-bg08,.irc-bg8 
-        background-color: yellow
-    .irc-bg09,.irc-bg9 
-        background-color: lime
-    .irc-bg10 
-        background-color: teal
-    .irc-bg11 
-        background-color: cyan
-    .irc-bg12 
-        background-color: blue
-    .irc-bg13 
-        background-color: pink
-    .irc-bg14 
-        background-color: grey
-    .irc-bg15 
-        background-color: lightgrey
-    .irc-fg00,.irc-fg0 
-        color: white
-    .irc-fg01,.irc-fg1 
-        color: black
-    .irc-fg02,.irc-fg2 
-        color: navy
-    .irc-fg03,.irc-fg3 
-        color: green
-    .irc-fg04,.irc-fg4 
-        color: red
-    .irc-fg05,.irc-fg5 
-        color: brown
-    .irc-fg06,.irc-fg6 
-        color: purple
-    .irc-fg07,.irc-fg7 
-        color: orange
-    .irc-fg08,.irc-fg8 
-        color: #dcdc00
-    .irc-fg09,.irc-fg9 
-        color: #00e600
-    .irc-fg10 
-        color: teal
-    .irc-fg11 
-        color: #00d2d2
-    .irc-fg12 
-        color: blue
-    .irc-fg13 
-        color: pink
-    .irc-fg14 
-        color: grey
-    .irc-fg15 
-        color: lightgrey
-    .irc-bold
-        font-weight: bold
-    .irc-italic
-        font-style: italic
-    .irc-underline
-        text-decoration: underline
 
 @media all and (max-width: 600px)
     .vnicks
diff --git a/public/stylus/layout.styl b/public/stylus/layout.styl
new file mode 100644
index 0000000..b58271c
--- /dev/null
+++ b/public/stylus/layout.styl
@@ -0,0 +1,297 @@
+// Run `stylus -w styl -o css` to compile
+props(prop, args)
+    -webkit-{prop} args
+    -moz-{prop} args
+    -ms-{prop} args
+    -o-{prop} args
+    {prop} args
+    
+transition()
+    props('transition', arguments)
+
+body
+    margin: 0
+    padding: 0
+    font-family: Open Sans, Everson Mono, Helvetica
+
+.grade1
+    margin-bottom: 0
+    margin-top: 0
+    display: block
+    text-align: center
+
+.grade2
+    margin-bottom: 0
+    margin-top: 20px
+    display: block
+    text-align: center
+
+.grade3
+    margin-bottom: 0
+    margin-top: 20px
+    display: block
+    text-align: center
+
+.ircclient
+    position: absolute
+    width: 100%
+    height: 100%
+    input[type=text], input[type=number], input[type=password]
+        padding: 8px;
+        width: 300px;
+        border-radius: 5px;
+    input[type="submit"]
+        width: 318px;
+        padding: 12px;
+        margin-top: 20px;
+        display: block;
+        border-radius: 4px;
+        font-size: 120%;
+        font-weight: bold;
+        text-transform: uppercase;
+        cursor: pointer
+    .coverwindow
+        position: absolute
+        width: 100%
+        height: 100%
+        &#authdialog
+            z-index: 100
+        .wrapper
+            width: 320px
+            margin: auto
+            margin-top: 5%
+            padding: 15px
+            label
+                display: block
+                font-size: 80%
+                margin-top: 5px
+                &.autosize
+                    width: auto
+                    display: inline-block !important
+                    font-size: 90% !important
+                    margin-bottom: 10px
+    #chat
+        overflow: hidden;
+        .ircwrapper
+            position: absolute
+            width: 100%
+            height: 100%
+            .toolbar
+                height: 56px
+                position: relative
+                z-index: 15
+                .open_settings
+                    width: 36px;
+                    height: 36px;
+                    display: inline-block;
+                    position: absolute;
+                    right: 10px;
+                    top: 10px;
+                    cursor: pointer;
+                    transition transform 0.2s linear
+                    &:hover
+                        transform: rotateZ(-90deg);
+                .tabby
+                    display: inline-block
+                    height: 56px
+                    position: absolute
+                    right: 45px
+                    left: 0
+                    white-space: nowrap
+                    overflow-x: auto
+                    overflow-y: hidden
+                    .tab
+                        display: inline-block;
+                        min-width: 60px;
+                        height: 25px;
+                        margin: 5px;
+                        margin-right: 0;
+                        padding: 10px;
+                        line-height: 25px;
+                        transition background-color 0.2s linear
+                        border-radius: 5px;
+                        cursor: pointer;
+                        font-weight: 600;
+                        #unread
+                            display: inline-block;
+                            min-width: 18px;
+                            height: 18px;
+                            text-align: center;
+                            font-size: 12px;
+                            margin: 0 5px;
+                            line-height: 20px;
+                            border-radius: 100%;
+                            &.none
+                                display: none;
+                        #close
+                            display: inline-block;
+                            width: 12px;
+                            text-align: center;
+                            margin-left: 5px
+
+            .chatarea
+                position: absolute;
+                top: 56px;
+                width: 100%;
+                bottom: 46px;
+                .smsc-nicklistbtn
+                    width: 46px;
+                    height: 46px;
+                    position: absolute;
+                    top: 16px;
+                    right: 16px;
+                    border-radius: 100%;
+                    display: none;
+                    opacity: 0.5;
+                    cursor: pointer;
+                .topicbar
+                    position: absolute;
+                    top: 0;
+                    height: 20px;
+                    right: 0;
+                    left: 0;
+                    padding: 12px;
+                    display: none;
+                    overflow: hidden;
+                    z-index: 10
+                    &:hover
+                        height: auto
+                        max-height: 100px
+                        overflow: auto
+                        word-wrap: break-word
+                .letterbox
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    overflow-y: auto;
+                    white-space: pre-wrap;
+                    word-wrap: break-word;
+                    padding: 5px;
+                .nicklist
+                    width: 280px;
+                    position: absolute;
+                    right: 0;
+                    padding: 10px;
+                    top: 0;
+                    bottom: 0;
+                    display: none;
+                    z-index: 11;
+                    overflow: auto;
+                    .nick
+                        cursor: pointer;
+                        .nickname
+                            font-size: 120%;
+                        .prefix
+                            width: 16px;
+                            height: 16px;
+                            line-height: 16px;
+                            padding: 2px;
+                            display: inline-block;
+                            border-radius: 4px;
+                            text-align: center;
+                            margin-right: 5px;
+                            font-weight: bold;
+                        .no-prefix
+                            width: 25px;
+                            display: inline-block;
+                .settings
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    padding: 20px;
+                    width: 60%;
+                    min-width: 360px;
+                    margin: auto;
+                    overflow: auto;
+                    .theme_button
+                        width: 120px
+                        height: 140px
+                        border-radius: 5px
+                        display: inline-block
+                        margin: 5px
+                        cursor: pointer
+                        .sampler
+                            width: 90%
+                            height: 75%
+                            margin: 5px
+                            .s_toolbar
+                                width: 100%
+                                height: 40%
+                                display: block
+                        .name
+                            width: 100%
+                            text-align: center
+                            display: block
+                    .grade1, .grade2, .grade3
+                        text-align: left;
+                &.vnicks
+                    .nicklist
+                        display: block;
+                    .letterbox
+                        right: 301px;
+                    .topicbar
+                        right: 301px;
+                &.vtopic
+                    .topicbar
+                        display: block;
+                    .letterbox
+                        top: 45px;
+            .input
+                position: absolute;
+                bottom: 0;
+                height: 46px;
+                width: 100%;
+                .my_nickname
+                    margin: 5px;
+                    padding: 7px;
+                    border-top-left-radius: 10px;
+                    border-bottom-left-radius: 10px;
+                    padding-right: 20px;
+                    margin-right: 0;
+                    width: 183px;
+                    overflow: hidden;
+                .inputwrapper
+                    display: inline-block
+                    position: absolute
+                    margin: 5px 0
+                    left: 210px
+                    right: 55px
+                    top: 0
+                    input
+                        width: 100%
+                        padding: 6px
+                        font-size: 120%
+                        border-left: 0
+                .sendbutton
+                    width: 32px;
+                    position: absolute;
+                    height: 32px;
+                    float: right;
+                    top: 5px;
+                    right: 5px;
+                    cursor: pointer;
+
+@media all and (max-width: 600px)
+    .vnicks
+        .nicklist
+            display: none !important;
+        .letterbox
+            right: 0 !important;
+        .topicbar
+            right: 0 !important;
+        &.vopentrig
+            .nicklist
+                display: block !important;
+            .topicbar
+                right: 45px;
+        .smsc-nicklistbtn
+            z-index: 12;
+            display: block !important;
+    .my_nickname
+        display: none;
+    .inputwrapper
+        left: 38px !important;
diff --git a/public/stylus/theme_default.styl b/public/stylus/theme_default.styl
new file mode 100644
index 0000000..7932a8d
--- /dev/null
+++ b/public/stylus/theme_default.styl
@@ -0,0 +1,282 @@
+props2(prop, args)
+    -webkit-{prop} args
+    -moz-{prop} args
+    {prop} args
+
+box-shadow()
+    props2('box-shadow', arguments)
+
+.grade1
+    font-size: 200%
+    color: #00BCD4
+
+.grade2
+    font-size: 150%
+    color: #00BCD4
+
+.grade3
+    font-size: 120%
+    color: #00BCD4
+
+.ircclient
+    background: rgb(255,255,255)
+    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%)
+    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
+    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
+    input[type=text], input[type=number], input[type=password]
+        padding: 8px;
+        width: 300px;
+        border-radius: 5px;
+        border: 1px solid #d2d2d2;
+        box-shadow inset 2px 2px 4px #dcdcdc;
+    input[type="submit"]
+        background: rgb(135,224,253);
+        background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
+        background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+        background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+        border: 1px solid #2196F3;
+        color: #fff;
+        font-size: 120%;
+        &:hover
+            background: rgb(196,239,252);
+            background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
+            background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+            background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+    .coverwindow
+        .wrapper
+            background-color: #f7f7f7;
+            border: 1px solid #dadada;
+            box-shadow 4px 4px 18px #d6d6d6;
+            .msg.error
+                color: red;
+            label
+                font-size: 80%
+                color: #2196F3
+                &.autosize
+                    font-size: 90% !important
+    #chat
+        .ircwrapper
+            .toolbar
+                background-color: #00c7e0
+                box-shadow 2px 2px 4px #cecece
+                .open_settings
+                    background-image: url(../image/settings.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+                .tabby
+                    .tab
+                        background-color: #29e1ff
+                        border: 1px solid #00d0ea
+                        box-shadow inset 4px 4px 8px #44ebff
+                        color: #fff;
+                        #unread
+                            background-color: #bf0000
+                            border: 1px solid #b00
+                            box-shadow inset 2px 2px 3px #f00
+                        #close
+                            color: #ff3d3d
+                        &:hover
+                            background-color: #63e9ff;
+                            box-shadow inset 4px 4px 8px #86f2ff
+                        &.active
+                            background-color: #00b9d8
+                            border: 1px solid #009aad
+                            box-shadow inset 4px 4px 8px #009caf
+                            color: #ffffff
+                            &:hover
+                                background-color: #00c7e8
+            .chatarea
+                .smsc-nicklistbtn
+                    background-image: url(../image/users.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+                    background-color: #00bcd4
+                    border: 5px solid #389dbb
+                .topicbar
+                    background-color: #fff
+                    border-bottom: 1px solid #ddd
+                    &:hover
+                        height: auto
+                        max-height: 100px
+                        overflow: auto
+                        word-wrap: break-word
+                .nicklist
+                    border-left: 1px solid #ddd
+                    background-color: #ffffff
+                    .nick
+                        &:hover
+                            background-color: #aeebff
+                        .prefix
+                            background-color: #05abe0
+                            color: #fff
+                .settings
+                    .theme_button
+                        background-color: #e0e0e0
+                        border: 1px solid #a7a7a7
+                        &:hover
+                            background-color: #efefef
+                        &.selected
+                            border: 2px solid #00a0b5 !important
+            .input
+                background-color: #00c7e0
+                .my_nickname
+                    background-color: #00efef
+                .inputwrapper
+                    input
+                        border: 1px solid #929292
+                        box-shadow inset 4px 4px 8px #d8d8d8
+                .sendbutton
+                    background-image: url(../image/send.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+
+.message
+    &.type_simple
+        &.mentioned
+            background-color: #aeebff
+        .timestamp
+            color: #696969
+            &:before
+                color: #607D8B
+                content: "["
+            &:after
+                color: #607D8B
+                content: "]"
+        .sender
+            color: #3F51B5
+            &:before
+                content: "<"
+            &:after
+                content: ">"
+        .arrowin, .arrowout
+            font-weight: bolder
+        .channel
+            font-weight: bold
+            color: #a0a0a0
+        .m_listentry 
+            .channel
+                min-width: 120px
+                display: inline-block
+            .usercount
+                display: inline-block
+                min-width: 45px
+                text-align: center
+
+    .reason, .hostmask
+        &:before
+            content: "("
+        &:after
+            content: ")"
+        &:before, &:after
+            color: #009606
+            font-weight: bold
+    .reason
+        color: #bf0000
+    .hostmask
+        color: #004c88
+    .arrowin
+        color: #00ab00
+    .arrowout
+        color: #dc0f00
+    &.m_quit, &.m_part, &.m_kick
+        color: red
+    &.m_join
+        color: green
+    &.m_topic .content, &.m_names .content
+        color: #03A9F4
+        font-weight: bold
+    &.m_motd .content
+        font-family: monospace
+    &.m_nick .content, &.m_notice .content
+        color: #FF9800
+        font-weight: bold
+    &.m_action 
+        .actionee
+            color: #3f51b5
+        .asterisk
+            color: #e4c000
+    &.m_mode 
+        .content
+            font-style: italic
+        .mode
+            color: #008000
+        .asterisk
+            color: #05abe0
+    &.m_error .content
+        color: red
+        font-weight: bold
+    &.m_help .content
+        color: #008000;
+        font-weight: bold
+
+.message, .topicbar
+    .irc-bg00,.irc-bg0 
+        background-color: white
+    .irc-bg01,.irc-bg1 
+        background-color: black
+    .irc-bg02,.irc-bg2 
+        background-color: navy
+    .irc-bg03,.irc-bg3 
+        background-color: green
+    .irc-bg04,.irc-bg4 
+        background-color: red
+    .irc-bg05,.irc-bg5 
+        background-color: brown
+    .irc-bg06,.irc-bg6 
+        background-color: purple
+    .irc-bg07,.irc-bg7 
+        background-color: orange
+    .irc-bg08,.irc-bg8 
+        background-color: yellow
+    .irc-bg09,.irc-bg9 
+        background-color: lime
+    .irc-bg10 
+        background-color: teal
+    .irc-bg11 
+        background-color: cyan
+    .irc-bg12 
+        background-color: blue
+    .irc-bg13 
+        background-color: pink
+    .irc-bg14 
+        background-color: grey
+    .irc-bg15 
+        background-color: lightgrey
+    .irc-fg00,.irc-fg0 
+        color: white
+    .irc-fg01,.irc-fg1 
+        color: black
+    .irc-fg02,.irc-fg2 
+        color: navy
+    .irc-fg03,.irc-fg3 
+        color: green
+    .irc-fg04,.irc-fg4 
+        color: red
+    .irc-fg05,.irc-fg5 
+        color: brown
+    .irc-fg06,.irc-fg6 
+        color: purple
+    .irc-fg07,.irc-fg7 
+        color: orange
+    .irc-fg08,.irc-fg8 
+        color: #dcdc00
+    .irc-fg09,.irc-fg9 
+        color: #00e600
+    .irc-fg10 
+        color: teal
+    .irc-fg11 
+        color: #00d2d2
+    .irc-fg12 
+        color: blue
+    .irc-fg13 
+        color: pink
+    .irc-fg14 
+        color: grey
+    .irc-fg15 
+        color: lightgrey
+    .irc-bold
+        font-weight: bold
+    .irc-italic
+        font-style: italic
+    .irc-underline
+        text-decoration: underline
diff --git a/public/stylus/theme_night.styl b/public/stylus/theme_night.styl
new file mode 100644
index 0000000..d356b1f
--- /dev/null
+++ b/public/stylus/theme_night.styl
@@ -0,0 +1,292 @@
+props2(prop, args)
+    -webkit-{prop} args
+    -moz-{prop} args
+    {prop} args
+
+box-shadow()
+    props2('box-shadow', arguments)
+
+.grade1
+    font-size: 200%
+    color: #00BCD4
+
+.grade2
+    font-size: 150%
+    color: #00BCD4
+
+.grade3
+    font-size: 120%
+    color: #00BCD4
+
+a
+    color: #23e7ff
+a:hover
+    color: #5dedff
+
+.ircclient
+    background: #1d1d1d
+    input[type=text], input[type=number], input[type=password]
+        padding: 8px;
+        width: 300px;
+        border-radius: 5px;
+        border: 1px solid #d2d2d2;
+        box-shadow inset 2px 2px 4px #dcdcdc;
+    input[type="submit"]
+        background: rgb(135,224,253);
+        background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
+        background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+        background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+        border: 1px solid #2196F3;
+        color: #fff;
+        font-size: 120%;
+        &:hover
+            background: rgb(196,239,252);
+            background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
+            background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+            background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+    .coverwindow
+        .wrapper
+            background-color: #3e3e3e
+            border: 1px solid #171717
+            box-shadow 4px 4px 18px #383838
+            color: white;
+            .msg.error
+                color: red;
+            label
+                font-size: 80%
+                color: #67bcff
+                &.autosize
+                    font-size: 90% !important
+    #chat
+        .ircwrapper
+            .toolbar
+                background-color: #008e8e
+                box-shadow 2px 2px 4px #585858
+                .open_settings
+                    background-image: url(../image/settings.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+                .tabby
+                    .tab
+                        background-color: #00bfde
+                        border: 1px solid #0092a5
+                        box-shadow inset 4px 4px 8px #00d1ea
+                        color: #fff;
+                        #unread
+                            background-color: #bf0000
+                            border: 1px solid #b00
+                            box-shadow inset 2px 2px 3px #f00
+                        #close
+                            color: #ff3d3d
+                        &:hover
+                            background-color: #00dbff
+                            box-shadow: inset 4px 4px 8px #23e7ff
+                        &.active
+                            background-color: #006a7b
+                            border: 1px solid #006a77
+                            box-shadow inset 4px 4px 8px #003940
+                            color: #ffffff
+                            &:hover
+                                background-color: #00859a
+            .chatarea
+                .smsc-nicklistbtn
+                    background-image: url(../image/users.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+                    background-color: #00bcd4
+                    border: 5px solid #389dbb
+                .topicbar
+                    background-color: #2d2d2d
+                    border-bottom: 1px solid #000
+                    color: white
+                    &:hover
+                        height: auto
+                        max-height: 100px
+                        overflow: auto
+                        word-wrap: break-word
+                .nicklist
+                    background-color: #2d2d2d
+                    border-left: 1px solid #000
+                    color: white
+                    .nick
+                        &:hover
+                            background-color: #006282
+                        .prefix
+                            background-color: #05abe0
+                            color: #fff
+                .settings
+                    color: white
+                    .theme_button
+                        background-color: #424242
+                        border: 1px solid #444444
+                        &:hover
+                            background-color: #545454
+                        &.selected
+                            border: 2px solid #00e2ff !important
+            .input
+                background-color: #005a5a
+                .my_nickname
+                    background-color: #009494
+                    color: white
+                .inputwrapper
+                    input
+                        box-shadow inset 4px 4px 8px #001419
+                        background-color: #002b36
+                        border: 1px solid #008e8e
+                        color: white
+                .sendbutton
+                    background-image: url(../image/send.svg)
+                    background-repeat: no-repeat
+                    background-size: contain
+
+.message
+    color: white
+    &.type_simple
+        &.mentioned
+            background-color: #006282
+        .timestamp
+            color: #afafaf
+            &:before
+                color: #607D8B
+                content: "["
+            &:after
+                color: #607D8B
+                content: "]"
+        .sender
+            color: #3F51B5
+            &:before
+                content: "<"
+            &:after
+                content: ">"
+        .arrowin, .arrowout
+            font-weight: bolder
+        .channel
+            font-weight: bold
+            color: #a0a0a0
+        .m_listentry 
+            .channel
+                min-width: 120px
+                display: inline-block
+            .usercount
+                display: inline-block
+                min-width: 45px
+                text-align: center
+
+    .reason, .hostmask
+        &:before
+            content: "("
+        &:after
+            content: ")"
+        &:before, &:after
+            color: #009606
+            font-weight: bold
+    .reason
+        color: #bf0000
+    .hostmask
+        color: #1999ff
+    .arrowin
+        color: #00ab00
+    .arrowout
+        color: #dc0f00
+    &.m_quit, &.m_part, &.m_kick
+        color: red
+    &.m_join
+        color: green
+    &.m_topic .content, &.m_names .content
+        color: #03A9F4
+        font-weight: bold
+    &.m_motd .content
+        font-family: monospace
+    &.m_nick .content, &.m_notice .content
+        color: #FF9800
+        font-weight: bold
+    &.m_action 
+        .actionee
+            color: #3f51b5
+        .asterisk
+            color: #e4c000
+    &.m_mode 
+        .content
+            font-style: italic
+        .mode
+            color: #00ff00
+        .asterisk
+            color: #05abe0
+    &.m_error .content
+        color: red
+        font-weight: bold
+    &.m_help .content
+        color: #00ff00;
+        font-weight: bold
+
+.message, .topicbar
+    .irc-bg00,.irc-bg0 
+        background-color: white
+    .irc-bg01,.irc-bg1 
+        background-color: black
+    .irc-bg02,.irc-bg2 
+        background-color: navy
+    .irc-bg03,.irc-bg3 
+        background-color: green
+    .irc-bg04,.irc-bg4 
+        background-color: red
+    .irc-bg05,.irc-bg5 
+        background-color: brown
+    .irc-bg06,.irc-bg6 
+        background-color: purple
+    .irc-bg07,.irc-bg7 
+        background-color: orange
+    .irc-bg08,.irc-bg8 
+        background-color: yellow
+    .irc-bg09,.irc-bg9 
+        background-color: lime
+    .irc-bg10 
+        background-color: teal
+    .irc-bg11 
+        background-color: cyan
+    .irc-bg12 
+        background-color: #0091bd
+    .irc-bg13 
+        background-color: pink
+    .irc-bg14 
+        background-color: grey
+    .irc-bg15 
+        background-color: lightgrey
+    .irc-fg00,.irc-fg0 
+        color: white
+    .irc-fg01,.irc-fg1 
+        color: black
+    .irc-fg02,.irc-fg2 
+        color: navy
+    .irc-fg03,.irc-fg3 
+        color: green
+    .irc-fg04,.irc-fg4 
+        color: red
+    .irc-fg05,.irc-fg5 
+        color: brown
+    .irc-fg06,.irc-fg6 
+        color: purple
+    .irc-fg07,.irc-fg7 
+        color: orange
+    .irc-fg08,.irc-fg8 
+        color: #dcdc00
+    .irc-fg09,.irc-fg9 
+        color: #00e600
+    .irc-fg10 
+        color: teal
+    .irc-fg11 
+        color: #00d2d2
+    .irc-fg12 
+        color: blue
+    .irc-fg13 
+        color: pink
+    .irc-fg14 
+        color: grey
+    .irc-fg15 
+        color: lightgrey
+    .irc-bold
+        font-weight: bold
+    .irc-italic
+        font-style: italic
+    .irc-underline
+        text-decoration: underline