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

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