Commit 08282cea authored by Benjamin Neff's avatar Benjamin Neff Committed by Dennis Schubert

Add dark theme

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

closes #7152
parent 1c81c1e3
......@@ -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
......
// 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
}
// 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';
@import 'mixins';
@import 'color_themes/dark/style';
@import 'application';
@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';
available:
original: "Original Dark"
original: "Original Gray"
original_white: "Original White Background"
dark_green: "Dark Green"
magenta: "Magenta"
egyptian_blue: "Egyptian Blue"
dark: "Dark"
......@@ -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
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