diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ec1e4ad6..0c1a47df 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -480,5 +480,9 @@
"example": "John"
}
}
+ },
+ "themeAndroidDark": {
+ "message": "Android (dark)",
+ "description": "Label text for dark Android theme"
}
}
diff --git a/background.html b/background.html
index 7db382f0..6a41305d 100644
--- a/background.html
+++ b/background.html
@@ -433,6 +433,10 @@
+
+
+
+
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 90ee5970..9247b0cf 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -97,6 +97,7 @@
applyTheme: function() {
var theme = storage.get('theme-setting') || 'android';
this.$el.removeClass('ios')
+ .removeClass('android-dark')
.removeClass('android')
.addClass(theme);
},
diff --git a/js/views/settings_view.js b/js/views/settings_view.js
index c2500873..b801b4e2 100644
--- a/js/views/settings_view.js
+++ b/js/views/settings_view.js
@@ -84,6 +84,7 @@
nameOnly: i18n('nameOnly'),
safetyNumbersSettingDescription: i18n('safetyNumbersSettingDescription'),
safetyNumbersSettingHeader: i18n('safetyNumbersSettingHeader'),
+ themeAndroidDark: i18n('themeAndroidDark'),
};
}
});
diff --git a/stylesheets/_android.scss b/stylesheets/_android.scss
index 20d7b8d4..d5125524 100644
--- a/stylesheets/_android.scss
+++ b/stylesheets/_android.scss
@@ -66,4 +66,3 @@
@include header-icon-black('/images/back.svg');
}
}
-
diff --git a/stylesheets/android-dark.scss b/stylesheets/android-dark.scss
new file mode 100644
index 00000000..4444cefc
--- /dev/null
+++ b/stylesheets/android-dark.scss
@@ -0,0 +1,149 @@
+$grey-dark: #333333;
+$grey-dark_l2: darken($grey-dark, 4%);
+$grey-dark_l3: darken($grey-dark_l2, 7%);
+$grey-dark_l4: darken($grey-dark_l3, 8%);
+$text-dark: #CCCCCC;
+
+.android-dark {
+ color: $text-dark;
+ hr {
+ border-color: $grey-dark;
+ }
+ #header {
+ background-color: $grey-dark;
+ color: $text-dark;
+ transition: background-color 0.5s;
+ &.inactive {
+ background-color: $grey-dark;
+ color: $text-dark;
+ }
+ }
+ .message-detail, .message-container, .conversation, .modal .content,
+ .discussion-container, .attachment-previews {
+ background-color: $grey-dark_l3;
+ }
+ .lightbox .content {
+ background-color: rgba(0, 0, 0, 0);
+ }
+ .key-verification .key {
+ background-color: $grey-dark_l4;
+ border-color: $grey-dark_l2;
+ }
+ .menu-list {
+ background-color: $grey-dark_l2;
+ color: $text-dark;
+ li:hover {
+ background-color: $grey-dark;
+ }
+ }
+ .flex {
+ background-color: $grey-dark_l2;
+ .send-message {
+ background-color: $grey-dark_l2;
+ color: $text-dark;
+ }
+ }
+ .conversation-stack .inactive {
+ .conversation-header{
+ background-color: $grey-dark;
+ color: $text-dark;
+ }
+ }
+ .contact-details .name {
+ font-weight: 400;
+ }
+ .group-member-list .members .contact, .new-group-update .members .contact, .attachment-previews img {
+ background-color: $grey-dark_l3;
+ border-color: $grey-dark;
+ }
+ .conversation.placeholder .conversation-header {
+ display: none;
+ }
+ .conversation-header, .bubble {
+ @include avatar-colors;
+ }
+ .message-list .advisory .content {
+ background-color: $grey-dark;
+ }
+ .inactive .conversation-header {
+ background-color: $grey-dark !important;
+ color: $text-dark;
+ }
+ .sent .status {
+ display: inline-block;
+ @include color-svg('/images/check.svg', white);
+ }
+ .paperclip:before {
+ content: '';
+ display: inline-block;
+ width: $button-height;
+ height: $button-height;
+ @include color-svg('/images/paperclip.svg', white);
+ transform: rotateZ(-45deg);
+ }
+ .scrollable {
+ background-color: $grey-dark_l3;
+ .conversation-list-item {
+ background-color: $grey-dark_l3;
+ color: $text-dark;
+ }
+ }
+ .bottom-bar {
+ min-height: 10px;
+ background-color: $grey-dark_l2;
+ }
+ .search {
+ background-color: $grey-dark_l2;
+ border-color: $grey-dark_l2;
+ @include invert-text-color;
+ }
+ .bubble {
+ padding: 9px 12px;
+ border-radius: $border-radius;
+ box-shadow: 0 3px 3px -4px black;
+ }
+
+ .outgoing .bubble {
+ background-color: $grey-dark;
+ @include invert-text-color;
+ }
+ .outgoing .hourglass, .incoming .hourglass {
+ @include hourglass(#000);
+ }
+
+ .incoming .bubble {
+ .sender, .content, .body, .meta, a {
+ @include invert-text-color;
+ }
+ .attachments, .content {
+ a {
+ color: $grey_l;
+ }
+ }
+ }
+ button.clock {
+ @include header-icon-white('/images/clock.svg');
+ }
+ button.hamburger {
+ @include header-icon-white('/images/menu.svg');
+ }
+ button.back {
+ @include header-icon-white('/images/back.svg');
+ }
+ button.grey {
+ background-color: $grey-dark;
+ color: $text-dark;
+ border-color: $grey-dark_l2;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(120,120,120,0.15);
+
+ &:hover {
+ background: rgba(120,120,120,0.25);
+ }
+ }
+ ::-webkit-scrollbar-track {
+ background-color: $grey-dark_l2;
+ }
+}
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 0a55c0b8..a191c008 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1697,4 +1697,185 @@ li.entry .error-icon-container {
-webkit-mask-size: 100%;
background-color: black; }
+.android-dark {
+ color: #CCCCCC; }
+ .android-dark hr {
+ border-color: #333333; }
+ .android-dark #header {
+ background-color: #333333;
+ color: #CCCCCC;
+ transition: background-color 0.5s; }
+ .android-dark #header.inactive {
+ background-color: #333333;
+ color: #CCCCCC; }
+ .android-dark .message-detail, .android-dark .message-container, .android-dark .conversation, .android-dark .modal .content,
+ .android-dark .discussion-container, .android-dark .attachment-previews {
+ background-color: #171717; }
+ .android-dark .lightbox .content {
+ background-color: transparent; }
+ .android-dark .key-verification .key {
+ background-color: #030303;
+ border-color: #292929; }
+ .android-dark .menu-list {
+ background-color: #292929;
+ color: #CCCCCC; }
+ .android-dark .menu-list li:hover {
+ background-color: #333333; }
+ .android-dark .flex {
+ background-color: #292929; }
+ .android-dark .flex .send-message {
+ background-color: #292929;
+ color: #CCCCCC; }
+ .android-dark .conversation-stack .inactive .conversation-header {
+ background-color: #333333;
+ color: #CCCCCC; }
+ .android-dark .contact-details .name {
+ font-weight: 400; }
+ .android-dark .group-member-list .members .contact, .android-dark .new-group-update .members .contact, .android-dark .attachment-previews img {
+ background-color: #171717;
+ border-color: #333333; }
+ .android-dark .conversation.placeholder .conversation-header {
+ display: none; }
+ .android-dark .conversation-header.red, .android-dark .bubble.red {
+ background-color: #EF5350; }
+ .android-dark .conversation-header.pink, .android-dark .bubble.pink {
+ background-color: #EC407A; }
+ .android-dark .conversation-header.purple, .android-dark .bubble.purple {
+ background-color: #AB47BC; }
+ .android-dark .conversation-header.deep_purple, .android-dark .bubble.deep_purple {
+ background-color: #7E57C2; }
+ .android-dark .conversation-header.indigo, .android-dark .bubble.indigo {
+ background-color: #5C6BC0; }
+ .android-dark .conversation-header.blue, .android-dark .bubble.blue {
+ background-color: #2196F3; }
+ .android-dark .conversation-header.light_blue, .android-dark .bubble.light_blue {
+ background-color: #03A9F4; }
+ .android-dark .conversation-header.cyan, .android-dark .bubble.cyan {
+ background-color: #00BCD4; }
+ .android-dark .conversation-header.teal, .android-dark .bubble.teal {
+ background-color: #009688; }
+ .android-dark .conversation-header.green, .android-dark .bubble.green {
+ background-color: #4CAF50; }
+ .android-dark .conversation-header.light_green, .android-dark .bubble.light_green {
+ background-color: #7CB342; }
+ .android-dark .conversation-header.orange, .android-dark .bubble.orange {
+ background-color: #FF9800; }
+ .android-dark .conversation-header.deep_orange, .android-dark .bubble.deep_orange {
+ background-color: #FF5722; }
+ .android-dark .conversation-header.amber, .android-dark .bubble.amber {
+ background-color: #FFB300; }
+ .android-dark .conversation-header.blue_grey, .android-dark .bubble.blue_grey {
+ background-color: #607D8B; }
+ .android-dark .conversation-header.grey, .android-dark .bubble.grey {
+ background-color: #999999; }
+ .android-dark .conversation-header.default, .android-dark .bubble.default {
+ background-color: #2090ea; }
+ .android-dark .message-list .advisory .content {
+ background-color: #333333; }
+ .android-dark .inactive .conversation-header {
+ background-color: #333333 !important;
+ color: #CCCCCC; }
+ .android-dark .sent .status {
+ display: inline-block;
+ -webkit-mask: url("/images/check.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: white; }
+ .android-dark .paperclip:before {
+ content: '';
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ -webkit-mask: url("/images/paperclip.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: white;
+ transform: rotateZ(-45deg); }
+ .android-dark .scrollable {
+ background-color: #171717; }
+ .android-dark .scrollable .conversation-list-item {
+ background-color: #171717;
+ color: #CCCCCC; }
+ .android-dark .bottom-bar {
+ min-height: 10px;
+ background-color: #292929; }
+ .android-dark .search {
+ background-color: #292929;
+ border-color: #292929;
+ color: white; }
+ .android-dark .search::selection {
+ background: white;
+ color: #454545; }
+ .android-dark .bubble {
+ padding: 9px 12px;
+ border-radius: 5px;
+ box-shadow: 0 3px 3px -4px black; }
+ .android-dark .outgoing .bubble {
+ background-color: #333333;
+ color: white; }
+ .android-dark .outgoing .bubble::selection {
+ background: white;
+ color: #454545; }
+ .android-dark .outgoing .hourglass, .android-dark .incoming .hourglass {
+ display: inline-block;
+ position: relative;
+ -webkit-mask: url("/images/hourglass_full.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: transparent;
+ background-size: 100%; }
+ .android-dark .outgoing .hourglass, .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+ width: 13px;
+ height: 11px; }
+ .android-dark .outgoing .hourglass .sand, .android-dark .outgoing .hourglass:before, .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass .sand, .android-dark .incoming .hourglass:before, .android-dark .incoming .hourglass:after {
+ content: '';
+ display: inline-block;
+ position: absolute;
+ top: 0;
+ left: 0; }
+ .android-dark .outgoing .hourglass .sand, .android-dark .incoming .hourglass .sand {
+ background: #000; }
+ .android-dark .outgoing .hourglass:after, .android-dark .incoming .hourglass:after {
+ -webkit-mask: url("/images/hourglass_empty.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: #000; }
+ .android-dark .incoming .bubble .sender, .android-dark .incoming .bubble .content, .android-dark .incoming .bubble .body, .android-dark .incoming .bubble .meta, .android-dark .incoming .bubble a {
+ color: white; }
+ .android-dark .incoming .bubble .sender::selection, .android-dark .incoming .bubble .content::selection, .android-dark .incoming .bubble .body::selection, .android-dark .incoming .bubble .meta::selection, .android-dark .incoming .bubble a::selection {
+ background: white;
+ color: #454545; }
+ .android-dark .incoming .bubble .attachments a, .android-dark .incoming .bubble .content a {
+ color: #f3f3f3; }
+ .android-dark button.clock {
+ -webkit-mask: url("/images/clock.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: rgba(255, 255, 255, 0.8); }
+ .android-dark button.clock:focus, .android-dark button.clock:hover {
+ -webkit-mask: url("/images/clock.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: white; }
+ .android-dark button.hamburger {
+ -webkit-mask: url("/images/menu.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: rgba(255, 255, 255, 0.8); }
+ .android-dark button.hamburger:focus, .android-dark button.hamburger:hover {
+ -webkit-mask: url("/images/menu.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: white; }
+ .android-dark button.back {
+ -webkit-mask: url("/images/back.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: rgba(255, 255, 255, 0.8); }
+ .android-dark button.back:focus, .android-dark button.back:hover {
+ -webkit-mask: url("/images/back.svg") no-repeat center;
+ -webkit-mask-size: 100%;
+ background-color: white; }
+ .android-dark button.grey {
+ background-color: #333333;
+ color: #CCCCCC;
+ border-color: #292929; }
+ .android-dark ::-webkit-scrollbar-thumb {
+ background: rgba(120, 120, 120, 0.15); }
+ .android-dark ::-webkit-scrollbar-thumb:hover {
+ background: rgba(120, 120, 120, 0.25); }
+ .android-dark ::-webkit-scrollbar-track {
+ background-color: #292929; }
+
/*# sourceMappingURL=manifest.css.map */
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 24b36f59..65946d31 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -18,3 +18,4 @@
@import 'conversation';
@import 'ios';
@import 'android';
+ @import 'android-dark';
diff --git a/test/fixtures_test.js b/test/fixtures_test.js
index 523263cc..f4579e16 100644
--- a/test/fixtures_test.js
+++ b/test/fixtures_test.js
@@ -14,6 +14,10 @@ describe("Fixtures", function() {
var view = new Whisper.InboxView({appWindow: {contentWindow: window}});
view.$el.removeClass('android').addClass('ios');
view.$el.prependTo($('#render-ios'));
+
+ var view = new Whisper.InboxView({appWindow: {contentWindow: window}});
+ view.$el.removeClass('android').addClass('android-dark');
+ view.$el.prependTo($('#render-android-dark'));
}).then(done,done);
});
});
diff --git a/test/index.html b/test/index.html
index f66e9c23..6e7d30de 100644
--- a/test/index.html
+++ b/test/index.html
@@ -12,6 +12,8 @@
+
+