Add dark theme
Also renamed "Original Dark" to "Original Gray", because it isn't "dark". closes #7152
This commit is contained in:
Benjamin Neff
Dennis Schubert
parent
1c81c1e3ec
commit
08282cea01
7 changed files with 394 additions and 3 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
// 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
|
||||
}
|
||||
153
app/assets/stylesheets/color_themes/dark/_style.scss
Normal file
153
app/assets/stylesheets/color_themes/dark/_style.scss
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
// 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';
|
||||
3
app/assets/stylesheets/color_themes/dark/desktop.scss
Normal file
3
app/assets/stylesheets/color_themes/dark/desktop.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'mixins';
|
||||
@import 'color_themes/dark/style';
|
||||
@import 'application';
|
||||
63
app/assets/stylesheets/color_themes/dark/mobile.scss
Normal file
63
app/assets/stylesheets/color_themes/dark/mobile.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@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';
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue