Make nav bar black in dark mode

master
Max 5 years ago
parent f89cd0ad7f
commit 562664ec5f

@ -70,6 +70,7 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
// import logo from 'src/assets/gv-new-logo.svg'; // import logo from 'src/assets/gv-new-logo.svg';
import logo from '!!raw-loader!./gv-new-logo-white.svg'; import logo from '!!raw-loader!./gv-new-logo-white.svg';
import logo_green from '!!raw-loader!./gv-new-logo.svg';
const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} }; const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@ -162,6 +163,8 @@ const appRoutes: Routes = [
export class AppModule { export class AppModule {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIconLiteral( iconRegistry.addSvgIconLiteral(
'logo', sanitizer.bypassSecurityTrustHtml(logo)); 'logo', sanitizer.bypassSecurityTrustHtml(logo));
iconRegistry.addSvgIconLiteral(
'logo_green', sanitizer.bypassSecurityTrustHtml(logo_green));
} }
} }

@ -5,7 +5,7 @@
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
<h1 class="mat-display-3">Keep it clean and green!</h1> <h1 class="mat-display-3">Keep it clean and green!</h1>
<button mat-icon-button> <button mat-icon-button>
<mat-icon class="big-icon">keyboard_arrow_down</mat-icon> <mat-icon class="big-icon" color="primary">keyboard_arrow_down</mat-icon>
</button> </button>
</div> </div>
<div id="text1" style="text-align: center;"> <div id="text1" style="text-align: center;">
@ -65,8 +65,8 @@
<div id="text2" style="text-align: center;"> <div id="text2" style="text-align: center;">
<p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p> <p class="mat-display-1">We believe, that together we can do amazing things to protect our environment and keep it clean and green.</p>
<p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p> <p class="mat-display-1">You aren't part of greenvironment yet? - join us now!</p>
<a mat-raised-button class="link-button" routerLink="/register" >Register</a> <a mat-stroked-button color="primary" class="link-button" routerLink="/register" >Register</a>
<br> <br>
<a mat-raised-button class="link-button" routerLink="/login">Login</a> <a mat-stroked-button color="primary" class="link-button" routerLink="/login">Login</a>
</div> </div>
</div> </div>

@ -11,7 +11,6 @@
padding: 2em padding: 2em
max-width: 100% max-width: 100%
min-height: 50% min-height: 50%
background-color: mat-color($primary)
#text1 #text1
padding: 2em padding: 2em

@ -12,6 +12,8 @@ $mat-card-header-size: 40px !default
margin-top: 10px margin-top: 10px
.mat-card-subtitle .mat-card-subtitle
display: contents display: contents
.mat-card-content
overflow: auto
a:hover a:hover
cursor: pointer cursor: pointer
#button-box #button-box

@ -1,4 +1,4 @@
<mat-toolbar color="primary">Imprint</mat-toolbar> <mat-toolbar>Imprint</mat-toolbar>
<div id="imprint"> <div id="imprint">
<p>The greenvironment network is being developed by the greenvironment team</p> <p>The greenvironment network is being developed by the greenvironment team</p>
<h2>Contact</h2> <h2>Contact</h2>

