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 @@
+
+