Add dark theme

Also renamed "Original Dark" to "Original Gray", because it isn't "dark".

closes #7152

Changelog.md

@@ -8,6 +8,7 @@
 
 ## Features
 * Show spinner when loading comments in the stream [#7170](https://github.com/diaspora/diaspora/pull/7170)
+* Add a dark color theme [#7152](https://github.com/diaspora/diaspora/pull/7152)
 
 # 0.6.1.0
 

app/assets/stylesheets/color_themes/_color_theme_override_dark.scss

+// Only overriding existing selectors here, so disable some lint rules
+// scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement
+body {
+  .navbar.navbar-fixed-top #user_menu .dropdown-menu > li > a {
+    color: $text-color;
+    &:hover { color: $white; }
+  }
+
+  .publisher {
+    .mentions-input-box { background-color: $gray; }
+    form {
+      #publisher_textarea_wrapper { background-color: $gray; }
+      .btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }
+    }
+
+    .write-preview-tabs > li.active * { color: $text-color; }
+    .md-preview { background-color: $gray; }
+    .md-cancel:hover .entypo-cross { color: $gray-light; }
+    .publisher-buttonbar .btn.btn-link:hover i { color: $gray-light; }
+  }
+
+  .aspect_dropdown li a .text { color: $dropdown-link-color; }
+
+  .info .tag { background-color: $gray-light; }
+
+  .poll_form .progress {
+    background-color: $gray-dark;
+    .bar { background-color: $gray-light; }
+  }
+
+  .stream-element .collapsible {
+    .markdown-content hr { border-top: 1px solid $hr-border; }
+    .expander {
+      @include linear-gradient(transparent, $gray-light, 0%, 95%);
+      border-bottom: 2px solid $gray-light;
+      color: $text-color;
+      text-shadow: 0 0 7px $black;
+    }
+  }
+
+  code,
+  pre {
+    background-color: $gray-dark;
+    border: 1px solid $border-medium-grey;
+    color: $text-color;
+  }
+
+  pre code { border: 0; }
+
+  @import 'highlightjs/darcula';
+
+  #single-post-content .head {
+    #post-info .author { color: lighten($gray-lighter, 27%); }
+    #single-post-actions i.entypo-heart.red:hover { color: $red; }
+  }
+
+  .opengraph a { color: lighten($gray-lighter, 27%); }
+
+  .tag:hover { background-color: desaturate(darken($blue, 35%), 20%); }
+
+  #profile_container .profile_header {
+    #author_info #sharing_message.entypo-check { color: lighten($green, 10%); }
+  }
+
+  #invitationsModal #email_invitation { border-top: 1px dashed $gray-light; }
+
+  #contacts_container #people_stream.contacts .stream-element.in_aspect {
+    background-color: $state-success-bg;
+    border-left: 3px solid darken($state-success-bg, 10%);
+  }
+
+  .left-navbar #tags_list {
+    .as-list {
+      color: $text-color;
+
+      em {
+        background-color: lighten($background-blue, 10%);
+        color: $text-color;
+      }
+    }
+
+    .as-result-item.active { color: $text-color; }
+  }
+
+  #faq .question {
+    background-color: $gray-dark;
+    a.toggle { color: $gray-lighter; }
+    &.collapsed { border: 2px solid $gray-dark; }
+    &.opened {
+      border: 2px solid darken($green, 10%);
+      h4 { background-color: darken($green, 10%); }
+    }
+
+    .answer { background-color: $gray; }
+  }
+
+  #welcome-to-diaspora { background: $orange; }
+
+  .block-form fieldset .form-control:focus { border-color: $input-border; }
+
+  &.page-registrations.action-new,
+  &.page-registrations.action-create {
+    .ball { filter: invert(100%); }
+  }
+
+  .spinner { border-color: $gray-light transparent $gray-light $gray-light; }
+
+  // AutoSuggest CSS
+  ul.as-selections {
+    background-color: $framed-background;
+
+    li.as-selection-item,
+    li.as-selection-item.blur {
+      background-color: $gray-dark;
+      border: 1px solid $gray-darker;
+      box-shadow: 0 1px 1px $gray-darker;
+      color: $text-color;
+      text-shadow: 0 1px 1px $gray-darker;
+    }
+
+    li.as-selection-item a.as-close,
+    li.as-selection-item.blur a.as-close {
+      color: $text-color;
+      text-shadow: 0 1px 1px $gray-darker;
+    }
+
+    li:hover.as-selection-item {
+      background-color: $light-blue;
+      border-color: $brand-primary;
+      color: $white;
+      a.as-close { color: $gray-light; }
+    }
+
+    li.as-selection-item.selected { border-color: $brand-primary; }
+    li.as-selection-item a:hover.as-close { color: $white; }
+    li.as-selection-item a:active.as-close { color: $gray-lighter; }
+  }
+
+  ul.as-list {
+    background-color: $gray-dark;
+    box-shadow: 0 2px 12px $gray-light;
+    color: $text-color;
+  }
+
+  li.as-result-item,
+  li.as-message {
+    border: 1px solid $gray-dark;
+  }
+
+  li.as-result-item.active {
+    background-color: $brand-primary;
+    border-color: $brand-primary;
+    text-shadow: none;
+
+    em { background: darken($brand-primary, 10%); }
+  }
+  // End AutoSuggest CSS
+
+  // Bootstrap Switch CSS
+  .bootstrap-switch {
+    border-color: $border-grey;
+    .bootstrap-switch-label { background: $framed-background; }
+    .bootstrap-switch-handle-on.bootstrap-switch-default,
+    .bootstrap-switch-handle-off.bootstrap-switch-default {
+      background: $gray-dark;
+      color: $text-color;
+    }
+  }
+  // End Bootstrap Switch CSS
+}

