Skip to content

Commit

Permalink
dark mode and top bar
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-kuruvilla committed Dec 10, 2023
1 parent b82c4c3 commit 1cb69f0
Show file tree
Hide file tree
Showing 10 changed files with 206 additions and 22 deletions.
12 changes: 8 additions & 4 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"outputPath": "dist/your-angular-app",
"index": "src/index.html",
"main": "src/main.ts",
"baseHref": "/angular-app/",
"baseHref": "/angular-app/",
"polyfills": [
"zone.js"
],
Expand All @@ -29,7 +29,9 @@
"src/custom-theme.scss",
"src/styles.css"
],
"scripts": []
"scripts": [
"./node_modules/angular-dark-mode/angular-dark-mode.js"
]
},
"configurations": {
"production": {
Expand Down Expand Up @@ -91,10 +93,12 @@
"styles": [
"src/styles.css"
],
"scripts": []
"scripts": [
"./node_modules/angular-dark-mode/angular-dark-mode.js"
]
}
}
}
}
}
}
}
13 changes: 13 additions & 0 deletions package-lock.json

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

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@angular/platform-browser": "^16.1.0",
"@angular/platform-browser-dynamic": "^16.1.0",
"@angular/router": "^16.1.0",
"angular-dark-mode": "^3.1.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
Expand All @@ -38,4 +39,4 @@
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}
}
}
4 changes: 4 additions & 0 deletions src/app/app.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.card {
color: inherit;
background-color: inherit;
}
4 changes: 3 additions & 1 deletion src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
<app-layout></app-layout>
<div class="">This is the dummy text for testing sdfsfs</div>
<div class="">This is the dummy text for testing sdfsfs</div>

<div class="card"> dfsfsdf</div>
6 changes: 5 additions & 1 deletion src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { TopbarComponent } from './layout/topbar/topbar.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';

@NgModule({
declarations: [
Expand All @@ -22,7 +24,9 @@ import { MatButtonModule } from '@angular/material/button';
BrowserAnimationsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule
MatButtonModule,
MatSlideToggleModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
Expand Down
77 changes: 77 additions & 0 deletions src/app/layout/topbar/topbar.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,81 @@

.example-spacer {
flex: 1 1 auto;
}

/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}

/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* background-color); */
-webkit-transition: .4s;
transition: .4s;
border: 2px solid white;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked+.slider {
background-color: #74bffd;
/* border: 1px solid rgba(0, 0, 0, 0.452); */
}

input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
/* -webkit-transform: translateX(26px); */
/* -ms-transform: translateX(26px); */
transform: translateX(26px);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-radius: 50px;
height: 75%;
background-color: yellow;
box-shadow: rgba(0, 0, 0, 0.604) 0.5px 1px 20px 1px;
margin-right: 20px;
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;

}

.slider.round:before {
width: 43%;
height: 43%;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
transform: rotateZ(-135deg);
}
61 changes: 48 additions & 13 deletions src/app/layout/topbar/topbar.component.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,48 @@
<mat-toolbar color="primary">
<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
<mat-icon>menu</mat-icon>
</button>
<span>My App</span>
<span class="example-spacer"></span>
<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
<mat-icon>share</mat-icon>
</button>
</mat-toolbar>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"
[ngClass]="{'navbar-dark bg-dark': isDark(), 'navbar-light bg-light': !isDark()}">

<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<div class="mx-2">
<label class="switch">
<input type="checkbox" [checked]="!(darkMode$ | async)" (change)="onToggle()">
<span class="slider round"></span>
</label>
</div>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
26 changes: 26 additions & 0 deletions src/app/layout/topbar/topbar.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Component } from '@angular/core';
import { DarkModeService } from 'angular-dark-mode';
import { Observable } from 'rxjs';

@Component({
selector: 'app-topbar',
Expand All @@ -7,4 +9,28 @@ import { Component } from '@angular/core';
})
export class TopbarComponent {


darkMode$: Observable<boolean> = this.darkModeService.darkMode$;

constructor(private darkModeService: DarkModeService) { }

onToggle(): void {
this.darkModeService.toggle();
}

isDark() {
const darkModeValue = localStorage.getItem('dark-mode');

if (darkModeValue) {
const darkModeObject = JSON.parse(darkModeValue);
if (darkModeObject.darkMode) {
return true;
}
else {
return false;
}
}
return false;
}

}
22 changes: 20 additions & 2 deletions src/styles.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
html,
body {
height: 100%;
}

body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}


body.dark-mode {
background-color: #2d3436;
color: #dfe6e9;
}

body.light-mode {
background-color: #dfe6e9;
color: #2d3436;
}

0 comments on commit 1cb69f0

Please sign in to comment.