@ -7,8 +7,8 @@
fxShow="true" fxHide.gt-sm="true" fxShow="true" fxHide.gt-sm="true"
fixedInViewport="false" fixedInViewport="false"
autoFocus="false"> autoFocus="false">
<mat-toolbar *ngIf="!loggedIn">Menu</mat-toolbar> <mat-toolbar class="menu-bar" *ngIf="!loggedIn">Menu</mat-toolbar>
<mat-toolbar *ngIf="loggedIn" id="name-bar"> <mat-toolbar *ngIf="loggedIn" class="menu-bar">
<div mat-card-avatar> <div mat-card-avatar>
<img class="profile-picture" [src]="user.profilePicture"/> <img class="profile-picture" [src]="user.profilePicture"/>
</div> </div>
@ -32,7 +32,7 @@
<!-- TOOLBAR --> <!-- TOOLBAR -->
<mat-sidenav-content> <mat-sidenav-content>
<mat-toolbar color="primary" class="mat-elevation-z4"> <mat-toolbar color="accent" class="mat-elevation-z4">
<!--content on SMALL SCREEN--> <!--content on SMALL SCREEN-->
<button <button
@ -43,9 +43,10 @@
fxShow="true" fxHide.gt-sm="true"> fxShow="true" fxHide.gt-sm="true">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon> <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button> </button>
<mat-icon svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon> <mat-icon *ngIf="lighttheme" svgIcon="logo" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<mat-icon *ngIf="!lighttheme" svgIcon="logo_green" style="min-width: 35px;" routerLink="" class="link"></mat-icon>
<span routerLink="" class="link">Greenvironment</span> <span routerLink="" class="link">Greenvironment</span>
<nav mat-tab-nav-bar backgroundColor="primary" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla=""> <nav mat-tab-nav-bar backgroundColor="accent" color="accent" fxShow="true" fxHide.lt-md="true" routerLinkActive #rla="">
<div *ngIf="loggedIn"> <div *ngIf="loggedIn">
<a mat-tab-link class="link" <a mat-tab-link class="link"
*ngFor="let link of navLinksLoggedIn" *ngFor="let link of navLinksLoggedIn"

@ -4,8 +4,8 @@
.sidenav .sidenav
width: 200px width: 200px
#name-bar .menu-bar
padding: 0 4px position: inherit !important
.mat-card-avatar .mat-card-avatar
display: contents display: contents
.profile-picture .profile-picture
@ -28,7 +28,7 @@
.sidenav .mat-toolbar .sidenav .mat-toolbar
//background: inherit //background: inherit
.mat-toolbar.mat-primary .mat-toolbar
height: 56px height: 56px
position: fixed position: fixed
//position: sticky //position: sticky
@ -41,6 +41,7 @@
.mat-tab-link .mat-tab-link
height: 56px height: 56px
.mat-sidenav-content .mat-sidenav-content
padding-top: 56px padding-top: 56px