app/assets/stylesheets/color_themes/dark/_style.scss

+// Main color(s)
+$white: #fff;
+$black: #000;
+
+$gray-base:    $black;
+$gray-darker:  lighten($gray-base, 6%);
+$gray-dark:    lighten($gray-base, 9.5%);
+$gray:         lighten($gray-base, 13.5%);
+$gray-light:   lighten($gray-base, 28%);
+$gray-lighter: lighten($gray-base, 58%);
+
+$green: #346535;
+$red: #622;
+$blue: #4183c4;
+$yellow: #645a1b;
+$orange: #664100;
+
+$light-blue: lighten($blue, 5%);
+
+$brand-primary: darken($blue, 5%);
+$brand-success: $green;
+$brand-info: darken(adjust-hue($brand-primary, -30), 15%);
+$brand-danger: lighten($red, 10%);
+
+// Bootstrap Variables
+//== Scaffolding
+$body-bg: $gray;
+$text-color: lighten($gray-lighter, 17%);
+$link-color: $blue;
+
+//== Tables
+$table-bg-accent: $gray-dark;
+$table-border-color: $gray-light;
+
+//== Buttons
+$btn-default-color: $gray-lighter;
+$btn-default-bg: $gray-light;
+$btn-default-border: $gray-darker;
+
+$btn-success-color: $white;
+
+//== Forms
+$input-bg: $gray-dark;
+
+$input-color: $text-color;
+$input-border: $gray-light;
+$input-border-focus: $brand-primary;
+
+$input-color-placeholder: lighten($gray-light, 7%);
+
+$legend-color: $text-color;
+$legend-border-color: $gray-light;
+
+//== Dropdowns
+$dropdown-bg: lighten($gray-base, 15%);
+$dropdown-divider-bg: $gray-darker;
+$dropdown-link-color: $text-color;
+$dropdown-link-hover-color: $dropdown-link-color;
+
+//== Navbar
+$navbar-inverse-bg: $gray-darker;
+$navbar-inverse-link-hover-color: $text-color;
+$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;
+
+//== Tabs
+$nav-tabs-active-link-hover-bg: $gray;
+$nav-tabs-active-link-hover-border-color: $gray-darker;
+
+//== Navs
+$nav-link-hover-bg: $gray-darker;
+
+//== Pagination
+$pagination-color: $light-blue;
+$pagination-bg: $gray-light;
+$pagination-border: $gray-darker;
+
+$pagination-hover-color: $gray-dark;
+$pagination-hover-bg: $light-blue;
+$pagination-hover-border: $pagination-border;
+
+$pagination-active-border: $pagination-border;
+
+$pagination-disabled-color: $gray-dark;
+$pagination-disabled-bg: $gray-light;
+$pagination-disabled-border: $pagination-border;
+
+//== Form states and alerts
+$state-success-text: lighten($green, 30%);
+$state-success-bg: darken($green, 10%);
+$state-success-border: darken($state-success-bg, 20%);
+
+$state-info-text: lighten($blue, 20%);
+$state-info-bg: darken($blue, 20%);
+$state-info-border: darken($state-info-bg, 20%);
+
+$state-warning-text: lighten($yellow, 30%);
+$state-warning-bg: $yellow;
+$state-warning-border: darken($state-warning-bg, 20%);
+
+$state-danger-text: lighten($red, 40%);
+$state-danger-bg: $red;
+$state-danger-border: darken($state-danger-bg, 20%);
+
+
+//== Popovers
+$popover-bg: lighten($gray, 5%);
+$popover-border-color: $gray-darker;
+
+//== Modals
+$modal-content-bg: $gray;
+$modal-header-border-color: $gray-light;
+
+//== List group
+$list-group-bg: $gray;
+$list-group-link-color: $text-color;
+
+//== Panels
+$panel-bg: $gray;
+$panel-default-text: $text-color;
+$panel-default-border: $gray-darker;
+$panel-default-heading-bg: $gray-dark;
+
+//== Thumbnails
+$thumbnail-border: $gray-darker;
+
+//== Wells
+$well-bg: $gray-dark;
+
+//== Close
+$close-color: $gray-lighter;
+
+//== Type
+$hr-border: $gray-light;
+
+// Variables
+$text-color-pale: $gray-light;
+$text-color-active: lighten($gray-lighter, 27%);
+
+$background-grey: $gray-dark;
+$background-blue: desaturate(darken($blue, 25%), 15%);
+
+$border-grey: $gray-darker;
+$border-medium-grey: $gray-light;
+$border-dark-grey: darken($border-grey, 4.5%);
+
+$icon-color: $text-color;
+
+$main-background: $gray-dark;
+$framed-background: $gray;
+$left-navbar-drawer-background: $main-background;
+$hovercard-background: $gray;
+
+@import 'color_themes/color_theme_override_dark';

app/assets/stylesheets/color_themes/dark/desktop.scss

+@import 'mixins';
+@import 'color_themes/dark/style';
+@import 'application';

app/assets/stylesheets/color_themes/dark/mobile.scss

+@import 'mixins';
+@import 'color_themes/dark/style';
+
+// Only overriding existing selectors here, so disable some lint rules
+// scss-lint:disable SelectorFormat, NestingDepth, SelectorDepth
+body {
+  .settings-container,
+  .stream-element,
+  .login-form {
+    border: 1px solid $border-grey;
+  }
+
+  .stream-element,
+  .comments {
+    .from a { color: $text-color; }
+    .info { color: lighten($gray-light, 12%); }
+    .nsfw-shield { background-color: $gray-light; }
+
+    .bottom-bar {
+      background: lighten($framed-background, 4.5%);
+      .post-action .disabled { color: $text-color-pale; }
+      .post-stats .count { background-color: lighten($framed-background, 4.5%); }
+    }
+
+    .reshare {
+      border-bottom: 1px solid $border-medium-grey;
+      .reshare_via span { color: $border-medium-grey; }
+    }
+  }
+
+  .more-link,
+  .no-more-posts {
+    background: { color: $btn-default-bg; }
+    border: 1px solid $gray;
+
+    h1,
+    h2 {
+      color: $text-color;
+      text-shadow: 0 2px 0 $gray;
+    }
+  }
+
+  .stream-element.unread { background-color: $gray; }
+  .stream-element.read { background-color: $gray-darker; }
+
+  .header-full-width { border-bottom: 1px solid $border-grey; }
+
+  .user_aspects {
+    &,
+    &:focus,
+    &:active {
+      border-color: $gray-light;
+    }
+
+    &.has_connection {
+      background-color: $green;
+      color: $white;
+    }
+  }
+}
+// scss-lint:enable IdSelector, SelectorFormat, NestingDepth, SelectorDepth
+
+@import 'mobile/mobile';

config/color_themes.yml

 available:
-  original: "Original Dark"
+  original: "Original Gray"
   original_white: "Original White Background"
   dark_green: "Dark Green"
   magenta: "Magenta"
   egyptian_blue: "Egyptian Blue"
+  dark: "Dark"

config/initializers/color_themes.rb

@@ -10,10 +10,10 @@ if color_themes_file.exist?
     if color_themes["available"].length > 0
       color_themes["available"]
     else
-      {"original" => "Original Dark"}
+      {"original" => "Original Gray"}
     end
 else
-  AVAILABLE_COLOR_THEMES = {"original" => "Original Dark"}
+  AVAILABLE_COLOR_THEMES = {"original" => "Original Gray"}.freeze
 end
 # Get all codes from available themes into a separate variable, so that they can be called easier.
 AVAILABLE_COLOR_THEME_CODES = AVAILABLE_COLOR_THEMES.keys