add web irc

10 files changed, 3688 insertions, 0 deletions

diff --git a/kiwiirc/static/themes/coffee/theme.css b/kiwiirc/static/themes/coffee/theme.css
new file mode 100644
index 0000000..d275a03
--- /dev/null
+++ b/kiwiirc/static/themes/coffee/theme.css
@@ -0,0 +1,145 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #8e715b;
+    --brand-primary-hover: #bea28c;
+    --brand-midtone: #f1f1f1;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #22231f;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: #8e715c;
+    --comp-statebrowser-bg-networkname: #7b6351;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #826958;
+    --comp-statebrowser-network-border: #bda28e;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #826958;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+.kiwi-appsettings-close,
+.kiwi-appsettings-block h3,
+.kiwi-networksettings .kiwi-title,
+.u-form input[type='checkbox']:after, .u-form input[type='radio']:after {
+    background-color: #8e715c;
+}
+
+.kiwi-networksettings .kiwi-title {
+    border-top-color: #cab09b;
+}
+
+.kiwi-statebrowser-network.kiwi-statebrowser-network--active .kiwi-statebrowser-network-header {
+    border-left: 3px solid #cab09b;
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active {
+    border-bottom-color: #8e715c;
+}
+
+.kiwi-statebrowser-newnetwork a:hover {
+    background: #a28772;
+}
+
+.kiwi-network-name-options {
+    background-color: var(--comp-statebrowser-bg);
+}
+
+.kiwi-statebrowser-channel-leave {
+    background: transparent;
+}
+
+.kiwi-statebrowser-channelfilter a,
+.kiwi-statebrowser-channelfilter a:hover {
+    color: #fff;
+}
+
+.kiwi-awaystatusindicator {
+    background: #78b17f;
+}
+.kiwi-awaystatusindicator.kiwi-awaystatusindicator--away {
+    background: var(--brand-error);
+}
+
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-inner,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-inner {
+    background-color: #967c68 !important;
+}
+
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+.kiwi-statebrowser-network-status a {
+    color: #fff;
+}
+
+.kiwi-statebrowser-channel-label {
+    background: #967f70;
+}
+
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/common/base.css b/kiwiirc/static/themes/common/base.css
new file mode 100644
index 0000000..93db59c
--- /dev/null
+++ b/kiwiirc/static/themes/common/base.css
@@ -0,0 +1,1064 @@
+/* ---- Welcome Screens ----- */
+.kiwi-customserver-form {
+    background-color: var(--brand-default-bg);
+    border: 1px solid var(--brand-midtone);
+}
+
+.kiwi-welcome-simple-error {
+    border: 1px dashed var(--brand-error);
+}
+
+.kiwi-welcome-simple-form .u-submit {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-welcome-simple .help,
+.kiwi-welcome-simple .help a {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-welcome-simple .help a:hover {
+    color: var(--brand-primary-hover);
+}
+
+.kiwi-welcome-invalid-nick.u-input-text input.u-input {
+    border-color: var(--brand-error);
+}
+
+/* ---- Gloabl Styling ---- */
+.kiwi-theme-bg {
+    background-color: var(--brand-default-bg);
+}
+
+.u-tabbed-content {
+    background-color: var(--brand-default-bg);
+}
+
+.u-tabbed-view-tabs {
+    background: var(--brand-midtone);
+    border-bottom: 3px solid var(--brand-midtone);
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab {
+    border-bottom-color: var(--brand-midtone);
+    background: var(--brand-default-bg);
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active {
+    border-bottom-color: var(--brand-primary);
+}
+
+/* ---- Global : User inputs ---- */
+.u-input-text {
+    background: var(--brand-default-bg);
+}
+
+.u-form label {
+    color: var(--brand-default-fg);
+}
+
+.u-input-text input:focus {
+    border-color: var(--brand-primary);
+}
+
+.u-form .u-input,
+.u-form textarea {
+    outline: none;
+    border-color: var(--brand-input-border);
+    color: var(--brand-input-fg);
+    background: var(--brand-input-bg);
+    transition: border-color 0.1s;
+}
+
+.u-form .u-input:focus,
+.u-form textarea:focus {
+    border-color: var(--brand-primary);
+}
+
+.u-form label input[type='text'],
+.u-form label input[type='password'],
+.u-form label input[type='email'],
+.u-form textarea {
+    border-color: var(--brand-primary);
+}
+
+::-webkit-input-placeholder,
+::-moz-placeholder,
+::-ms-placeholder,
+::placeholder {
+    color: black;
+}
+
+/* ---- Global : Checkbox input ---- */
+.u-form input[type='checkbox'],
+.u-form input[type='radio'] {
+    border-color: var(--brand-input-border);
+    background-color: var(--brand-default-bg);
+}
+
+.u-form input[type='checkbox']:checked,
+.u-form input[type='radio']:checked {
+    background: var(--brand-primary);
+}
+
+/* ---- Global : Buttons ---- */
+.u-button-primary {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.u-button-primary:hover {
+    background-color: var(--brand-primary-hover);
+}
+
+.u-button-secondary {
+    background: rgba(117, 117, 117, 0.07);
+    border-bottom: 1px solid rgba(117, 117, 117, 0.2);
+}
+
+.u-button-warning {
+    background-color: var(--brand-error);
+    color: var(--brand-default-bg);
+}
+
+/* ---- Global : Links / anchors etc ---- */
+.u-link {
+    color: var(--brand-primary);
+}
+
+/* ---- Container Header ( containerHeader ) ---- */
+.kiwi-header {
+    background: var(--comp-header-bg);
+    border-bottom-color: var(--comp-border);
+}
+
+.kiwi-header-name-container {
+    color: var(--comp-header-name-fg);
+}
+
+.kiwi-header-name,
+.kiwi-header-name-full {
+    background-color: var(--comp-header-bg);
+}
+
+.kiwi-header-topic:hover {
+    background-color: var(--comp-header-bg);
+}
+
+.kiwi-header-option a:hover,
+.kiwi-header-option--active,
+.kiwi-header-option--active:hover a {
+    background-color: var(--comp-header-option-active-bg);
+    color: var(--comp-header-option-active-fg);
+    opacity: 1;
+}
+
+.kiwi-header-option--active,
+.kiwi-header-option-active a {
+    opacity: 1;
+}
+
+.kiwi-header-join-channel-button {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-header .kiwi-header-notjoined .u-link {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-header .kiwi-header-notjoined .u-link:hover {
+    background-color: var(--brand-primary-hover);
+}
+
+.kiwi-header-server-connection .u-button {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+/* End of Container Header ( containerHeader ) */
+
+/* ---- Control Input ( controlInput ) ---- */
+.kiwi-controlinput {
+    background: var(--brand-default-bg);
+    border-top-color: var(--comp-border);
+}
+
+.kiwi-controlinput-button {
+    background-color: var(--brand-default-bg);
+    border: 2px solid var(--brand-default-bg);
+}
+
+.kiwi-controlinput-button:hover,
+.kiwi-controlinput-tools,
+.kiwi-controlinput-tools-container,
+.kiwi-controlinput-send {
+    color: var(--brand-default-fg);
+    background-color: var(--brand-midtone);
+}
+
+.kiwi-controlinput-active-tool {
+    background: #f6f6f6;
+}
+
+/* ---- Self User ( SelfUser.vue ) ---- */
+.kiwi-controlinput-selfuser {
+    background: var(--brand-default-bg);
+    border-color: var(--comp-border);
+}
+
+.kiwi-controlinput--selfuser-open .kiwi-controlinput-selfuser {
+    border: 1px solid var(--brand-midtone);
+}
+
+/* ---- Auto complete ( autoComplete ) ---- */
+.kiwi-autocomplete {
+    box-shadow: 0 1px 15px rgba(64, 54, 63, 0.25);
+    border: 1px solid var(--brand-midtone);
+    background: var(--brand-default-bg);
+}
+
+.kiwi-autocomplete-item {
+    border-bottom: 1px solid var(--brand-midtone);
+}
+
+.kiwi-autocomplete-item--selected {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-autocomplete-item--selected .u-link {
+    color: var(--brand-default-bg);
+}
+
+/* ---- Sidebar ( Sidebar ) ---- */
+.kiwi-sidebar {
+    background-color: var(--comp-sidebar-bg);
+    color: var(--comp-sidebar-fg);
+}
+
+.kiwi-sidebar-options {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-sidebar-pin {
+    border-right: 1px solid var(--brand-default-bg);
+    background: var(--brand-primary);
+}
+
+.kiwi-sidebar-pin:hover {
+    background: #62d0ac;
+}
+
+.kiwi-sidebar-options .kiwi-sidebar-close:hover {
+    background: var(--brand-error);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-container--sidebar-open .kiwi-sidebar {
+    border-color: var(--comp-border);
+}
+
+.kiwi-aboutbuffer {
+    background: var(--comp-aboutbuffer-bg);
+}
+
+.kiwi-aboutbuffer h3 {
+    background: var(--brand-default-bg);
+}
+
+.kiwi-aboutbuffer h4 {
+    background-color: var(--comp-aboutbuffer-header-bg);
+    color: var(--brand-default-bg);
+}
+
+/* ---- Sidebar - Nicklist ---- */
+.kiwi-nicklist-usercount {
+    border-bottom-color: var(--brand-midtone);
+}
+
+.kiwi-nicklist-user {
+    border-left-color: var(--brand-default-bg);
+}
+
+.kiwi-nicklist-user:hover {
+    border-left-color: var(--brand-primary);
+    cursor: pointer;
+}
+
+.kiwi-nicklist-user:hover .kiwi-nicklist-messageuser {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-nicklist-user::after {
+    color: var(--brand-midtone);
+}
+
+.kiwi-nicklist-messageuser {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-nicklist-info i.fa-search {
+    color: var(--brand-midtone);
+}
+
+/* ---- Sidebar - userbox ---- */
+.kiwi-userbox .main-title,
+.kiwi-userbox .kiwi-userbox-basicinfo {
+    border-bottom: 1px solid var(--brand-midtone);
+}
+
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action {
+    border: 1px solid var(--brand-default-fg);
+    color: var(--brand-default-fg);
+}
+
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action:hover {
+    background-color: var(--brand-default-fg);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-userbox-opactions {
+    border-top: 1px solid var(--brand-midtone);
+}
+
+.kiwi-userbox-opactions label select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.kiwi-userbox-opaction-kick,
+.kiwi-userbox-opaction-ban,
+.kiwi-userbox-opaction-kickban {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-userbox-opaction-kick,
+.kiwi-userbox-opaction-kick:hover {
+    background-color: var(--brand-notice);
+}
+
+.kiwi-userbox-opaction-ban,
+.kiwi-userbox-opaction-ban:hover {
+    background-color: var(--brand-warning);
+}
+
+.kiwi-userbox-opaction-kickban,
+.kiwi-userbox-opaction-kickban:hover {
+    background-color: var(--brand-error);
+}
+
+.kiwi-userbox-whois {
+    border: 1px solid var(--brand-midtone);
+}
+
+/* ---- State browser ( statebrowser) ---- */
+
+/* Statebrowser - Left sidebar ( StateBrowser.vue ) */
+.kiwi-statebrowser {
+    background: var(--comp-statebrowser-bg);
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-usermenu--open {
+    background-color: var(--comp-usermenu-open-bg);
+}
+
+.kiwi-statebrowser-usermenu-body .u-link {
+    color: var(--brand-error);
+}
+
+.kiwi-statebrowser-usermenu-close {
+    background-color: var(--brand-error);
+}
+
+.kiwi-statebrowser-usermenu-close:hover {
+    opacity: 1;
+}
+
+.kiwi-statebrowser-divider {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Add channel input */
+.kiwi-statebrowser-newchannel-inputwrap {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-newchannel-inputwrap input[type='text'] {
+    color: var(--comp-statebrowser-bg);
+    background: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-newchannel-inputwrap--focus {
+    opacity: 1;
+    background-color: var(--brand-default-bg);
+}
+
+/* Channel search input */
+.kiwi-statebrowser-channelfilter {
+    transition: all 0.3s;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-channelfilter::after {
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-channelfilter input {
+    background-color: var(--brand-default-bg);
+    color: var(--brand-default-fg);
+    outline: none;
+}
+
+.kiwi-statebrowser-channelfilter p {
+    color: var(--brand-primary);
+    font-size: 0.9em;
+    margin: 10px 0 10px 0;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.kiwi-statebrowser-channelfilter p:hover {
+    color: var(--brand-primary-hover);
+}
+
+.kiwi-statebrowser-newnetwork {
+    border-top-color: var(--comp-statebrowser-network-border);
+}
+
+.kiwi-statebrowser-newnetwork a {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-newnetwork a:hover {
+    background: var(--brand-primary);
+    opacity: 1;
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header {
+    background-color: var(--comp-statebrowser-bg-networkname);
+}
+
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header a {
+    color: var(--comp-statebrowser-fg);
+}
+
+/* Active Network Styling */
+.kiwi-statebrowser-network.kiwi-statebrowser-network--active .kiwi-statebrowser-network-header {
+    border-left: 3px solid var(--brand-primary);
+}
+
+/* Channel Styling */
+.kiwi-statebrowser-channels .kiwi-statebrowser-channel {
+    border-bottom: 1px solid var(--brand-shadow);
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-channel .kiwi-statebrowser-channel-name {
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-channel-active {
+    border-left-color: var(--brand-primary);
+    background: var(--comp-statebrowser-channel-active-bg);
+}
+
+.kiwi-statebrowser-channel-active .kiwi-statebrowser-channel-name {
+    color: var(--comp-statebrowser-channel-active-fg);
+}
+
+.kiwi-network-name-option-chanfilter.active {
+    background: var(--brand-primary);
+}
+
+.kiwi-statebrowser-channel-settings:hover {
+    background-color: var(--brand-primary);
+}
+
+.kiwi-statebrowser-channel-leave:hover {
+    background: var(--brand-error);
+}
+
+.kiwi-statebrowser-newchannel a {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.kiwi-statebrowser-newchannel a:hover {
+    background: var(--brand-primary);
+    opacity: 1;
+    color: var(--comp-statebrowser-fg);
+}
+
+.kiwi-statebrowser-switcher a:first-of-type {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.kiwi-statebrowser-switcher a:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.kiwi-statebrowser-options {
+    background: var(--brand-midtone);
+}
+
+.kiwi-statebrowser-channel-notjoined .kiwi-statebrowser-channel-name {
+    color: var(--brand-error);
+}
+
+.kiwi-statebrowser-channel-popup {
+    background: #383838;
+    border: 3px solid var(--brand-midtone);
+    border-left: none;
+}
+
+.kiwi-statebrowser-network-header {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.kiwi-statebrowser-network-status {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+/* Icon before the network in network list */
+.kiwi-statebrowser-network-name::before {
+    content: '\f233';
+    font-family: fontAwesome, Helvetica, Arial, Verdana, Tahoma, sans-serif;
+    margin-right: 2px;
+    font-weight: 100;
+    text-decoration: none;
+}
+
+/* Icons in the Channel List */
+.kiwi-statebrowser-channel[data-name^="*"]::before {
+    content: '\f006';
+}
+
+.kiwi-statebrowser-channel[data-name="#help"]::before {
+    content: '\f059';
+}
+
+.kiwi-statebrowser-channel::before {
+    font-family: fontAwesome, Helvetica, Arial, Verdana, Tahoma, sans-serif;
+    margin-right: 8px;
+    font-weight: 100;
+}
+
+.kiwi-statebrowser-channel-label {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-channel-label--highlight {
+    background: var(--brand-error);
+}
+
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-inner,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-inner {
+    background-color: var(--brand-primary) !important;
+    color: var(--brand-default-bg) !important;
+}
+
+.kiwi-statebrowser-usermenu-avatar--connected .kiwi-avatar-inner {
+    border-color: #42b992;
+}
+
+.kiwi-statebrowser-usermenu-avatar--disconnected .kiwi-avatar-inner {
+    border-color: var(--brand-error);
+}
+
+.kiwi-statebrowser-usermenu .kiwi-awaystatusindicator {
+    border-color: var(--comp-statebrowser-bg);
+}
+
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header a.kiwi-statebrowser-network-toggle:hover {
+    background-color: var(--brand-error);
+    border-top-color: var(--brand-error);
+}
+
+.kiwi-statebrowser-appsettings:hover {
+    background-color: rgba(128, 128, 128, 0.2);
+    opacity: 1;
+}
+
+.kiwi-statebrowser-scrollarea h4 {
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.kiwi-statebrowser-prompt-close {
+    background-color: rgba(128, 128, 128, 0.2);
+}
+
+/* ---- End of statebrowser ---- */
+
+/*  ---- Custom server layout ---- */
+.kiwi-customserver {
+    background-color: var(--brand-default-fg);
+}
+
+/* ---- App ---- */
+.kiwi-wrap {
+    color: var(--brand-default-fg);
+    --kiwi-nick-brightness: 40;
+    --kiwi-supports-monospace: 1;
+}
+
+.kiwi-workspace {
+    background: var(--brand-default-bg);
+}
+
+.kiwi-workspace::before {
+    background: var(--brand-primary);
+}
+
+.kiwi-workspace::after {
+    background: var(--brand-error);
+}
+
+/* ---- Container ( Container.vue )  ---- */
+.kiwi-container-toggledraw-statebrowser,
+.kiwi-container-toggledraw-sidebar {
+    background: var(--brand-default-bg);
+}
+
+.kiwi-container-toggledraw-statebrowser {
+    border-right: 1px solid var(--brand-midtone);
+}
+
+.kiwi-container-toggledraw-sidebar {
+    border-left: 1px solid var(--brand-midtone);
+}
+
+.kiwi-container-toggledraw-sidebar--disabled {
+    color: #b8babd;
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border: 0.6em solid transparent;
+    border-right-color: var(--brand-primary);
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount--highlight {
+    background-color: var(--brand-error);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount--highlight::after {
+    border-right-color: var(--brand-error);
+}
+
+.kiwi-wrap--statebrowser-drawopen .kiwi-container-toggledraw-statebrowser-messagecount {
+    background-color: var(--brand-primary);
+}
+
+.kiwi-wrap--statebrowser-drawopen .kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border: 0.6em solid transparent;
+    border-left-color: var(--brand-primary);
+}
+
+.kiwi-container-empty .u-button {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+/* ---- Application settings ( AppSettings ) ---- */
+.kiwi-appsettings {
+    background: var(--brand-default-bg);
+}
+
+.kiwi-appsettings-block {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.kiwi-appsettings-block h3 {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-appsettings-close {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-appsettings-close:hover {
+    background: var(--brand-error);
+}
+
+/* ---- Network Settings ( NetworkSettings ) ---- */
+.kiwi-networksettings .kiwi-title {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+    border-top: 1px solid var(--brand-primary);
+}
+
+.kiwi-network-nicknamelabel {
+    color: rgb(128, 128, 128);
+}
+
+.kiwi-networksettings .u-form {
+    border-color: var(--brand-midtone);
+    background: var(--brand-default-bg);
+}
+
+.kiwi-networksettings .kiwi-title span {
+    color: var(--brand-primary);
+    background: var(--brand-default-bg);
+}
+
+.kiwi-networksettings-advanced h3:hover {
+    color: var(--brand-primary);
+}
+
+.kiwi-networksettings .kiwi-customserver-tls {
+    color: var(--brand-midtone);
+}
+
+.kiwi-networksettings .kiwi-customserver-tls--enabled {
+    color: var(--brand-primary);
+}
+
+.kiwi-networksettings .kiwi-customserver-tls--enabled .kiwi-customserver-tls-lock {
+    color: var(--brand-primary);
+}
+
+.kiwi-networksettings .kiwi-customserver-tls-minus {
+    color: var(--brand-error);
+}
+
+.kiwi-networksettings-error {
+    border-color: var(--brand-error);
+}
+
+.kiwi-networksettings .kiwi-connect-to-newnetwork {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button {
+    border-color: var(--brand-primary);
+    color: var(--brand-primary);
+}
+
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button:hover,
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button.kiwi-networksettings-server-type-active {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-networksettings .u-form span {
+    color: var(--brand-default-fg);
+}
+
+.u-button.kiwi-channellist-refresh.u-button-secondary {
+    background: var(--brand-primary);
+}
+
+/* ---- Channel List ( ChannelList.vue ) ---- */
+.kiwi-channellist-grid {
+    border-bottom: 1px solid var(--brand-midtone);
+}
+
+.kiwi-channellist-grid:nth-child(even) {
+    background: rgba(128, 128, 128, 0.2);
+}
+
+.kiwi-channellist-grid:first-of-type {
+    border-top: 1px solid var(--brand-midtone);
+}
+
+.kiwi-channellist-topic a {
+    color: var(--brand-primary);
+}
+
+/* ---- Message list - ( MessageList.vue ) ---- */
+.kiwi-messagelist {
+    scrollbar-color: #9e9e9e transparent;
+}
+
+.kiwi-messagelist::-webkit-scrollbar-thumb {
+    background-color: #9e9e9e;
+}
+
+.kiwi-messagelist-seperator {
+    color: var(--brand-darktone);
+    background: var(--brand-default-bg);
+    font-size: 0.9em;
+}
+
+.kiwi-messagelist-seperator > span {
+    background: var(--brand-default-bg);
+}
+
+.kiwi-messagelist-message--info-open,
+.kiwi-messagelist-message--authorrepeat.kiwi-messagelist-message--info-open {
+    background: var(--brand-midtone);
+}
+
+.kiwi-messagelist-message-action .kiwi-messagelist-body {
+    color: var(--brand-primary);
+}
+
+.kiwi-messagelist-message--highlight {
+    background-color: var(--brand-midtone);
+}
+
+/* Notice Message styling */
+.kiwi-messagelist-message-notice {
+    background: #EFD1A4;
+}
+
+/* Standard username and usertime styling */
+.kiwi-messagelist-nick {
+    color: var(--brand-default-fg);
+}
+
+/* Unread user messages */
+.kiwi-messagelist-message.kiwi-messagelist-message--unread {
+    border-left: 5px solid var(--brand-primary);
+}
+
+/* When hovering over a users messages */
+.kiwi-messagelist-message--hover {
+    border-left-color: var(--brand-primary);
+}
+
+/* Traditional message styling hover */
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-privmsg:hover,
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-action:hover,
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-notice:hover {
+    background: var(--brand-primary-hover);
+}
+
+/* The shadow over the main text area that displays when the sidebar is open */
+.kiwi-container--sidebar-drawn .kiwi-messagelist::after {
+    background-color: var(--brand-default-fg);
+}
+
+/* Messagelayout inline */
+.kiwi-messagelist-message--text .kiwi-messagelist-time,
+.kiwi-messagelist-message--compact .kiwi-messagelist-time {
+    color: var(--brand-default-fg);
+}
+
+/* ---- Traffic Messages ---- */
+.kiwi-messagelist-message-traffic-join,
+.kiwi-messagelist-message-traffic-join_self {
+    color: var(--brand-primary);
+}
+
+.kiwi-messagelist-message-traffic-quit,
+.kiwi-messagelist-message-traffic-quit_self,
+.kiwi-messagelist-message-traffic-part,
+.kiwi-messagelist-message-traffic-part_self,
+.kiwi-messagelist-message-traffic-kick,
+.kiwi-messagelist-message-traffic-kick_self {
+    color: var(--brand-error);
+}
+
+.kiwi-messagelist-message-traffic-quit .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-quit_self .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-part .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-part_self .kiwi-nick::before {
+    color: var(--brand-error);
+}
+
+/* ---- Modern Layout Styling ---- */
+.kiwi-avatar-inner {
+    color: var(--brand-default-bg);
+    border-color: var(--brand-primary);
+}
+
+.kiwi-avatar--default {
+    background-color: var(--brand-default-fg);
+}
+
+.kiwi-messagelist .kiwi-messagelist-body a,
+.kiwi-channellist-table-topic a,
+.kiwi-aboutbuffer a {
+    color: var(--brand-link-normal);
+}
+
+.kiwi-messagelist .kiwi-messagelist-body a:hover,
+.kiwi-channellist-table-topic a:hover,
+.kiwi-aboutbuffer a:hover {
+    color: var(--brand-link--hover);
+}
+
+.kiwi-messagelist-message--modern {
+    border-top-color: var(--brand-midtone);
+}
+
+/* Errors */
+.kiwi-messagelist-message-error,
+.kiwi-messagelist-message.kiwi-messagelist-message-error.kiwi-messagelist-message--highlight {
+    background: var(--brand-error);
+    color: var(--brand-default-bg);
+}
+
+/* ---- Messagelist Topic Styling ---- */
+.kiwi-messagelist-message.kiwi-messagelist-message-topic {
+    border-top: 1px solid var(--brand-primary);
+    border-bottom: 1px solid var(--brand-primary);
+    color: var(--brand-default-fg);
+    background: var(--brand-default-bg);
+}
+
+.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat.kiwi-messagelist-message-topic {
+    border-top: 2px solid var(--brand-primary);
+}
+
+.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic,
+.kiwi-messagelist-message--modern.kiwi-mesagelist-message-topic.kiwi-messagelist-message--highlight {
+    border: 2px solid var(--brand-primary);
+}
+
+.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic.kiwi-messagelist-message--unread {
+    border-left: 2px solid var(--brand-primary);
+}
+
+.kiwi-header-buffersettings {
+    border-top: 1px solid var(--brand-midtone);
+}
+
+.kiwi-header-topic > div {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-messagelist-message-whois {
+    background: var(--brand-midtone);
+}
+
+.kiwi-messagelist-message-motd {
+    color: var(--brand-default-fg);
+}
+
+/* ---- MessageInfo ---- */
+.kiwi-messagelist-message--info-open {
+    background-color: var(--brand-midtone);
+}
+
+.kiwi-messageinfo-urls {
+    border-top-color: var(--brand-midtone);
+    border-bottom-color: var(--brand-midtone);
+}
+
+.kiwi-messageinfo-actions .u-link {
+    border-color: var(--brand-default-fg);
+    color: var(--brand-default-fg);
+}
+
+.kiwi-messageinfo-actions .kiwi-messageinfo-reply {
+    background: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-messageinfo-actions .kiwi-messageinfo-kick-user {
+    background: var(--brand-warning);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-messageinfo-actions .kiwi-messageinfo-ban-user {
+    background: var(--brand-error);
+    color: var(--brand-default-bg);
+}
+
+/* ---- Not connected message ( NotConnected ) ---- */
+.kiwi-warning-block {
+    color: var(--brand-default-bg);
+    background-color: var(--brand-error);
+}
+
+.kiwi-warning-block.connecting {
+    background-color: var(--brand-primary);
+}
+
+.kiwi-notconnected-button {
+    border-color: var(--brand-default-bg);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-notconnected-button:hover {
+    background-color: var(--brand-default-bg);
+    color: var(--brand-default-fg);
+}
+
+.kiwi-notconnected-button-settings:hover {
+    background-color: transparent;
+    color: var(--brand-default-bg);
+}
+
+/* ---- Settings Aliases ( SettingsAliases ) ---- */
+.kiwi-settings-aliases-input {
+    border-color: var(--brand-midtone);
+}
+
+.kiwi-settings-aliases-help em {
+    color: var(--brand-primary);
+}
+
+.kiwi-settings-advanced-notice {
+    color: var(--brand-default-bg);
+    background: var(--brand-error);
+}
+
+/* ---- Channel Banlist ( Channelbanlist ) ---- */
+.kiwi-channelbanlist-table tr {
+    border-bottom-color: var(--brand-midtone);
+}
+
+.kiwi-channelbanlist-table-actions:hover {
+    background-color: var(--brand-error);
+}
+
+.kiwi-channelbanlist-table-actions:hover i {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-network-name-options {
+    background-color: var(--brand-default-fg);
+}
+
+.kiwi-network-name-option:hover,
+.kiwi-network-name-option.active {
+    background-color: var(--brand-primary);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-network-name-option {
+    color: var(--brand-default-bg);
+}
+
+/* Global Close Icon */
+.kiwi-close-icon,
+.kiwi-close-icon:hover {
+    background: var(--brand-error);
+}
+
+/* Away Status Indicator */
+.kiwi-awaystatusindicator {
+    border-color: var(--brand-default-bg);
+    background-color: var(--brand-primary);
+}
+.kiwi-awaystatusindicator--away {
+    background-color: var(--brand-error);
+}
+
+/* Buffer Key */
+.kiwi-bufferkey-button {
+    border-color: var(--brand-default-bg);
+}
+
+/* Selected text */
+:root {
+    --brand-selected: rgba(0, 0, 255, 0.3);
+}
diff --git a/kiwiirc/static/themes/dark/theme.css b/kiwiirc/static/themes/dark/theme.css
new file mode 100644
index 0000000..db0bd7e
--- /dev/null
+++ b/kiwiirc/static/themes/dark/theme.css
@@ -0,0 +1,196 @@
+@import '../common/base.css';
+
+:root{
+    --brand-primary: #256d55;
+    --brand-primary-hover: #5ec9a6;
+    --brand-midtone: #2b2b2b;
+    --brand-darktone: #969696;
+    --brand-default-bg: #1e1e1e;
+    --brand-default-fg: #ababab;
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #712c2f;
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: #f1f1f1;
+    --comp-header-option-active-bg: var(--brand-primary);
+    --comp-statebrowser-fg: #ababab;
+    --comp-statebrowser-bg: #1e1e1e;
+    --comp-statebrowser-bg-networkname: #454545;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #ababab;
+    --comp-usermenu-open-bg: #0e0e0e;
+    --comp-statebrowser-network-border: #656565;
+    --comp-sidebar-bg: #1e1e1e;
+    --comp-sidebar-fg: #ababab;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: var(--brand-primary);
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #484848;
+}
+
+.kiwi-wrap {
+    --kiwi-nick-brightness: 60;
+}
+
+.kiwi-header {
+    border-bottom-color: #000;
+}
+
+.kiwi-statebrowser-channels .kiwi-statebrowser-channel {
+    color: #dedede;
+}
+
+.u-tabbed-view-tabs {
+    background: #2f2f2f;
+    border-bottom-color: #ffffff1a;
+}
+.u-tabbed-view-tabs .u-tabbed-view-tab {
+    border-bottom-color: #ffffff1a;
+}
+
+.u-form select {
+    background-color: var(--brand-primary);
+    color: #000000;
+}
+
+button.u-button.u-button-primary.u-submit.kiwi-welcome-znc-start {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-welcome-znc h2 {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-welcome-znc-form .u-input-text {
+    background: transparent;
+    color: var(--brand-default-bg);
+}
+
+.kiwi-statebrowser-newchannel-inputwrap,
+.kiwi-statebrowser-newnetwork .u-button,
+.kiwi-header-option a:hover,
+.kiwi-header-option--active,
+.kiwi-network-name-hover-icon,
+.kiwi-statebrowser-newchannel-inputwrap input[type='text'],
+.kiwi-network-name-option,
+.kiwi-warning-block,
+.kiwi-notconnected-button,
+.u-button-warning,
+.kiwi-settings-advanced-notice,
+.kiwi-networksettings .kiwi-title,
+.kiwi-welcome-simple-form .u-submit {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-notconnected-button {
+    border-color: var(--brand-default-fg);
+}
+.kiwi-notconnected-button:hover {
+    background-color: var(--brand-default-fg);
+    color: var(--brand-default-bg);
+    border-color: var(--brand-default-fg);
+}
+
+.kiwi-statebrowser-channel-leave {
+    background: transparent;
+    color: var(--brand-default-fg);
+}
+
+.kiwi-network-name-options {
+    background-color: #000;
+    color: var(--brand-default-fg);
+}
+.kiwi-network-name-option:hover,
+.kiwi-network-name-option.active {
+    background-color: var(--brand-primary);
+    color: #fff;
+}
+
+.kiwi-messagelist-seperator {
+    border-top: 2px dashed #00b100;
+}
+
+.kiwi-messagelist-message--highlight {
+    background-color: #404040;
+}
+
+.kiwi-messagelist-message-notice {
+    background: #3c3729;
+}
+
+.kiwi-statebrowser {
+    box-shadow: 0px 0 4px #ffffff2b;
+}
+
+.kiwi-statebrowser-channelfilter input,
+.kiwi-statebrowser-channels-info .kiwi-statebrowser-newchannel-inputwrap input {
+    background-color: var(--brand-default-fg);
+    color: var(--brand-default-bg);
+}
+
+.kiwi-messagelist-message.kiwi-messagelist-message--highlight {
+    background: #2d2d2d;
+}
+
+.kiwi-messagelist-message--modern {
+    border-top-color: #2d2d2d;
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount  {
+    color: #f1f1f1;
+}
+
+.kiwi-messagelist-message--info-open {
+    background-color: #2d2d2d;
+}
+.kiwi-messagelist-message--info-open .u-link {
+    color: #fff;
+}
+
+.kiwi-welcome-simple-start {
+    color: #fff !important;
+}
+
+.kiwi-header-option--active a {
+    color: #e4e4e4 !important;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/default/theme.css b/kiwiirc/static/themes/default/theme.css
new file mode 100644
index 0000000..3e37cc5
--- /dev/null
+++ b/kiwiirc/static/themes/default/theme.css
@@ -0,0 +1,92 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #42b992;
+    --brand-primary-hover: #5ec9a6;
+    --brand-midtone: #e4e4e4;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #22231f;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Input elements */
+    --brand-input-border: #e2e2e2;
+    --brand-input-fg: #616161;
+    --brand-input-bg: transparent;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: var(--brand-default-fg);
+    --comp-statebrowser-bg-networkname: #454545;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #0e0e0e;
+    --comp-statebrowser-network-border: #656565;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #42b992;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #d6d63d; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #d6d63d; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
+
+.kiwi-statebrowser {
+    box-shadow: 0px 0 2px #101010;
+}
diff --git a/kiwiirc/static/themes/elite/theme.css b/kiwiirc/static/themes/elite/theme.css
new file mode 100644
index 0000000..29d3565
--- /dev/null
+++ b/kiwiirc/static/themes/elite/theme.css
@@ -0,0 +1,248 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #ff9600;
+    --brand-primary-hover: #ffbf00;
+    --brand-midtone: #20292e;
+    --brand-darktone: #969696;
+    --brand-default-bg: #263139;
+    --brand-default-fg: #c3cdd4;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: var(--brand-primary);
+    --comp-statebrowser-bg: #28343d;
+    --comp-statebrowser-bg-networkname: #1d252b;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #0e0e0e;
+    --comp-statebrowser-network-border: #656565;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #28343c;
+    --comp-sidebar-fg: #f1f1f1;
+    --comp-aboutbuffer-bg: #28343c;
+    --comp-aboutbuffer-header-bg: #ffa12c;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+.kiwi-workspace {
+    background: #3b4850;
+}
+
+.kiwi-appsettings,
+.kiwi-theme-bg,
+.u-tabbed-content {
+    background: #26323a;
+}
+
+.kiwi-statebrowser.kiwi-theme-bg {
+    background: var(--comp-statebrowser-bg);
+}
+
+.kiwi-statebrowser-newnetwork {
+    opacity: 0.75;
+}
+
+.kiwi-statebrowser-newnetwork a:hover {
+    color: #fff;
+    opacity: 1;
+}
+
+.kiwi-network-name-options {
+    background-color: var(--comp-statebrowser-bg-networkname);
+}
+
+.kiwi-appsettings-block {
+    border-color: var(--brand-primary-hover);
+    color: var(--brand-primary);
+}
+
+.u-tabbed-view-tabs {
+    background: #3b4850;
+    border-bottom: 3px solid #ffa320;
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab {
+    color: var(--brand-primary);
+    background: #171d21;
+    border-bottom-color: #ffa320;
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active {
+    color: var(--brand-primary-hover);
+    border-bottom-color: var(--brand-primary-hover);
+}
+
+.u-form input[type='checkbox'],
+.u-form input[type='radio'] {
+    border-color: #0a0a0a;
+    background-color: #151a1d;
+}
+
+.u-form select {
+    background-color: #26323a;
+}
+
+
+.kiwi-messagelist {
+    background: #3b4850;
+    color: var(--brand-primary);
+}
+
+.kiwi-messagelist-message--modern {
+    border-top-color: #ff820021;
+}
+
+.kiwi-messagelist-message.kiwi-messagelist-message-topic {
+    background: #3c4c58;
+    color: #fff;
+}
+
+.kiwi-messagelist-message-notice {
+    background: #28333b;
+}
+
+.kiwi-controlinput,
+.kiwi-header.kiwi-theme-bg {
+    background: #3b4850;
+    color: var(--brand-primary);
+    border-color: var(--brand-primary);
+}
+
+.kiwi-controlinput .kiwi-controlinput-user,
+.kiwi-controlinput-inner .kiwi-controlinput-user {
+    border-right-color: var(--brand-primary);
+}
+
+.kiwi-aboutbuffer h3 {
+    background: #ffa12c;
+    color: #fff;
+}
+
+.kiwi-header-name {
+    color: var(--brand-primary);
+}
+
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header {
+    background-color: var(--comp-statebrowser-bg-networkname);
+}
+
+.kiwi-sidebar.kiwi-theme-bg {
+    background: #28343c;
+}
+
+.kiwi-container--sidebar-open .kiwi-sidebar {
+    border-color: var(--brand-primary);
+}
+
+.kiwi-nicklist-usercount {
+    border-bottom-color: #20292f;
+}
+
+.kiwi-nicklist-user {
+    border-left-color: var(--brand-primary);
+}
+.kiwi-nicklist-user:hover {
+    border-left-color: var(--brand-primary-hover);
+}
+
+.kiwi-nicklist-user .kiwi-nicklist-messageuser,
+.kiwi-nicklist-user:hover .kiwi-nicklist-messageuser {
+    color: var(--brand-color-primary);
+}
+
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action {
+    border-color: var(--brand-primary);
+    color: var(--brand-primary);
+}
+
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action:hover {
+    color: #f1f1f1;
+    background: var(--brand-primary);
+}
+
+.kiwi-channellist-nav .u-form .u-input {
+    color: #f1f1f1;
+    border-color: #ff9600;
+}
+
+.kiwi-channellist-nav .u-form .u-button-primary {
+    border-bottom-color: var(--brand-primary);
+}
+
+.kiwi-channellist-pagination,
+.kiwi-channellist-info,
+.kiwi-channellist table tbody tr {
+    color: #f1f1f1;
+}
+
+.kiwi-channellist-grid a {
+    color: #ff9600;
+}
+
+.kiwi-channellist-grid a.u-button {
+    color: #f1f1f1;
+    border-bottom: none;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/grayfox/theme.css b/kiwiirc/static/themes/grayfox/theme.css
new file mode 100644
index 0000000..3542b13
--- /dev/null
+++ b/kiwiirc/static/themes/grayfox/theme.css
@@ -0,0 +1,143 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #747c88;
+    --brand-primary-hover: #9098a2;
+    --brand-midtone: #f1f1f1;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #22231f;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: #414956;
+    --comp-statebrowser-bg-networkname: #626975;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #303742;
+    --comp-statebrowser-network-border: #bda28e;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #42b992;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+.kiwi-appsettings-close,
+.kiwi-appsettings-block h3,
+.kiwi-networksettings .kiwi-title,
+.u-form input[type='checkbox']:after, .u-form input[type='radio']:after {
+    background-color: var(--brand-primary);
+}
+
+.kiwi-networksettings .kiwi-title {
+    border-top-color: var(--brand-primary-hover);
+}
+
+.kiwi-statebrowser-network.kiwi-statebrowser-network--active .kiwi-statebrowser-network-header {
+    border-left: 3px solid var(--brand-primary-hover);
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active {
+    border-bottom-color: var(--brand-primary);
+}
+
+.kiwi-statebrowser-newnetwork {
+    border-top-color: var(--brand-primary-hover);
+}
+
+.kiwi-statebrowser-newnetwork a:hover {
+    background: var(--brand-primary-hover);
+}
+
+.kiwi-network-name-options {
+    background-color: var(--comp-statebrowser-bg);
+}
+
+.kiwi-statebrowser-channel-leave {
+    background: transparent;
+}
+
+.kiwi-statebrowser-channelfilter a,
+.kiwi-statebrowser-channelfilter a:hover {
+    color: #fff;
+}
+
+.kiwi-awaystatusindicator {
+    background: #41e8c9;
+}
+.kiwi-awaystatusindicator.kiwi-awaystatusindicator--away {
+    background: var(--brand-error);
+}
+
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+.kiwi-aboutbuffer h4 {
+    background-color: #4b5160;
+}
+
+.kiwi-appsettings-section {
+    background: #f1f1f1;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/nightswatch/theme.css b/kiwiirc/static/themes/nightswatch/theme.css
new file mode 100644
index 0000000..42caf3f
--- /dev/null
+++ b/kiwiirc/static/themes/nightswatch/theme.css
@@ -0,0 +1,367 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #000;
+    --brand-primary-hover: #2d2d2d;
+    --brand-midtone: #1b1b1b;
+    --brand-darktone: #000;
+    --brand-default-bg: #1b1b1b;
+    --brand-default-fg: #f1f1f1;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Input elements */
+    --brand-input-border: #000000;
+    --brand-input-fg: #616161;
+    --brand-input-bg: transparent;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: #000;
+    --comp-statebrowser-bg-networkname: #151515;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #151515;
+    --comp-statebrowser-network-border: #bda28e;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: var(--brand-default-bg);
+    --comp-sidebar-fg: #fff;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #42b992;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-default-fg);
+    --brand-link--hover: var(--brand-default-fg);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #444;
+}
+
+/* Welcome */
+.kiwi-welcome-simple-form .u-submit {
+    color: #fff;
+}
+
+/* Container Header */
+.kiwi-workspace::before {
+    background: #4e4e4e;
+}
+
+.kiwi-header-option--active a,
+.kiwi-header-option:hover a {
+    color: var(--brand-default-fg);
+}
+
+/* Sidebar */
+.kiwi-aboutbuffer h4 {
+    color: var(--brand-default-fg);
+    background-color: #000;
+}
+
+.kiwi-appsettings-close,
+.kiwi-appsettings-block h3,
+.kiwi-networksettings .kiwi-title {
+    background-color: var(--brand-primary);
+}
+
+.kiwi-appsettings-block h3,
+.kiwi-appsettings-close {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-appsettings-section {
+    border-left: 1px solid #444;
+    border-right: 1px solid #444;
+    border-bottom: 1px solid #444;
+}
+
+.kiwi-appsettings-block h3 {
+    border-top: 1px solid #444;
+    border-left: 1px solid #444;
+    border-right: 1px solid #444;
+}
+
+.kiwi-networksettings .kiwi-title {
+    border-top-color: var(--brand-primary-hover);
+}
+
+.kiwi-statebrowser-network.kiwi-statebrowser-network--active .kiwi-statebrowser-network-header {
+    border-left: 3px solid var(--brand-primary-hover);
+}
+
+.u-tabbed-view-tabs {
+    background-color: #000;
+    border-bottom: 3px solid #444;
+}
+
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active {
+    border-bottom-color: #444;
+    background-color: #313131;
+}
+
+.kiwi-statebrowser-newnetwork {
+    border-top-color: var(--brand-primary-hover);
+}
+
+.kiwi-statebrowser-newnetwork a:hover {
+    background: var(--brand-primary-hover);
+}
+
+.kiwi-network-name-options {
+    background-color: var(--comp-statebrowser-bg);
+}
+
+.kiwi-statebrowser-channel-leave {
+    background: transparent;
+}
+
+.kiwi-statebrowser-channelfilter a,
+.kiwi-statebrowser-channelfilter a:hover {
+    color: #fff;
+}
+
+.kiwi-awaystatusindicator {
+    background: #41e8c9;
+}
+.kiwi-awaystatusindicator.kiwi-awaystatusindicator--away {
+    background: var(--brand-error);
+}
+
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+.kiwi-sidebar-options {
+    color: var(--brand-default-fg);
+}
+
+
+/* Statebrowser */
+.kiwi-statebrowser {
+    border-right: 2px solid #444;
+}
+
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-inner,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-inner {
+    background-color: #000 !important;
+    color: #f1f1f1 !important;
+}
+
+.kiwi-statebrowser-usermenu-avatar .kiwi-awaystatusindicator {
+    border-color: #4b4b4b;
+}
+
+.kiwi-network-name-options .kiwi-network-name-option {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-statebrowser-newchannel-inputwrap input[type='text'] {
+    color: #f1f1f1;
+}
+
+.kiwi-statebrowser-newnetwork a {
+    color: var(--brand-default-fg);
+}
+
+/* Inputs */
+.u-form input[type='checkbox']:checked,
+.u-form input[type='radio']:checked {
+    background-color: #f1f1f1;
+}
+
+.u-form .u-input:focus {
+    border-color: #6b6b6b;
+}
+
+.u-form select {
+    background-color: var(--brand-primary);
+}
+
+.u-link {
+    color: var(--brand-default-fg);
+}
+
+/* Message list */
+.kiwi-messagelist {
+    background: #000;
+}
+.kiwi-messagelist .kiwi-messagelist-body {
+    color: #adadad;
+}
+
+.kiwi-messagelist .kiwi-messagelist-message--highlight,
+.kiwi-messagelist .kiwi-messagelist-message--hover {
+    border-left-color: #3c3c3c;
+}
+
+.kiwi-messagelist-message-notice {
+    background: #3c3c3c;
+}
+
+.kiwi-avatar-inner {
+    background-color: var(--brand-default-bg);
+    color: var(--brand-default-fg);
+}
+
+/* Aliases */
+.kiwi-settings-aliases-help {
+    border-color: var(--brand-default-fg);
+}
+
+.kiwi-settings-aliases-help em {
+    color: var(--brand-default-fg);
+}
+
+/* Misc */
+.kiwi-header-server-connection .u-button,
+.kiwi-header .kiwi-header-notjoined .u-link,
+.u-button-primary,
+.u-button-warning,
+.kiwi-networksettings .kiwi-title,
+.kiwi-notconnected,
+.kiwi-notconnected-button {
+    color: #f1f1f1;
+}
+
+.kiwi-notconnected-button {
+    border-color: #f1f1f1;
+}
+
+.kiwi-networksettings .kiwi-connect-to-newnetwork {
+    background: #444;
+    color: #fff;
+}
+
+.kiwi-networksettings .kiwi-networksettings-server-types,
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button {
+    color: #fff;
+    border-color: #fff;
+}
+
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button:hover,
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button.kiwi-networksettings-server-type-active {
+    background: #444;
+    color: #fff;
+}
+
+.kiwi-channellist-topic a {
+    color: #f1f1f1;
+    text-decoration: underline;
+}
+
+.kiwi-messagelist-message-error,
+.kiwi-messagelist-message.kiwi-messagelist-message-error.kiwi-messagelist-message--highlight {
+    color: #f1f1f1;
+}
+
+button.u-button.u-button-primary.u-submit.kiwi-welcome-znc-start,
+.kiwi-statebrowser-channel-label {
+    color: var(--brand-default-fg);
+}
+
+.kiwi-statebrowser-channel-label {
+    background: #383838;
+}
+
+.kiwi-statebrowser-channel-label--highlight {
+    background: var(--brand-error);
+}
+
+.kiwi-welcome-znc h2 {
+    color: var(--brand-default-bg);
+}
+
+.kiwi-welcome-znc-form .u-input-text {
+    background: transparent;
+    color: var(--brand-default-bg);
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount {
+    background-color: #4c4b4b;
+    color: var(--brand-default-fg);
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border-right-color: #4c4b4b;
+}
+
+.kiwi-wrap--statebrowser-drawopen .kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border-left-color: #4c4b4b;
+}
+
+.kiwi-autocomplete-item--selected {
+    background: #3c3c3c;
+    color: #ffffff;
+}
+
+.kiwi-autocomplete-item--selected .u-link {
+    color: #fdfdfd;
+}
+
+.kiwi-messagelist-message--compact .kiwi-messagelist-time {
+    color: #fff;
+}
+
+.kiwi-controlinput-button {
+    background-color: var(--brand-primary);
+    border: 2px solid var(--brand-primary);
+}
+
+.kiwi-controlinput-button:hover,
+.kiwi-controlinput-tools,
+.kiwi-controlinput-tools-container,
+.kiwi-controlinput-send {
+    color: var(--brand-default-fg);
+    background-color: var(--brand-default-bg);
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/osprey/theme.css b/kiwiirc/static/themes/osprey/theme.css
new file mode 100644
index 0000000..19d9fca
--- /dev/null
+++ b/kiwiirc/static/themes/osprey/theme.css
@@ -0,0 +1,115 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #4d6075;
+    --brand-primary-hover: #73879c;
+    --brand-midtone: #f1f1f1;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #22231f;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: #212d3a;
+    --comp-statebrowser-bg-networkname: #687282;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #161d25;
+    --comp-statebrowser-network-border: #656565;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: var(--brand-primary);
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+/* Welcome Screens */
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+/* StateBrowser */
+.kiwi-statebrowser-usermenu .kiwi-awaystatusindicator {
+    background-color: #42b992;
+}
+
+.kiwi-network-name-options {
+    background-color: #4e5c6b;
+}
+.kiwi-statebrowser-channelfilter p a:hover {
+    color: #fff;
+}
+
+/* Sidebar */
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action {
+    border-color: var(--brand-primary);
+    color: var(--brand-primary);
+}
+
+.kiwi-userbox .kiwi-userbox-actions .kiwi-userbox-action:hover {
+    color: var(--brand-default-bg);
+    background-color: var(--brand-primary);
+}
+
+.kiwi-statebrowser-network-status a {
+    color: var(--brand-default-bg);
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }
diff --git a/kiwiirc/static/themes/radioactive/theme.css b/kiwiirc/static/themes/radioactive/theme.css
new file mode 100644
index 0000000..66d03dc
--- /dev/null
+++ b/kiwiirc/static/themes/radioactive/theme.css
@@ -0,0 +1,1211 @@
+/* Radioactive is your very own pipboy theme for Kiwi */
+
+@import url(https://fonts.googleapis.com/css?family=VT323);
+
+.kiwi-wrap {
+    background: #3a5646;
+    --kiwi-nick-brightness: 80;
+    --kiwi-supports-monospace: 1;
+    color: #201F1F;
+}
+
+/* Kiwi Theme Background is used to apply the same background colour accross components, rather than targeting them all specifically */
+.kiwi-theme-bg {
+    background-color: #031e11;
+    color: #14fdce;
+}
+
+/* Welcome Screen ( Welcome.vue ) */
+.kiwi-welcome-simple-form .u-input-text {
+  background: none;
+}
+
+.kiwi-welcome-simple-error {
+    border: 1px dashed #d86f6f;
+}
+.kiwi-welcome-simple-form .u-submit {
+    background-color: #1b2f24;
+    color: #fff;
+}
+.kiwi-welcome-simple .help {
+    color: #666;
+}
+.kiwi-welcome-simple .help a {
+    color: #666;
+}
+.kiwi-welcome-simple .help a:hover {
+    color: #a9d87a;
+}
+
+.kiwi-welcome-simple .u-submit {
+    border: 2px solid #00ffcb;
+    color: #00ffcb;
+    background: none;
+}
+
+.kiwi-welcome-simple .u-submit:hover {
+     text-decoration: underline;
+     cursor: pointer;
+}
+
+/* Custom server layout */
+.kiwi-customserver {
+	background-color: #fbfbfb;
+}
+
+
+
+/* App ( App.vue ) */
+.kiwi-workspace::before {
+  background: #00e2b7;
+  opacity: 1;
+  z-index: 1;
+}
+.kiwi-workspace::after {
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    pointer-events: none;
+    z-index: 100;
+}
+
+/* App - Tabs */
+.u-tabbed-content hr {
+    color: #5dd895;
+}
+
+.u-tabbed-view-tabs {
+    padding-top: 0;
+    border-bottom: 3px solid rgba(0, 0, 0, 0.1);
+}
+.u-tabbed-view-tabs .u-tabbed-view-tab {
+    background: none;
+    border: 1px solid #5dd895;
+    color: #5dd895;
+    border-radius: 0 !important;
+}
+.u-tabbed-view-tabs .u-tabbed-view-tab:hover,
+.u-tabbed-view-tabs .u-tabbed-view-tab.u-tabbed-view-tab--active{
+    border: 1px solid #5dd895;
+    color: #5dd895;
+    text-decoration: underline;
+}
+
+/*Style all inputs */
+.u-input-text-underline {
+    border-color: #a9a9a9;
+}
+.u-input-text-underline-active {
+    background: #1b2f24;
+}
+.u-form .u-input,
+.u-form textarea {
+    line-height: normal;
+    outline-color: #1b2f24;
+}
+
+.u-input {
+    border: 1px solid #3e9465;
+}
+
+.u-input:focus {
+    border: 1px solid #57da93;
+}
+
+/* Checkbox Styling */
+.u-form input[type='checkbox'],
+.u-form input[type='radio'] {
+    border: 2px solid #57da93;
+    background-color: #183123;
+}
+.u-form input[type='checkbox']:checked,
+.u-form input[type='radio']:checked {
+    background: #5dd895;
+}
+
+
+.u-form select {
+    background-color: #183123;
+}
+
+/*buttons */
+.u-button {
+    color: #2c3e50;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.u-button-primary {
+    color: #fff;
+    background-color: #00e3b5;
+    border: none;
+    border-bottom: 1px solid #00e4b3;
+}
+
+.u-button-secondary {
+    background: rgba(117, 117, 117, 0.07);
+    border-bottom: 1px solid rgba(117, 117, 117, 0.2);
+}
+
+.u-button-warning {
+    background-color: #d16c6c;
+    color: #fff;
+}
+.u-link {
+    color: #fff;
+}
+
+/* Application settings ( AppSettings.vue ) */
+.kiwi-appsettings-block {
+    position: relative;
+    z-index: 10;
+    background: #032c14;
+}
+.kiwi-appsettings-block h3 {
+    background: none;
+    border: 1px solid #5dd895;
+    text-decoration: underline;
+    color: #5dd895;
+}
+
+.kiwi-appsettings-section {
+    background: none;
+    border: 1px solid #5dd895;
+    color: #5dd895;
+}
+
+/* Title bar, at the top of the Application settings component */
+.kiwi-appsettings-close {
+    line-height: 38px;
+    color: #fff;
+    background: #031e11;
+}
+
+.kiwi-appsettings-close i {
+    line-height: 38px;
+}
+
+.kiwi-appsettings-close:hover{
+    background: #5cd894;
+}
+
+/* Channel List ( ChannelList.vue ) */
+.kiwi-channellist-grid .u-button-primary {
+    background: none;
+    border: 1px solid #14fdce;
+    color: #14fdce;
+}
+
+.kiwi-channellist-grid a {
+    color: #14fdce;
+    text-decoration: underline;
+}
+
+/* Container - Main ( Container.vue )  The majority of styling related to the messages and user input etc */
+@keyframes crt-glow {
+  0% { opacity: 0.1; }
+  50% { opacity: 0.2; }
+}
+.kiwi-workspace-background {
+  z-index: 0;
+  pointer-events: none;
+  border-bottom-color: #121212;
+  border-left-color: #080808;
+  border-right-color: #080808;
+  border-top-color: #020202;
+  box-shadow: inset 0 0 9rem #00000073, inset 0 0 3rem #000000ab, 0 0 12rem #9c3737;
+}
+.kiwi-workspace-background::before {
+  position: absolute;
+  content: "";
+  width: 100%;
+  height: 100%;
+  z-index: 8;
+  animation: crt-glow 60s infinite;
+  background: radial-gradient(circle at center, #1bd459 0%, rgba(27, 212, 89, 0.88) 58%, rgba(21, 235, 92, 0.57) 80%, rgba(19, 94, 29, 0.27) 93%, rgba(10, 23, 12, 0) 100%);
+  opacity: 0.15;
+  pointer-events: none;
+  position: fixed;
+}
+.kiwi-workspace-background::after {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    pointer-events: none;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0.6));
+    background-size: 100% 0.3rem;
+    border-radius: 2rem;
+    position: absolute;
+    opacity: 0.5;
+}
+
+
+/* The join button is displayed in the header when the user has not connected to their currently selected network */
+.kiwi-header-join-channel-button {
+    background-color: #42b983;
+    color: #fff;
+}
+
+.kiwi-container-toggledraw-sidebar {
+    border-left: 1px solid #ddd;
+}
+.kiwi-container-toggledraw-sidebar--disabled {
+    color: #b8babd;
+}
+
+/* These styles relate to the 'unread messages' and 'Mentioned' highlights that display to the user in the Statebrowser sidebar */
+.kiwi-container-toggledraw-statebrowser-messagecount {
+    background-color: #42b983;
+    color: #fff;
+}
+.kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border: 0.6em solid transparent;
+    border-right-color: #42b983;
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount--highlight {
+    background-color: #d62323;
+    color: #fff;
+}
+
+.kiwi-container-toggledraw-statebrowser-messagecount--highlight::after {
+    border-right-color: #d62323;
+}
+
+/* Style the statebrowser's ::after element on mobile devices */
+.kiwi-wrap--statebrowser-drawopen .kiwi-container-toggledraw-statebrowser-messagecount::after {
+    border: 0.6em solid transparent;
+    border-left-color: #42b983;
+}
+
+.kiwi-statebrowser-channel-label--highlight {
+    background: #e45e5e;
+}
+
+.kiwi-container-empty .u-button {
+    background-color: #1b2f24;
+    color: #fff;
+}
+
+/* Container Header ( ContainerHeader.vue ) */
+.kiwi-header {
+  background: #032f17;
+}
+.kiwi-header-name {
+    color: #fff;
+    text-shadow: 0 0 4px #fff;
+    opacity: 0.8;
+    animation: flicker 4s infinite 8s;
+}
+
+@keyframes flicker {
+	0% {opacity: 0.5;}
+	5% {opacity: 0.7;}
+  7% {opacity: 0.3;}
+  9% {color: #fffef2;}
+  10% {opacity: 0.8;}
+  11% {color: #fff;}
+  40% {color: 0.7;}
+  70% {color: 0.6;}
+	100% {opacity: 0.5;}
+}
+
+/* The header option buttons */
+.kiwi-header-option {
+    color: #14fdce;
+}
+.kiwi-header-option a:hover,
+.kiwi-header-option--active,
+.kiwi-header-option--active:hover a{
+    background-color: #00fecd;
+    color: #021e11;
+    opacity: 1;
+}
+
+.kiwi-header-option--active {
+    opacity: 1;
+}
+
+/* For active buttons, since they are not being hovered, we need to set the child element opacity to 1 */
+.kiwi-header-option-active a{
+    opacity: 1;
+}
+
+/* The link to click if the user has not joined this channel */
+.kiwi-header .kiwi-header-notjoined .u-link {
+    background-color: #1b2f24;
+    color: #fff;
+}
+.kiwi-header .kiwi-header-notjoined .u-link:hover {
+    background-color: #5ec9a6;
+}
+
+/* The not joined button */
+.kiwi-header .kiwi-header-notjoined .u-link {
+    background-color: #1b2f24;
+    color: #fff;
+}
+.kiwi-header .kiwi-header-notjoined .u-link:hover {
+    background-color: #5ec9a6;
+}
+
+.kiwi-header-server-connection .u-button {
+    color: #14fdce;
+    text-decoration: underline;
+}
+
+.kiwi-messagelist-message {
+    font-family: 'VT323', monospace;
+}
+
+/* baseline styling for the 'topic' of the channel, if it has one, these are shared between traditional and modern view, but can be made more specific if need be */
+.kiwi-messagelist-message.kiwi-messagelist-message-topic {
+    border-top: 1px solid #5dd89552;
+    border-bottom: 1px solid #5dd89552;
+}
+.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat.kiwi-messagelist-message-topic {
+    border-top: 1px solid #5dd89552;
+}
+.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic {
+    border: 1px solid #5dd89552;
+}
+.kiwi-messagelist-message--modern.kiwi-messagelist-message-topic.kiwi-messagelist-message--unread {
+    border-left: 2px solid #14fdce;
+}
+.kiwi-messagelist-message--modern .kiwi-messagelist-body {
+    font-weight: 900;
+    letter-spacing: 2px;
+    text-shadow: 0 2px 0 rgba(0,0,0,0.5);
+}
+.kiwi-header-buffersettings {
+    border-top: 1px solid #14fdce;
+}
+.kiwi-header-topic > div {
+    color: #14fdce;
+}
+
+
+
+/* When hovering over a channel, these options are displayed and coloured upon hover */
+.kiwi-statebrowser-channel-settings,
+.kiwi-statebrowser-channel-leave {
+    background-color: #5dd895;
+}
+.kiwi-statebrowser-channel-settings:hover{
+    background-color: #6a7b8e;
+}
+.kiwi-statebrowser-channel-leave:hover{
+    background: #c54d53;
+}
+
+.kiwi-controlinput-button {
+    background-color: #07311a;
+    border: 2px solid #07311a;
+}
+
+.kiwi-controlinput-button:hover,
+.kiwi-controlinput-tools,
+.kiwi-controlinput-tools-container,
+.kiwi-controlinput-send {
+    color: #49c081;
+    background-color: #155d36;
+}
+
+/* Control Input - displayed at bottom of Kiwi ( ControlInput.vue ) */
+.kiwi-controlinput {
+    font-family: 'VT323', monospace;
+    font-weight: 900;
+    letter-spacing: 2px;
+    background: #07311a;
+    color: #49c081;
+}
+.kiwi-controlinput .kiwi-controlinput-user,
+.kiwi-controlinput-inner .kiwi-controlinput-user {
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.kiwi-controlinput-active-tool {
+    background: #053118;
+    border-top: 1px solid #155d36;
+}
+
+.kiwi-selfuser,
+.kiwi-inputtool-emoji-emoji {
+    background-color: #1b2f24;
+    color: #69efa6;
+}
+
+
+.kiwi-selfuser .kiwi-selfuser-actions .u-button.u-button-warning {
+    color: #fff;
+}
+
+/* AutoComplete - If the user has enabled autocomplete in their options, this will style the options (AutoComplete.vue) */
+.kiwi-autocomplete {
+    box-shadow: 0 1px 15px rgba(64, 54, 63, 0.25);
+    border: 1px solid #ccc;
+    background: #fff;
+}
+.kiwi-autocomplete-item {
+    border-bottom: 1px solid #ccc;
+}
+.kiwi-autocomplete-item--selected {
+    background: #1b2f24;
+    color: #fff;
+}
+.kiwi-autocomplete-item--selected .u-link {
+    color: #fff;
+}
+
+/* Message list - Standard messages ( MessageList.vue ) */
+.kiwi-messagelist-seperator > span {
+    background: none;
+}
+
+.kiwi-messageinfo-urls {
+    border-top: 1px solid #ddd;
+}
+.kiwi-messagelist-message-action .kiwi-messagelist-body {
+    color: #090;
+    font-style: italic;
+}
+.kiwi-messagelist-message--highlight {
+    background-color: #629477;
+}
+
+/* Standard username and usertime styling */
+.kiwi-messagelist-nick {
+    color: #000;
+}
+.kiwi-messagelist-time {
+    color: #a0a09f;
+}
+
+/* Unread user messages */
+.kiwi-messagelist-message.kiwi-messagelist-message--unread,
+.kiwi-messagelist-message.kiwi-messagelist-message--unread {
+  border-left: 5px solid #629477;
+  background: #406550;
+  opacity: 1;
+}
+
+/* When hovering over a users messages */
+.kiwi-messagelist-message--hover{
+    background-color: #629477;
+}
+
+/* The shadow over the main text area that displays when the sidebar is open */
+.kiwi-container--sidebar-drawn .kiwi-messagelist::after {
+    background-color: #000;
+}
+
+/* Traffic Messages - User join , User Quit etc*/
+.kiwi-messagelist-message-traffic-join,
+.kiwi-messagelist-message-traffic-join_self {
+    color: #090;
+}
+
+.kiwi-messagelist-message-traffic-quit,
+.kiwi-messagelist-message-traffic-quit_self,
+.kiwi-messagelist-message-traffic-part,
+.kiwi-messagelist-message-traffic-part_self,
+.kiwi-messagelist-message-traffic-kick,
+.kiwi-messagelist-message-traffic-kick_self {
+    color: #900;
+    opacity: 1;
+}
+
+.kiwi-messagelist-message-traffic-quit .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-quit_self .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-part .kiwi-nick::before,
+.kiwi-messagelist-message-traffic-part_self .kiwi-nick::before {
+    color: #900;
+}
+
+/* Errors */
+.kiwi-messagelist-message-error {
+  background: #752020;
+  border-left-color: #ab5252;
+  color: #fff;
+  text-shadow: 0 2px 0 #000;
+}
+
+.kiwi-messagelist-message.kiwi-messagelist-message-error .kiwi-messagelist-body {
+  color: #fff !important;
+}
+
+/* Kiwi Modern Message list ( MessageListMessageModern.vue ) */
+.kiwi-messagelist-modern-avatar {
+    border: 2px solid #5dd895;
+}
+
+.kiwi-messagelist-message .kiwi-messagelist-body {
+    color: #5dd895 !important;
+}
+
+.kiwi-messagelist-message--compact .kiwi-messagelist-body {
+    font-size: 1.05em;
+}
+
+.kiwi-messagelist-message .kiwi-messagelist-body .kiwi-nick,
+.kiwi-messagelist-message .kiwi-messagelist-body a,
+.kiwi-aboutbuffer a {
+    color: #fff !important;
+    text-decoration: underline;
+}
+
+.kiwi-messagelist-nick {
+    color: #14fdce !important;
+}
+
+.kiwi-messagelist-time, .kiwi-messagelist-time {
+    color: #14fdce;
+}
+
+.kiwi-messagelist-message--modern {
+  border-top: 1px solid #0f5d35;
+}
+.kiwi-messagelist-message--modern.kiwi-messagelist-message--authorrepeat {
+  border-top: none;
+}
+
+/* Traditional message styling hover */
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-privmsg:hover,
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-action:hover,
+.kiwi-messagelist-message--compact .kiwi-messagelist-message-notice:hover {
+    border-left-color: #80ab52;
+}
+
+.kiwi-messagelist-message-notice {
+    border-left-color: #4cff9a;
+}
+
+/* MessageInfo */
+.kiwi-messagelist-message--info-open,
+.kiwi-messagelist-message--authorrepeat.kiwi-messagelist-message--info-open {
+    border-top: 1px solid #14fdce;
+    border-bottom: 1px solid #14fdce;
+}
+
+/* MessageInfo URLs */
+.kiwi-messageinfo-urls {
+    border-top: 1px solid #14fdce;
+    border-bottom: 1px solid #14fdce;
+}
+
+.kiwi-messageinfo-url .u-button-secondary {
+    color: #14fdce;
+    border: 1px solid #14fdce;
+    background: none;
+    text-shadow: none;
+}
+
+.kiwi-messageinfo-urls .kiwi-messageinfo-url:last-of-type {
+    margin-bottom: 0;
+}
+
+/* Start button stying */
+.kiwi-messageinfo-actions .u-link {
+    padding: 5px 10px;
+    text-align: center;
+    border: 1px solid #14fdce;
+    color: #14fdce;
+    display: inline-block;
+    border-radius: 3px;
+}
+
+.kiwi-messageinfo-actions .kiwi-messageinfo-kick-user {
+    color: #14fdce;
+}
+
+.kiwi-messageinfo-actions .kiwi-messageinfo-ban-user {
+    color: #14fdce;
+}
+
+/* Network Settings ( NetworkSettings.vue ) */
+.kiwi-networksettings .kiwi-title {
+    background: #021e11;
+    color: #00fecd;
+    border-top: 1px solid #00fecd;
+}
+.kiwi-network-nicknamelabel {
+    color: rgb(128, 128, 128);
+}
+.kiwi-networksettings .kiwi-padded-form-element-container.kiwi-dangerzone {
+    border-top: 1px solid rgba(0, 0, 0, 0.2);
+}
+.kiwi-networksettings .u-form {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.kiwi-networksettings .kiwi-title span {
+    color: #1b2f24;
+    background: #fff;
+}
+.kiwi-networksettings-advanced h3:hover {
+    color: #1b2f24;
+}
+.kiwi-networksettings .kiwi-customserver-tls {
+    color: #bfbfbf;
+}
+.kiwi-networksettings .u-form{
+    border: 1px solid #14fdce;
+}
+.kiwi-networksettings .kiwi-customserver-tls {
+    color: #bfbfbf;
+}
+.kiwi-networksettings  .kiwi-customserver-tls--enabled {
+    color: green;
+}
+.kiwi-networksettings  .kiwi-customserver-tls--enabled .kiwi-customserver-tls-lock {
+    color: green;
+}
+.kiwi-networksettings  .kiwi-customserver-tls-minus {
+    color: red;
+}
+.kiwi-networksettings-error {
+    border: 1px dashed #d86f6f;
+}
+.kiwi-networksettings .kiwi-connect-to-newnetwork {
+    background: #1b2f24;
+    color: #fff;
+    border: 1px solid #fff;
+}
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button {
+    border: 1px solid #1b2f24;
+    color: #fff;
+}
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button:hover,
+.kiwi-networksettings .kiwi-networksettings-server-types .kiwi-network-type-button.kiwi-networksettings-server-type-active {
+    background: #1b2f24;
+    color: #fff;
+    text-decoration: underline;
+}
+.u-button.kiwi-channellist-refresh.u-button-secondary {
+  background: #1b2f24;
+}
+
+/* Buffer settings sidebar */
+.kiwi-sidebar-buffersettings h3,
+.kiwi-aboutbuffer h3 {
+    color: #fff;
+    opacity: 0.8;
+}
+
+.kiwi-sidebar-buffersettings hr {
+    opacity: 0.5;
+    margin-bottom: 20px;
+}
+
+/* Nicklist ( Nicklist.vue ) */
+.kiwi-nicklist-usercount {
+    border-bottom: 1px solid #e4e4e44d;
+}
+.kiwi-nicklist-user {
+    border-left: 4px solid #192e24;
+}
+.kiwi-nicklist-user .kiwi-nicklist-user-nick {
+    color: #14fdce !important;
+}
+.kiwi-nicklist-messageuser {
+    color: #14fdce;
+}
+.kiwi-nicklist-user:hover {
+    border-left: 4px solid #14fdce;
+}
+.kiwi-nicklist-info i.fa-search {
+    color: #14fdce;
+}
+
+/* Not connected message ( NotConnected.vue ) */
+.kiwi-notconnected {
+    color: #fff;
+}
+.kiwi-notconnected-button {
+    border: 2px solid #fff;
+    color: #fff;
+}
+.kiwi-notconnected-button:hover{
+    background-color: #fff;
+    color: #000;
+}
+
+/* Self User ( SelfUser.vue ) */
+.kiwi-controlinput-selfuser {
+    background: #fff;
+    border: 1px solid #ddd;
+    border-left: none;
+    border-bottom: none;
+}
+.kiwi-selfuser-actions {
+    border-top: 1px solid #ddd;
+}
+
+/* Settings Aliases ( SettingsAliases.vue ) */
+.kiwi-settings-aliases-input {
+    border-color: #ccc;
+}
+.kiwi-settings-aliases-showhelp {
+    display: block;
+}
+.kiwi-settings-aliases-help {
+    background: transparent;
+    border: 1px dashed rgba(0,0,0, 0.4);
+}
+.kiwi-settings-aliases-help em {
+    color: #fff;
+    font-weight: 900;
+}
+
+/* Sidebar ( Sidebar.vue ) */
+.kiwi-sidebar-pin{
+    background: #5dd895;
+    color: #1b2f24;
+}
+.kiwi-sidebar-pin:hover{
+    background: #5dd895;
+}
+
+.kiwi-sidebar-options .kiwi-sidebar-close:hover {
+    background: #5cd894;
+    color: #1b2f24;
+}
+.kiwi-container--sidebar-open .kiwi-sidebar {
+    border-color: #b2b2b2;
+}
+
+.kiwi-aboutbuffer {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+.kiwi-aboutbuffer-section {
+    color: #fff;
+}
+.kiwi-aboutbuffer-section a {
+    text-decoration: underline;
+}
+
+.kiwi-aboutbuffer h4 {
+    color: #fff;
+    border-top: 1px solid #00e3b5;
+    border-bottom: 1px solid #00e3b5;
+    color: #00ffca !important;
+}
+
+/* Channel Banlist ( Channelbanlist.vue ) */
+.kiwi-channelbanlist-table tr {
+    border-bottom: 1px solid #ddd;
+}
+.kiwi-channelbanlist-table-actions:hover {
+    background-color: #b9424a;
+}
+.kiwi-channelbanlist-table-actions:hover i {
+    color: #fff;
+}
+
+/* Statebrowser - Left sidebar ( StateBrowser.vue ) */
+.kiwi-statebrowser {
+    color: #fff;
+    border-right: 1px solid #033e32;
+}
+.kiwi-statebrowser-divider {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.kiwi-messageinfo {
+    border-bottom: 2px #14fdce solid;
+    border-top: 1px #14fdce solid;
+}
+
+.kiwi-statebrowser-usermenu-avatar:hover .kiwi-avatar-inner,
+.kiwi-statebrowser-usermenu--open .kiwi-avatar-inner {
+    background-color: #5dd895 !important;
+    color: var(--brand-default-bg) !important;
+}
+
+.kiwi-statebrowser-usermenu-avatar--connected .kiwi-avatar-inner {
+    border-color: #42b992;
+}
+
+.kiwi-statebrowser-usermenu-avatar--disconnected .kiwi-avatar-inner {
+    border-color: #d86f6f;
+}
+
+.kiwi-statebrowser-usermenu-body .u-link {
+    color: #d86f6f;
+}
+
+/* If the user clicks on their avatar we 'open' the settings */
+.kiwi-statebrowser-usermenu--open {
+    background: rgba(255, 255, 255, 0.1);
+}
+.kiwi-statebrowser-usermenu--open .kiwi-statebrowser-usermenu-avatars {
+    background-color: #1b2f24;
+    color: #fff;
+}
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header a.kiwi-statebrowser-network-toggle:hover {
+    background-color: #d16c6c;
+    border-top-color: #d16c6c;
+}
+
+/* User Settings */
+.kiwi-statebrowser-appsettings {
+    color: #14fdce;
+}
+.kiwi-statebrowser-appsettings:hover {
+    color: #fff;
+    opacity: 1;
+}
+
+/* Statebrowser list */
+.kiwi-statebrowser-scrollarea {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+.kiwi-statebrowser-scrollarea h4,
+.kiwi-statebrowser-scrollarea h4 {
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+}
+.kiwi-network-name-options {
+    background-color: #5dd895;
+}
+.kiwi-network-name-option:hover,
+.kiwi-network-name-option.active {
+    background-color: #6efdb0;
+    color: #fff;
+}
+.kiwi-network-name-option-collapse {
+    background: #d16c6c;
+}
+
+/* Add channel input */
+.kiwi-statebrowser-newchannel-inputwrap {
+    color: #fff;
+}
+.kiwi-statebrowser-newchannel-inputwrap input[type='text'] {
+    color: #000;
+    background: #fff;
+}
+.kiwi-statebrowser-newchannel-inputwrap--focus {
+    opacity: 1;
+    background-color: #fff;
+}
+
+/*Channel search input */
+.kiwi-statebrowser-channelfilter {
+    transition: all 0.3s;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    color: #131312;
+}
+
+.kiwi-statebrowser-channelfilter p a {
+    color: #14fdce;
+}
+
+.kiwi-statebrowser-channelfilter::after {
+    color: #000;
+}
+.kiwi-statebrowser-channelfilter input {
+    background-color: #fff;
+    color: #000;
+    outline: none;
+}
+.kiwi-statebrowser-channelfilter p {
+    color: #1b2f24;
+    font-size: 0.9em;
+    margin: 10px 0 10px 0;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.kiwi-statebrowser-channelfilter p:hover {
+    color: #6dcdad;
+}
+
+.kiwi-statebrowser-newnetwork {
+    border-top: 1px solid #14fdce;
+}
+
+.kiwi-statebrowser-newnetwork a {
+    color: #14fdce;
+}
+.kiwi-statebrowser-newnetwork a:hover {
+    opacity: 1;
+    color: #14fdce;
+    text-decoration: underline;
+}
+
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header {
+    background: #2d463b;
+}
+
+.kiwi-statebrowser-network--active .kiwi-statebrowser-network-header {
+    background: #11402a;
+}
+.kiwi-statebrowser-network .kiwi-statebrowser-network-header a {
+    color: #fff;
+}
+
+
+/* Channel Styling */
+.kiwi-statebrowser-channels  .kiwi-statebrowser-channel {
+    border-bottom: 1px solid #224030;
+    color: #fff;
+}
+.kiwi-statebrowser-channels  .kiwi-statebrowser-channel .kiwi-statebrowser-channel-name {
+    color: #fff;
+}
+.kiwi-statebrowser-channels  .kiwi-statebrowser-channel .kiwi-statebrowser-channel-name  .kiwi-statebrowser-channel-label {
+    background: #3a9065;
+    color: #fff;
+    opacity: 1;
+}
+.kiwi-network-name-option-chanfilter.active{
+    background: #1b2f24;
+}
+
+/* New Channel Button */
+.kiwi-statebrowser-newchannel a {
+    border: 1px solid rgba(255, 255, 255, 0.5);
+}
+.kiwi-statebrowser-newchannel a:hover {
+    background: #1b2f24;
+    opacity: 1;
+    color: #fff;
+}
+
+.kiwi-statebrowser-usermenu-body .close-icon {
+    background-color: #fc6262;
+    color: #fff;
+}
+.kiwi-statebrowser-usermenu-body .close-icon:hover {
+    background-color: #fe7575;
+}
+
+.kiwi-statebrowser-switcher a:first-of-type {
+    background: rgba(255, 255, 255, 0.15);
+}
+.kiwi-statebrowser-switcher a:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.kiwi-statebrowser-options {
+    background: #383838;
+}
+
+.kiwi-statebrowser-channel-notjoined .kiwi-statebrowser-channel-name {
+    color: #d03232;
+}
+.kiwi-statebrowser-channel-active .kiwi-statebrowser-channel-name {
+    color: #df6b26;
+}
+.kiwi-statebrowser-channel-label--highlight {
+    background: #d62323;
+}
+.kiwi-statebrowser-channel-popup {
+    background: #383838;
+    border: 3px solid #6b6b6b;
+    border-left: none;
+}
+.kiwi-statebrowser-newchannel-inputwrap--focus {
+    opacity: 1;
+}
+
+.kiwi-statebrowser-channel-label--highlight {
+    background: #d62323;
+}
+
+.kiwi-statebrowser-channel-popup {
+    background: #383838;
+    border: 3px solid #6b6b6b;
+}
+
+/* Statebrowser Network - ( StateBrowser.vue ) */
+.kiwi-statebrowser-network-header {
+    background: rgba(255, 255, 255, 0.15);
+}
+.kiwi-statebrowser-network-status .u-link {
+    color: #fff;
+}
+.kiwi-statebrowser-channel.kiwi-statebrowser-channel-active {
+    border-left-color: #00ffca33;
+}
+
+/* User Box Styling ( UserBox.vue ) */
+.kiwi-userbox-usermask {
+    color: #5dd895;
+}
+.kiwi-userbox-opactions {
+    border-top: 1px solid #9e9e9e;
+}
+.kiwi-userbox .main-title {
+    border-bottom: 1px solid #9e9e9e;
+}
+.kiwi-userbox .kiwi-userbox-basicinfo {
+    border-bottom: 1px solid #9e9e9e;
+}
+.kiwi-userbox .kiwi-userbox-actions .u-button {
+    border: 1px solid #000;
+    color: #000;
+}
+.kiwi-userbox .kiwi-userbox-actions .u-button:hover {
+    background-color: #000;
+    color: #fff;
+}
+.kiwi-userbox-opactions label select {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.kiwi-userbox-opaction-kick ,
+.kiwi-userbox-opaction-ban,
+.kiwi-userbox-opaction-kickban {
+    color: #fff;
+}
+.kiwi-userbox-opaction-kick {
+    background-color: #f6c358;
+}
+.kiwi-userbox-opaction-kick:hover {
+    background-color: #fcce6e;
+}
+
+.kiwi-userbox-opaction-ban {
+    background-color: #fcb46e;
+}
+.kiwi-userbox-opaction-ban:hover{
+    background-color: #ffca97;
+}
+
+.kiwi-userbox-opaction-kickban{
+    background-color: #fb846a;
+}
+.kiwi-userbox-opaction-kickban:hover{
+    background-color: #ffaf9e;
+}
+
+.kiwi-userbox-actions .kiwi-userbox-action {
+    color: #5dd895;
+    border-color: #5dd895;
+}
+
+.kiwi-userbox-actions .kiwi-userbox-action:hover {
+    background: none;
+    text-decoration: underline;
+}
+
+
+.kiwi-userbox-whois {
+    border: 1px solid #9e9e9e;
+    border-radius: 2px;
+}
+.kiwi-messagelist-message-whois {
+    border-left-color: #939393;
+}
+
+.kiwi-messagelist-message.kiwi-messagelist-message--hover,
+.kiwi-messagelist-message.kiwi-messagelist-message--highlight,
+.kiwi-messagelist-message.kiwi-messagelist-message-traffic--hover {
+    position: relative;
+    border-color: #c9c9c9;
+    opacity: 1;
+}
+
+/* MOTD */
+.kiwi-messagelist-message-motd {
+    color: #666;
+}
+
+/* Customer Server Styling */
+.kiwi-customserver {
+    background-color: #1c2933;
+    color: #fff;
+}
+
+.kiwi-customserver-form {
+    background-color: #151414;
+    border: 1px solid #14fdce;
+}
+
+.kiwi-customserver-form .u-input-text {
+    background-color: #151414;
+}
+
+.kiwi-customserver-form .u-input-text input {
+    background-color: #151414;
+    color: #fff;
+}
+
+.kiwi-customserver .u-button {
+    background-color: none;
+    border: 1px solid #14fdce;
+    color: #14fdce;
+}
+
+.kiwi-customserver .u-link {
+    color: #14fdce;
+    text-decoration: underline;
+}
+
+/* Buffer Key */
+.kiwi-bufferkey input[type='password'] {
+    border: 1px solid #5dd895;
+    color: #5dd895;
+}
+
+.kiwi-bufferkey-button {
+    border: 1px solid #5dd895;
+}
+
+/*Icon before the network in network list */
+.kiwi-statebrowser-network-name::before {
+    content: '\f233';
+    font-family: fontAwesome;
+    margin-right: 2px;
+    font-weight: 100;
+    text-decoration: none;
+}
+
+/* Icons in the Channel List */
+.kiwi-statebrowser-channel[data-name^="*"]::before {
+    content: '\f006';
+    font-family: fontAwesome;
+}
+
+.kiwi-statebrowser-channel[data-name="#help"]::before {
+    content: '\f059';
+    font-family: fontAwesome;
+}
+
+/* U table line breaks */
+.u-table td {
+    border-bottom: 1px solid #5dd895;
+}
+
+.kiwi-settings-advanced-notice {
+    color: #5dd895;
+    border: 1px solid #5dd895;
+}
+
+.kiwi-awaystatusindicator {
+    border: 1px solid #e1e1e1;
+    background-color: #5dd895;
+}
+
+.kiwi-awaystatusindicator--away {
+    background-color: #1b2f24;
+}
+
+.kiwi-selfuser-error-message {
+    background: #d16c6c;
+    color: #fff;
+}
+
+.kiwi-messagelist-message--own {
+    background-color: #3dc37829;
+}
+
+@media screen and (max-width: 769px) {
+    .kiwi-appsettings {
+        background-color: #294234;
+    }
+}
+
+.kiwi-messagelist::-webkit-scrollbar-thumb {
+    background-color: #9e9e9e;
+}
diff --git a/kiwiirc/static/themes/sky/theme.css b/kiwiirc/static/themes/sky/theme.css
new file mode 100644
index 0000000..d018ca7
--- /dev/null
+++ b/kiwiirc/static/themes/sky/theme.css
@@ -0,0 +1,107 @@
+@import '../common/base.css';
+
+:root {
+    /* Primary Variables */
+    --brand-primary: #78c9dc;
+    --brand-primary-hover: #8fd9ea;
+    --brand-midtone: #f1f1f1;
+    --brand-darktone: #969696;
+    --brand-default-bg: #fff;
+    --brand-default-fg: #22231f;
+
+    /* Warning colors */
+    --brand-notice: #f6c358;
+    --brand-warning: #fcb46e;
+    --brand-error: #bf5155;
+
+    /* Connection Indicator top */
+    --comp-workspace-before-bg: var(--brand-primary);
+    --comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
+
+    /* Container Header */
+    --comp-header-bg: var(--brand-default-bg);
+    --comp-header-name-fg: var(--brand-default-fg);
+    --comp-header-option-active-fg: var(--brand-default-bg);
+    --comp-header-option-active-bg: var(--brand-primary);
+
+    /* StateBrowser */
+    --comp-statebrowser-fg: #fff;
+    --comp-statebrowser-bg: #4dafc5;
+    --comp-statebrowser-bg-networkname: #80c8d8;
+    --comp-statebrowser-channel-active-bg: #ffffff0d;
+    --comp-statebrowser-channel-active-fg: #fff;
+    --comp-usermenu-open-bg: #0e0e0e;
+    --comp-statebrowser-network-border: #656565;
+
+
+    /* Sidebars ( Right Side ) */
+    --comp-sidebar-bg: #fff;
+    --comp-sidebar-fg: #22231f;
+    --comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
+    --comp-aboutbuffer-header-bg: #42b992;
+
+    /* Misc */
+    --brand-link-normal: var(--brand-primary);
+    --brand-link--hover: var(--brand-primary-hover);
+    --brand-shadow: rgba(0, 0, 0, 0.1);
+    --comp-border: #b2b2b2;
+}
+
+/* Welcome */
+.kiwi-startup-common-section-info {
+    border-left-color: var(--brand-primary);
+}
+
+/* StateBrowser */
+.kiwi-statebrowser-usermenu--open {
+    background-color: #5d919c;
+}
+.kiwi-statebrowser-network-status .u-link {
+    color: #fff;
+}
+.kiwi-network-name-options {
+    background-color: #7dc8d9;
+}
+.kiwi-statebrowser-channel-leave {
+    background: transparent;
+}
+
+/* Sidebar */
+.kiwi-aboutbuffer h4 {
+    background-color: #74c9dd;
+}
+
+/* IRC Text Colours */
+.irc-fg-colour-white { color: #fff; }
+.irc-fg-colour-black { color: #000; }
+.irc-fg-colour-blue { color: #00f; }
+.irc-fg-colour-green { color: #009300; }
+.irc-fg-colour-light-red { color: #ff5959; }
+.irc-fg-colour-brown { color: #743a00; }
+.irc-fg-colour-purple { color: #a500ff; }
+.irc-fg-colour-orange { color: #ff8c00; }
+.irc-fg-colour-yellow { color: #ff0; }
+.irc-fg-colour-light-green { color: #6fff6f; }
+.irc-fg-colour-cyan { color: #0cc; }
+.irc-fg-colour-light-cyan { color: #6dffff; }
+.irc-fg-colour-light-blue { color: #59b4ff; }
+.irc-fg-colour-pink { color: #f0f; }
+.irc-fg-colour-grey { color: #a6a6a6; }
+.irc-fg-colour-light-grey { color: #e2e2e2; }
+
+.irc-bg-colour-white { background-color: #fff; }
+.irc-bg-colour-black { background-color: #000; }
+.irc-bg-colour-blue { background-color: #00f; }
+.irc-bg-colour-green { background-color: #009300; }
+.irc-bg-colour-light-red { background-color: #ff5959; }
+.irc-bg-colour-brown { background-color: #743a00; }
+.irc-bg-colour-purple { background-color: #a500ff; }
+.irc-bg-colour-orange { background-color: #ff8c00; }
+.irc-bg-colour-yellow { background-color: #ff0; }
+.irc-bg-colour-light-green { background-color: #6fff6f; }
+.irc-bg-colour-cyan { background-color: #0cc; }
+.irc-bg-colour-light-cyan { background-color: #6dffff; }
+.irc-bg-colour-light-blue { background-color: #59b4ff; }
+.irc-bg-colour-pink { background-color: #f0f; }
+.irc-bg-colour-grey { background-color: #a6a6a6; }
+.irc-bg-colour-light-grey { background-color: #e2e2e2; }