Skip to content

🕶 Dark theme fixes #13648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jancborchardt merged 13 commits into from
Jan 22, 2019
Merged

🕶 Dark theme fixes #13648

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
db1f104
Dark theme: Fix select triangle not being visible
jancborchardt Jan 15, 2019
dd3ed98
Dark theme: Fix select2 icons
jancborchardt Jan 16, 2019
a081096
Fix password change toggle position and visibility in dark theme
jancborchardt Jan 16, 2019
6bc8b78
Fix federated cloud icon sizing and dark theme compatibility
jancborchardt Jan 16, 2019
f25fc2e
Dark theme: Fix app management icons and other elements
jancborchardt Jan 17, 2019
a47784e
Dark theme: Fix icons in 'More apps' menu
jancborchardt Jan 17, 2019
5e497ed
Dark theme: Fix Contacts menu icons
jancborchardt Jan 17, 2019
092589f
Dark theme: Fix 'More apps' icon
jancborchardt Jan 17, 2019
e5922c6
Dark theme: Fix search field
jancborchardt Jan 17, 2019
4c18cc3
Dark theme: Fix move/copy dialog icons
jancborchardt Jan 17, 2019
c42b721
Dark theme: Prevent slideshow icons from going dark
jancborchardt Jan 17, 2019
0b201ec
Remove code fixed by @nickvergessen in #13652
jancborchardt Jan 21, 2019
b8827ce
Add CSS to dark theme so activity icons show in stream, ref nextcloud…
jancborchardt Jan 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 27 additions & 4 deletions apps/accessibility/css/themedark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,34 @@ $color-border-dark: lighten($color-main-background, 14%);

#app-navigation > ul > li > a:first-child,
#app-navigation > ul > li > ul > li > a:first-child,
#expanddiv a {
#contactsmenu-menu a,
#expanddiv a,
.activity-section .activity-icon.monochrome {
img {
filter: invert(100%);
}
}

#navigation #apps li a,
#body-settings #content.app-settings .app-image-icon,
#body-settings #content.app-settings #app-sidebar #app-details-view h2 {
svg {
filter: invert(100%);
Copy link
Member

@juliusknorr juliusknorr Jan 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't work with IE11, but I would be fine with just not supporting the dark mode for that one.

Copy link
Member

@juliusknorr juliusknorr Jan 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or we use something like https://github.com/shekhardesigner/InvertImages

Copy link
Member Author

@jancborchardt jancborchardt Jan 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it's something for a separate pull request too then though? :)

Copy link
Member

@nickvergessen nickvergessen Jan 22, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this invert(100%) is used a lot of times already make it a new PR, yes

}
}

// Otherwise icon-more gets inverted via function
#appmenu .icon-more-white {
filter: invert(100%);
}

// since svg icons are inverted, revert to white for the header
.header-right > * {
[class^='icon-'], [class*=' icon-'] {
filter: invert(100%);
}
}

.bubble,
.app-navigation-entry-menu,
.popovermenu {
Expand All @@ -44,9 +67,9 @@ $color-border-dark: lighten($color-main-background, 14%);
border: 1px solid var(--color-border);
}

// since svg icons are inverted, revert to white for the header
.header-right > * {
[class^='icon-'], [class*=' icon-'] {
// Prevent slideshow icons from going dark
#slideshow {
[class^='icon-'], [class*=' icon-']{
filter: invert(100%);
}
}
2 changes: 1 addition & 1 deletion apps/accessibility/js/accessibility.js.map
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 9 additions & 4 deletions apps/accessibility/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 ...deratedfilesharing/css/settings-admin.css → ...eratedfilesharing/css/settings-admin.scss
View file
Open in desktop
File renamed without changes.
17 changes: 7 additions & 10 deletions ...atedfilesharing/css/settings-personal.css → ...tedfilesharing/css/settings-personal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,22 @@

[class^="social-"], [class*=" social-"] {
background-repeat: no-repeat;
background-position: 2px;
background-position: 8px;
min-width: 16px;
min-height: 16px;
padding-left: 29px;
background-size: 24px;
padding-left: 28px;
background-size: 16px;
}

.social-gnu {
background-image: url('../img/social-gnu.svg');
}
.social-diaspora {
background-image: url('../img/social-diaspora.svg');
@include icon-color('social-diaspora', 'federatedfilesharing', $color-black);
}
.social-twitter {
background-image: url('../img/social-twitter.svg');
@include icon-color('social-twitter', 'federatedfilesharing', $color-black);
}
.social-facebook {
background-image: url('../img/social-facebook.svg');
@include icon-color('social-facebook', 'federatedfilesharing', $color-black);
}
.social-googleplus {
background-image: url('../img/social-googleplus.svg');
@include icon-color('social-googleplus', 'federatedfilesharing', $color-black);
}
2 changes: 1 addition & 1 deletion apps/federatedfilesharing/img/social-googleplus.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions core/css/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -694,8 +694,8 @@ nav[role='navigation'] {
color: var(--color-primary-text);
width: 155px;
cursor: text;
background-color: var(--color-primary) !important;
border: 1px solid var(--color-primary-text-dark) !important;
background-color: transparent !important;
border: 1px solid var(--color-border) !important;
}
&:hover, &:focus, &:active {
opacity: 1;
Expand Down
12 changes: 6 additions & 6 deletions core/css/inputs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,7 +230,7 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
background: var(--icon-triangle-s-000) no-repeat right 4px center;
background-color: inherit;
outline: 0;
padding-right: 24px !important;
Expand Down Expand Up @@ -431,7 +431,7 @@ div.select2-drop {
}
.select2-search input {
min-height: auto;
background: url('../img/actions/search.svg') no-repeat right center !important;
background: var(--icon-search-000) no-repeat right center !important;
background-origin: content-box !important;
}
.select2-results {
Expand Down Expand Up @@ -554,7 +554,7 @@ div.select2-container {
border-radius: 0;
border: none;
b {
background: url('../img/actions/triangle-s.svg') no-repeat center !important;
background: var(--icon-triangle-s-000) no-repeat center !important;
opacity: .5;
}
}
Expand Down Expand Up @@ -619,7 +619,7 @@ div.select2-container {
color: inherit !important;
&::before {
content: ' ';
background-image: url('../img/actions/checkmark.svg?v=1');
background-image: var(--icon-checkmark-000);
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
Expand Down Expand Up @@ -809,7 +809,7 @@ div.select2-container {
/* selected checkmark icon */
&::before {
content: ' ';
background-image: url('../img/actions/checkmark.svg?v=1');
background-image: var(--icon-checkmark-000);
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
Expand All @@ -828,7 +828,7 @@ div.select2-container {
*/
&[data-select='create'] {
&::before {
background-image: url('../img/actions/add.svg?v=1');
background-image: var(--icon-add-000);
visibility: visible;
}
}
Expand Down
2 changes: 1 addition & 1 deletion core/css/jquery.ocdialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
top: 0;
right: 0;
padding: 25px;
background: url('../img/actions/close.svg') no-repeat center;
background: var(--icon-close-000) no-repeat center;
opacity: .5;

&:hover,
Expand Down
21 changes: 11 additions & 10 deletions core/css/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,7 +290,7 @@ label.infield {
position: absolute !important;
height: 20px;
width: 24px;
background-image: url('../img/actions/toggle.svg?v=1');
background-image: var(--icon-toggle-000);
background-repeat: no-repeat;
background-position: center;
opacity: .3;
Expand All @@ -312,8 +312,9 @@ label.infield {
#personal-show + label {
display: block;
right: 0;
margin-top: -36px;
padding: 6px 4px;
margin-top: -41px;
margin-right: -6px;
padding: 22px;
}

/* Warnings and errors are the same */
Expand Down Expand Up @@ -707,7 +708,7 @@ code {
box-sizing: border-box;

div:first-child a {
background-image: url('../img/places/home.svg?v=1');
background-image: var(--icon-home-000);
background-repeat: no-repeat;
background-position: left center;
}
Expand Down Expand Up @@ -741,11 +742,12 @@ code {
opacity: 1;
}
}

// keyboard focus
#picker-showgridview:focus + #picker-view-toggle {
opacity: 1;
}

.actions.creatable {
flex-wrap: wrap;
padding: 0px;
Expand All @@ -759,14 +761,13 @@ code {
border-radius: var(--border-radius-pill);
position: absolute;
top: 4px;

.icon.icon-add{
background-image: var(--icon-add-000);
background-size: 16px 16px;
max-height:36px;
width:36px;
margin:0px;

max-height: 36px;
width: 36px;
margin: 0px;
}

a {
Expand Down
14 changes: 9 additions & 5 deletions settings/css/settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -739,23 +739,27 @@ span.usersLastLoginTooltip {
&.appwarning:hover {
background: #fbb;
}
.app-external, .app-version {
color: rgba(85, 85, 85, 0.5);
.app-external {
color: var(--color-text-maxcontrast);
}
}

span.version {
margin-left: 1em;
margin-right: 1em;
color: #555;
color: var(--color-text-maxcontrast);
}

.app-version {
color: var(--color-text-maxcontrast);
}

.app-level {
margin-top: 8px;
span {
color: #555;
color: var(--color-text-maxcontrast);
background-color: transparent;
border: 1px solid #555;
border: 1px solid var(--color-text-maxcontrast);
border-radius: var(--border-radius);
padding: 3px 6px;
}
Expand Down