Skip to content
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

Jump to bottom

Ability to swap to Darkmode #158

Merged
merged 12 commits into from
Apr 11, 2022
Merged

Ability to swap to Darkmode #158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
87f6540
init
ueberschaersilas-hg Feb 21, 2022
584093e
Merge branch 'next_minor' of https://github.com/HermesGermany/galapag…
ueberschaersilas-hg Feb 28, 2022
583d233
change text-white to stay white
ueberschaersilas-hg Feb 28, 2022
04f426f
Merge branch 'next_minor' of https://github.com/HermesGermany/galapag…
ueberschaersilas-hg Feb 28, 2022
25a3e07
Add Ability to swap to darkmode
ueberschaersilas-hg Mar 1, 2022
c76ea4b
Delete darkmode variable
ueberschaersilas-hg Mar 1, 2022
6562fdd
Merge remote-tracking branch 'upstream/next_minor' into feature_256
ueberschaersilas-hg Mar 21, 2022
ea9a121
Fix Eslint Problems
ueberschaersilas-hg Mar 21, 2022
e7672af
Merge branch 'next_minor' of https://github.com/HermesGermany/galapag…
ueberschaersilas-hg Apr 11, 2022
cf5892d
Detect user color settings
ueberschaersilas-hg Apr 11, 2022
f060151
format scss code
ueberschaersilas-hg Apr 11, 2022
348e901
remove empty lines
ueberschaersilas-hg Apr 11, 2022
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
8 changes: 8 additions & 0 deletions ui/src/app/layout/components/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,14 @@
<a class="dropdown-item" href="#" (click)="onLoggedout()">
<i class="fa fa-fw fa-power-off"></i> {{ 'Log Out' | translate }}
</a>
<a class="dropdown-item" type="button" (click)="darkmodeButton()">
<div *ngIf="!darkmodeActive">
<i class="fa fa-fw fa-moon"></i> {{ 'Darkmode' | translate }}
</div>
<div *ngIf="darkmodeActive">
<i class="fa fa-fw fa-sun"></i> {{ 'Lightmode' | translate }}
</div>
</a>
</div>
</li>
</ul>
Expand Down
28 changes: 28 additions & 0 deletions ui/src/app/layout/components/header/header.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export class HeaderComponent implements OnInit {

authenticationMode: Observable<string>;

darkmodeActive: boolean;

constructor(private translate: TranslateService, public router: Router, private keycloak: KeycloakService,
private environments: EnvironmentsService) {

Expand All @@ -45,6 +47,14 @@ export class HeaderComponent implements OnInit {
}
});

if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches &&
localStorage.getItem('galapagos.darkmode') === null) {
this.changeDarkmode(false);
} else {
this.changeDarkmode(localStorage.getItem('galapagos.darkmode') !== 'true');
}

Copy link
Member

Choose a reason for hiding this comment

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

Remove additional empty lines

this.currentEnvironmentName = this.environments.getCurrentEnvironment().pipe(map(env => env.name));
this.currentEnvironmentIcon = this.environments.getCurrentEnvironment().pipe(
map(env => env.production ? 'fas fa-exclamation-triangle text-danger' : 'fas fa-database'));
Expand Down Expand Up @@ -75,4 +85,22 @@ export class HeaderComponent implements OnInit {
selectEnvironment(env: KafkaEnvironment) {
this.environments.setCurrentEnvironment(env);
}

darkmodeButton(): void {
this.changeDarkmode(localStorage.getItem('galapagos.darkmode') === 'true');
}

changeDarkmode(darkmode: boolean): void {
if (darkmode) {
document.documentElement.classList.remove('dark');
localStorage.setItem('galapagos.darkmode', 'false');
this.darkmodeActive = false;
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('galapagos.darkmode', 'true');
this.darkmodeActive = true;
}
albrechtflo-hg marked this conversation as resolved.
Show resolved Hide resolved
}


}
149 changes: 148 additions & 1 deletion ui/src/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,158 @@
/* You can add global styles to this file, and also import other style files */

@import "bootstrap/bootstrap";
@import "spinner";
@import "utils";
@import "rtl";
@import "responsive";

.dark {
$white: #121212 !default;
$gray-100: #212529 !default;
$gray-200: #343a40 !default;
$gray-300: #495057 !default;
$gray-400: #6c757d !default;
$gray-500: #adb5bd !default;
$gray-600: #ced4da !default;
$gray-700: #dee2e6 !default;
$gray-800: #e9ecef !default;
$gray-900: #f8f9fa !default;
$black: #ffffff !default;
$hermes: #adadad !default;
$lastChanges: #121212 !default;
$green: #155622 !default;
$topicSettings: #121212 !default;
$defaultInputValue: #E0F8E0 !default;
@import "bootstrap/bootstrap";
}

.dark .spinner > div {
background-color: white
}

.dark .text-white {
color: white !important;
}

.dark .bg-hermes-deprecation {
color: white !important;
}

input[name="eolDate"] {
background: black !important;

}

.dark .dropdown-menu {
background-color: black;
}

.dark .ngb-dp-header {
background-color: black;
}

.dark .ngb-dp-week {
background-color: black;
}

.dark .btn-light {
background-color: black;
color: white;
}

.dark .btn-light:hover {
color: #007BFFFF;
}

.dark .bg-secondary,
.dark .bg-hermes-deprecation,
.dark .bg-danger,
.dark .bg-warning,
.dark .bg-success {
background-color: rgba(255, 255, 255, 0.03) !important;
}

.dark .btn-warning,
.dark .btn-danger,
.dark .btn-success {
color: white;
background-color: rgba(255, 255, 255, 0.03);
border: solid 1px white;
}

.dark .btn-warning:hover,
.dark .btn-warning:focus,
.dark .btn-warning:active,
.dark .btn-danger:hover,
.dark .btn-danger:focus,
.dark .btn-danger:active,
.dark .btn-success:hover,
.dark .btn-success:focus,
.dark .btn-success:active {
color: white;
background-color: rgba(255, 255, 255, 0.1);
border: solid 1px white;
}

.dark .btn-success:not(:disabled):not(.disabled):active,
.dark .btn-success:not(:disabled):not(.disabled).active,
.dark .btn-warning:not(:disabled):not(.disabled).active,
.dark .btn-warning:not(:disabled):not(.disabled):active,
.dark .btn-warning:focus,
.dark .btn-danger:not(:disabled):not(.disabled).active,
.dark .btn-danger:not(:disabled):not(.disabled):active,
.dark .btn-danger:focus,
.dark .btn-success:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5) !important;
color: #a2a2a2 !important;
border-color: white;
background-color: rgba(255, 255, 255, 0.12) !important;

}

.dark .btn-warning:disabled,
.dark .btn-danger:disabled,
.dark .btn-success:disabled {
background-color: rgba(255, 255, 255, 0.12);
border-color: black;
color: rgba(255, 255, 255, 0.3);
}

.dark .badge-danger,
.dark .badge-success,
.dark .badge-warning {
color: white;
}

.dark .badge-warning {
background-color: #a07800;
}

.dark .sidebar {
background-color: black !important;
}


.dark .list-group-item {
background-color: black !important;
color: white !important;
}

.dark .router-link-active {
background-color: #343434 !important;
}

.dark .list-group-item:hover {
background-color: #262626 !important;
}

.dark .toggle-button {
background-color: black !important;
color: white !important;
border-color: #262626;
}

@import "bootstrap/bootstrap";

@media print {
.breadcrumb {
display: none !important;
Expand Down