@ -0,0 +1,141 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64px"
height="64px"
viewBox="0 0 64 64"
version="1.1"
id="SVGRoot"
inkscape:version="0.92.4 5da689c313, 2019-01-14"
sodipodi:docname="gv-new-logo.svg">
<defs
id="defs3412">
<linearGradient
id="linearGradient4054"
inkscape:collect="always">
<stop
id="stop4050"
offset="0"
style="stop-color:#00c088;stop-opacity:1" />
<stop
id="stop4052"
offset="1"
style="stop-color:#08ff21;stop-opacity:0.97468352" />
</linearGradient>
<linearGradient
id="linearGradient4048"
inkscape:collect="always">
<stop
id="stop4044"
offset="0"
style="stop-color:#00c088;stop-opacity:1" />
<stop
id="stop4046"
offset="1"
style="stop-color:#08ff21;stop-opacity:0.97468352" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4005">
<stop
style="stop-color:#00c088;stop-opacity:1"
offset="0"
id="stop4001" />
<stop
style="stop-color:#08ff21;stop-opacity:0.95358652"
offset="1"
id="stop4003" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4054"
id="linearGradient4007"
x1="13.48775"
y1="12.73616"
x2="52.052452"
y2="47.384392"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4048"
id="linearGradient4017"
x1="14.551315"
y1="10.077048"
x2="51.051678"
y2="51.531181"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient4005"
id="linearGradient4025"
x1="13.637479"
y1="15.156103"
x2="52.776852"
y2="46.975906"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="-4.045925"
inkscape:cy="41.653992"
inkscape:document-units="px"
inkscape:current-layer="layer2"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1003"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:grid-bbox="true" />
<metadata
id="metadata3415">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
style="display:inline">
<path
style="fill:none;stroke:url(#linearGradient4007);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 59.638425,10.982918 c -2.598034,1.65974 -5.164767,1.536797 -6.79245,1.598268 -1.627684,0.06147 -7.89147,-0.248912 -10.548644,-0.307359 -2.031158,-0.04467 -10.408921,-0.634292 -18.029729,3.227272 -6.189793,3.136452 -10.030686,7.78418 -11.299883,11.09567 -1.095556,2.858442 -1.721588,5.317315 -1.095556,9.896969 0.334798,2.449172 0.916715,4.631314 0.829032,5.615672 -0.07744,0.869314 0.04741,1.638006 -2.331509,4.035408 -2.3789231,2.397403 -7.5630585,6.702992 -7.5630585,6.702992"
id="path3986"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csssssssc" />
<path
style="fill:none;stroke:url(#linearGradient4017);stroke-width:2.81999993;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 17.040936,45.75125 c 0,0 5.71124,1.10058 9.863991,0.923511 4.152753,-0.177069 10.503177,-1.963537 14.640251,-4.074381 2.654809,-1.354554 8.010685,-4.452479 10.623857,-9.671077 1.545586,-3.086589 2.392221,-6.933871 2.615983,-8.836099 0.374688,-3.185266 0.215574,-5.492636 0.858958,-6.968217"
id="path3988"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:none;stroke:url(#linearGradient4025);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 16.515165,41.68934 c 0,0 3.942744,-4.483925 8.75,-9 3.732038,-3.505984 5.757466,-5.519577 10.967068,-8.580806 3.85598,-2.265823 12.426015,-6.277728 15.87316,-7.736136"
id="path3990"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.2 KiB

@ -1,50 +1,50 @@
@import '~@angular/material/theming'; @import '~@angular/material/theming';
// Plus imports for other components in your app. // Plus imports for other components in your app.
$mat-black: (
// Include the common styles for Angular Material. We include this here so that you only 50 : #e4e4e4,
// have to load a single css file for Angular Material in your app. 100 : #bcbcbc,
// Be sure that you only ever include this mixin once! 200 : #909090,
@include mat-core(); 300 : #646464,
400 : #424242,
$md-gvgreen: ( 500 : #212121,
50 : #e0f7e7, 600 : #1d1d1d,
100 : #b3ebc3, 700 : #181818,
200 : #80de9c, 800 : #141414,
300 : #4dd174, 900 : #0b0b0b,
400 : #26c756, A100 : #e76c6c,
500 : #00bd38, A200 : #e04040,
600 : #00b732, A400 : #ec0000,
700 : #00ae2b, A700 : #d30000,
800 : #00a624,
900 : #009817,
A100 : #c3ffc9,
A200 : #90ff9a,
A400 : #5dff6b,
A700 : #44ff54,
contrast: ( contrast: (
50 : #000000, 50 : #000000,
100 : #000000, 100 : #000000,
200 : #000000, 200 : #000000,
300 : #000000, 300 : #ffffff,
400 : #000000, 400 : #ffffff,
500 : #ffffff, 500 : #ffffff,
600 : #ffffff, 600 : #ffffff,
700 : #ffffff, 700 : #ffffff,
800 : #ffffff, 800 : #ffffff,
900 : #ffffff, 900 : #ffffff,
A100 : #000000, A100 : #000000,
A200 : #000000, A200 : #ffffff,
A400 : #000000, A400 : #ffffff,
A700 : #000000, A700 : #ffffff,
) )
); );
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss // Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$primary: mat-palette($mat-light-green); $primary: mat-palette($mat-light-green);
$primary-color: mat-color($primary); $primary-color: mat-color($primary);
$accent: mat-palette($mat-brown, A200, A100, A400); $accent: mat-palette($mat-light-green);
// The warn palette is optional (defaults to red). // The warn palette is optional (defaults to red).
$warn: mat-palette($mat-red); $warn: mat-palette($mat-red);
@ -61,7 +61,7 @@ $light-theme: map_merge($light-theme, (background: $background));
$dark-primary: mat-palette($mat-light-green); $dark-primary: mat-palette($mat-light-green);
$dark-accent: mat-palette($mat-brown, A200, A100, A400); $dark-accent: mat-palette($mat-black);
$dark-warn: mat-palette($mat-red); $dark-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes). // Create the theme object (a Sass map containing all of the palettes).

Loading…
Cancel
Save