Commit 174b257c authored by Emmanuel Gil Peyrot's avatar Emmanuel Gil Peyrot Committed by JC Brand

Add a dark theme inspired by Discord

This theme takes inspiration from https://discordapp.com/ and builds on
top of custom-properties, making the design more familiar to some users.

In order to change the theme, add the 'theme-dark' class on #conversejs,
you can do it at any point during the lifetime of Converse, either
directly in your HTML or by changing the DOM at runtime.
parent 067d87a7
This diff is collapsed.
...@@ -152,13 +152,17 @@ ...@@ -152,13 +152,17 @@
} }
} }
.chat-title { .chat-title {
display: var(--heading-display);
font-family: var(--heading-font); font-family: var(--heading-font);
color: white; color: var(--heading-color);
display: block; display: block;
line-height: var(--line-height-large); line-height: var(--line-height-large);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
&.groupchat {
padding-right: var(--chatroom-head-title-padding-right);
}
a { a {
color: var(--chat-head-text-color); color: var(--chat-head-text-color);
width: 100%; width: 100%;
...@@ -260,6 +264,7 @@ ...@@ -260,6 +264,7 @@
.chat-textarea { .chat-textarea {
color: var(--chat-textarea-color); color: var(--chat-textarea-color);
background-color: var(--chat-textarea-background-color);
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-radius: var(--chatbox-border-radius); border-bottom-radius: var(--chatbox-border-radius);
...@@ -273,7 +278,7 @@ ...@@ -273,7 +278,7 @@
height: 42px; height: 42px;
} }
&.correcting { &.correcting {
background-color: var(--chat-head-color-lighten-50-percent); background-color: var(--chat-correcting-color);
} }
} }
......
...@@ -34,9 +34,11 @@ ...@@ -34,9 +34,11 @@
.chat-head-chatroom { .chat-head-chatroom {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-color);
border-bottom: var(--chatroom-head-border-bottom);
.chatroom-description { .chatroom-description {
color: var(--chatroom-head-color-lighten-25-percent); color: var(--chatroom-head-description-color);
display: var(--chatroom-head-description-display);
font-size: var(--font-size); font-size: var(--font-size);
font-size: 70%; font-size: 70%;
margin-top: 3px; margin-top: 3px;
...@@ -44,8 +46,10 @@ ...@@ -44,8 +46,10 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
border-left: var(--chatroom-head-description-border-left);
padding-left: var(--chatroom-head-description-padding-left);
a { a {
color: white; color: var(--chatroom-head-description-link-color);
} }
} }
...@@ -54,7 +58,7 @@ ...@@ -54,7 +58,7 @@
&.fa { &.fa {
color: var(--chat-head-text-color); color: var(--chat-head-text-color);
&.button-on:before { &.button-on:before {
color: var(--chatroom-head-color); color: var(--chatroom-head-button-color);
} }
} }
} }
...@@ -62,10 +66,13 @@ ...@@ -62,10 +66,13 @@
.chatbox-btn { .chatbox-btn {
&.button-on:before { &.button-on:before {
color: var(--chatroom-head-color); color: var(--chatroom-head-button-color);
} }
} }
.chat-title { .chat-title {
display: var(--heading-display);
font-weight: var(--chatroom-head-title-font-weight);
padding-right: var(--chatroom-head-title-padding-right);
.chatroom-jid { .chatroom-jid {
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }
...@@ -109,10 +116,12 @@ ...@@ -109,10 +116,12 @@
flex-direction: row; flex-direction: row;
} }
.chat-topic { .chat-topic {
display: var(--chat-topic-display);
font-weight: bold; font-weight: bold;
color: var(--chatroom-head-color); color: var(--chatroom-head-color);
} }
.chat-info { .chat-info {
display: var(--chat-info-display);
color: var(--chatroom-head-color); color: var(--chatroom-head-color);
line-height: normal; line-height: normal;
&.badge { &.badge {
...@@ -144,10 +153,11 @@ ...@@ -144,10 +153,11 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
vertical-align: top; vertical-align: top;
background-color: white; background-color: var(--occupants-background-color);
border-left: 1px solid var(--text-color); border-left: var(--occupants-border-left);
border-bottom-right-radius: var(--chatbox-border-radius); border-bottom-right-radius: var(--chatbox-border-radius);
padding: 0.5em; padding: 0.5em;
max-width: var(--occupants-max-width);
.occupants-header { .occupants-header {
display: flex; display: flex;
...@@ -160,6 +170,9 @@ ...@@ -160,6 +170,9 @@
.occupants-heading { .occupants-heading {
font-family: var(--heading-font); font-family: var(--heading-font);
} }
.chatroom-features {
display: var(--occupants-features-display);
}
.awesomplete { .awesomplete {
ul { ul {
padding: 0; padding: 0;
...@@ -179,7 +192,7 @@ ...@@ -179,7 +192,7 @@
overflow-y: auto; overflow-y: auto;
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid lightgrey; border-bottom: var(--occupants-border-bottom);
} }
li { li {
cursor: default; cursor: default;
...@@ -269,7 +282,7 @@ ...@@ -269,7 +282,7 @@
margin: 0 0.5em; margin: 0 0.5em;
} }
.button-primary { .button-primary {
background-color: var(--chatroom-head-color); background-color: var(--chatroom-head-button-color);
} }
} }
} }
...@@ -278,22 +291,22 @@ ...@@ -278,22 +291,22 @@
.sendXMPPMessage { .sendXMPPMessage {
.chat-toolbar { .chat-toolbar {
background-color: white; background-color: white;
border-top: 4px solid var(--chatroom-head-color); border-top: var(--message-input-border-top);
color: var(--chatroom-head-color); color: var(--message-input-color);
.fas, .fas:hover, .fas, .fas:hover,
.far, .far:hover, .far, .far:hover,
.fa, .fa:hover { .fa, .fa:hover {
color: var(--chatroom-head-color); color: var(--message-input-color);
} }
} }
.chat-textarea { .chat-textarea {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
&.correcting { &.correcting {
background-color: var(--chatroom-head-color-lighten-30-percent); background-color: var(--chatroom-correcting-color);
} }
} }
.send-button { .send-button {
background-color: var(--chatroom-head-color); background-color: var(--message-input-color);
} }
} }
......
...@@ -215,6 +215,8 @@ ...@@ -215,6 +215,8 @@
.controlbox-heading { .controlbox-heading {
font-family: var(--heading-font); font-family: var(--heading-font);
color: var(--controlbox-heading-color);
font-weight: var(--controlbox-heading-font-weight);
padding: 0; padding: 0;
margin: 0.75em 0; margin: 0.75em 0;
font-size: 1.1em; font-size: 1.1em;
...@@ -282,7 +284,7 @@ ...@@ -282,7 +284,7 @@
.controlbox-panes { .controlbox-panes {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background-color: white; background-color: var(--controlbox-pane-background-color);
} }
.controlbox-subtitle { .controlbox-subtitle {
...@@ -292,7 +294,7 @@ ...@@ -292,7 +294,7 @@
} }
.controlbox-pane { .controlbox-pane {
background-color: white; background-color: var(--controlbox-pane-background-color);
border: 0; border: 0;
font-size: var(--font-size); font-size: var(--font-size);
left: 0; left: 0;
......
...@@ -447,9 +447,9 @@ body.reset { ...@@ -447,9 +447,9 @@ body.reset {
} }
.avatar { .avatar {
border-radius: 10%; border-radius: var(--avatar-border-radius);
border: 1px solid lightgrey; border: var(--avatar-border);
background: white; background-color: var(--avatar-background-color);
} }
.activated { .activated {
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
.list-toggle { .list-toggle {
font-family: var(--heading-font); font-family: var(--heading-font);
font-weight: var(--list-toggle-font-weight);
display: block; display: block;
color: var(--text-color); color: var(--text-color);
padding: 0 0 0.5rem 0; padding: 0 0 0.5rem 0;
...@@ -29,8 +30,9 @@ ...@@ -29,8 +30,9 @@
word-wrap: break-word; word-wrap: break-word;
.list-item-link { .list-item-link {
color: var(--list-item-link-color);
&:hover { &:hover {
color: var(--dark-link-color); color: var(--list-item-link-hover-color);
} }
font-size: var(--font-size); font-size: var(--font-size);
line-height: var(--font-size); line-height: var(--font-size);
...@@ -50,9 +52,9 @@ ...@@ -50,9 +52,9 @@
font-size: var(--font-size); font-size: var(--font-size);
} }
&.button-on { &.button-on {
color: var(--link-color); color: var(--list-item-link-color);
&:hover { &:hover {
color: var(--dark-link-color); color: var(--list-item-link-hover-color);
} }
} }
color: var(--subdued-color); color: var(--subdued-color);
...@@ -63,9 +65,9 @@ ...@@ -63,9 +65,9 @@
} }
&.open { &.open {
background-color: var(--controlbox-head-color); background-color: var(--list-item-open-color);
&:hover { &:hover {
background-color: var(--controlbox-head-color) !important; background-color: var(--list-item-open-hover-color) !important;
} }
a { a {
color: white; color: white;
......
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
z-index: 0; z-index: 0;
.separator { .separator {
border: 0.5px solid var(--chat-head-color); border-top: 0px;
border-bottom: var(--chat-separator-border-bottom);
margin: 0 1em; margin: 0 1em;
position: relative; position: relative;
top: 1em; top: 1em;
...@@ -24,7 +25,7 @@ ...@@ -24,7 +25,7 @@
.separator-text { .separator-text {
background: white; background: white;
bottom: 1px; // Offset needed due to .separator border size bottom: 1px; // Offset needed due to .separator border size
color: var(--message-text-color); color: var(--separator-text-color);
display: inline-block; display: inline-block;
line-height: 2em; line-height: 2em;
padding: 0 1em; padding: 0 1em;
...@@ -86,10 +87,10 @@ ...@@ -86,10 +87,10 @@
} }
&.correcting { &.correcting {
&.groupchat { &.groupchat {
background-color: var(--chatroom-head-color-lighten-30-percent); background-color: var(--chatroom-correcting-color);
} }
&:not(.groupchat) { &:not(.groupchat) {
background-color: var(--chat-head-color-lighten-50-percent); background-color: var(--chat-correcting-color);
} }
} }
...@@ -269,7 +270,8 @@ ...@@ -269,7 +270,8 @@
-webkit-animation: colorchange-chatmessage-muc 1s; -webkit-animation: colorchange-chatmessage-muc 1s;
} }
.separator { .separator {
border: 0.5px solid var(--chatroom-head-color); border-top: 0px;
border-bottom: var(--chatroom-separator-border-bottom);
} }
} }
} }
......
...@@ -32,6 +32,7 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -32,6 +32,7 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--save-button-color: #3AA569; // $green --save-button-color: #3AA569; // $green
--chat-textarea-color: #666; --chat-textarea-color: #666;
--chat-textarea-background-color: white;
--chat-textarea-height: 60px; --chat-textarea-height: 60px;
--send-button-height: 27px; --send-button-height: 27px;
...@@ -45,6 +46,10 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -45,6 +46,10 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--chat-head-color: #3AA569; // $green --chat-head-color: #3AA569; // $green
--chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%) --chat-head-color-lighten-50-percent: #e7f7ee; // lighten($green, 50%)
--chat-head-text-color: white; --chat-head-text-color: white;
--chat-correcting-color: var(--chat-head-color-lighten-50-percent);
--chat-topic-display: block;
--chat-info-display: block;
--highlight-color: #DCF9F6; --highlight-color: #DCF9F6;
...@@ -71,6 +76,9 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -71,6 +76,9 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--controlbox-width: 250px; --controlbox-width: 250px;
--controlbox-head-color: #578EA9; // $light-blue --controlbox-head-color: #578EA9; // $light-blue
--controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%) --controlbox-head-color-lighten-45-percent: #eff4f7; // lighten($light-blue, 45%)
--controlbox-pane-background-color: white;
--controlbox-heading-color: inherit;
--controlbox-heading-font-weight: normal;
--chat-gutter: 0.5em; --chat-gutter: 0.5em;
--minimized-chats-width: 130px; --minimized-chats-width: 130px;
...@@ -83,11 +91,22 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -83,11 +91,22 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--normal-font: "Helvetica", "Arial", sans-serif; --normal-font: "Helvetica", "Arial", sans-serif;
--heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif; --heading-font: futura, 'Century Gothic', 'URW Gothic L', Verdana, sans-serif;
--heading-display: block;
--heading-color: white;
--chatroom-head-color: #E77051; // $red --chatroom-head-color: #E77051; // $red
--chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%) --chatroom-head-color-lighten-25-percent: #f6ccc1; // lighten($red, 25%)
--chatroom-head-color-lighten-30-percent: #fadfd7; // lighten($red, 30%) --chatroom-head-button-color: var(--chatroom-head-color);
--chatroom-head-title-font-weight: normal;
--chatroom-head-title-padding-right: 0px;
--chatroom-head-description-color: var(--chatroom-head-color-lighten-25-percent);
--chatroom-head-description-link-color: white;
--chatroom-head-description-display: block;
--chatroom-head-description-border-left: 0px;
--chatroom-head-description-padding-left: 0px;
--chatroom-head-border-bottom: 0px;
--chatroom-width: 400px; --chatroom-width: 400px;
--chatroom-correcting-color: #fadfd7; // lighten($red, 30%)
--headline-head-color: #E7A151; // $orange --headline-head-color: #E7A151; // $orange
--headline-message-color: #D2842B; // $dark-orange --headline-message-color: #D2842B; // $dark-orange
...@@ -102,6 +121,12 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -102,6 +121,12 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--font-size-huge: 20px; --font-size-huge: 20px;
--message-font-size: var(--font-size); --message-font-size: var(--font-size);
--separator-text-color: var(--message-text-color);
--chat-separator-border-bottom: 2px solid var(--chat-head-color);
--chatroom-separator-border-bottom: 2px solid var(--chatroom-head-color);
--message-input-border-top: 4px solid var(--chatroom-head-color);
--message-input-color: var(--chatroom-head-color);
--line-height-small: 14px; --line-height-small: 14px;
--line-height: 16px; --line-height: 16px;
...@@ -109,9 +134,18 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -109,9 +134,18 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--line-height-huge: 27px; --line-height-huge: 27px;
--occupants-padding: 1em; --occupants-padding: 1em;
--occupants-background-color: white;
--occupants-max-width: inherit;
--occupants-border-left: 1px solid var(--text-color);
--occupants-border-bottom: 1px solid lightgrey;
--occupants-features-display: block;
--embedded-emoji-picker-height: 200px; --embedded-emoji-picker-height: 200px;
--avatar-border-radius: 10%;
--avatar-border: 1px solid lightgrey;
--avatar-background-color: white;
--fullpage-chat-head-height: 62px; --fullpage-chat-head-height: 62px;
--fullpage-chat-height: 100vh; --fullpage-chat-height: 100vh;
--fullpage-chat-width: 100%; --fullpage-chat-width: 100%;
...@@ -128,8 +162,70 @@ $font-path: "webfonts/icomoon/fonts/" !default; ...@@ -128,8 +162,70 @@ $font-path: "webfonts/icomoon/fonts/" !default;
--list-toggle-color: #585B51; // $dark-gray-color --list-toggle-color: #585B51; // $dark-gray-color
--list-toggle-hover-color: #818479; // $gray-color --list-toggle-hover-color: #818479; // $gray-color
--list-toggle-font-weight: normal;
--list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%) --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
--list-item-link-color: inherit;
--list-item-link-hover-color: var(--dark-link-color);
--list-item-open-color: var(--controlbox-head-color);
--list-item-open-hover-color: var(--controlbox-head-color);
--list-circle-color: #89d6ab; // lighten($green, 25%) --list-circle-color: #89d6ab; // lighten($green, 25%)
--list-minus-circle-color: #f0a794; // lighten($red, 15%) --list-minus-circle-color: #f0a794; // lighten($red, 15%)
--list-dot-circle-color: #f6dec1; // lighten($orange, 25%) --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
} }
#conversejs.theme-dark {
--avatar-border-radius: 100%;
--avatar-border: 0px;
--avatar-background-color: none;
--controlbox-pane-background-color: #333;
--controlbox-heading-color: #777;
--controlbox-heading-font-weight: bold;
--chat-topic-display: none;
--chat-info-display: none;
--chat-textarea-background-color: #F6F6F6;
--chat-correcting-color: #FFFFC0;
--chat-head-text-color: #999;
--chatbox-border-radius: 0px;
--heading-display: inline;
--heading-color: #4F545C;
--chatroom-head-color: white;
--chatroom-head-color-lighten-25-percent: blue;
--chatroom-head-button-color: #999;
--chatroom-head-title-font-weight: bold;
--chatroom-head-title-padding-right: 12px;
--chatroom-head-description-color: black;
--chatroom-head-description-link-color: #00b3f4;
--chatroom-head-description-display: inline;
--chatroom-head-description-border-left: 1px solid #DDD;
--chatroom-head-description-padding-left: 12px;
--chatroom-head-border-bottom: 1px solid #EEE;
--chatroom-correcting-color: #FFFFC0;
--occupants-background-color: #F3F3F3;
/* TODO: find a way to allow that and reflow the chat-area properly.
* --occupants-max-width: 240px; */
--occupants-border-left: 0px;
--occupants-border-bottom: 0px;
--occupants-features-display: none;
--separator-text-color: #AAA;
--chat-separator-border-bottom: 1px solid #AAA;
--chatroom-separator-border-bottom: 1px solid #AAA;
--message-input-border-top: 1px solid #CCC;
--message-input-color: #CCC;
--fullpage-chat-head-height: 40px;
--fullpage-chatbox-button-size: 24px;
--list-toggle-font-weight: bold;
--list-item-link-color: #F1F1F1;
--list-item-link-hover-color: #DDD;
--list-item-open-color: #444;
--list-item-open-hover-color: #444;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment