Skip to content

Commit 47cc025

Browse files
devversionmmalerba
devversion
authored and
mmalerba
committed
chore: add button to toggle theme in demo-app (#3093)
* update: add button to toggle theme in demo-app * Adds a button to the demo-app toolbar that allows developers to quickly change between dark and light Material themes. This is very useful when building new components or just when confirming that all components work with dark themes. * Improve list-demo in dark-theme * Fix stylelint * Address comments
1 parent 194714a commit 47cc025

File tree

15 files changed

+100
-61
lines changed

15 files changed

+100
-61
lines changed

‎src/demo-app/button/button-demo.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
section {
99
display: flex;
1010
align-items: center;
11-
background-color: #f7f7f7;
1211
margin: 8px;
1312
}
1413

‎src/demo-app/demo-app/demo-app-theme.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import '@angular/material/core/theming/all-theme';
2+
3+
// Include core material styles.
4+
@include mat-core();
5+
6+
$primary: mat-palette($mat-indigo);
7+
$accent: mat-palette($mat-pink);
8+
9+
$light-theme: mat-light-theme($primary, $accent);
10+
$dark-theme: mat-dark-theme($primary, $accent);
11+
12+
@include angular-material-theme($light-theme);
13+
14+
.demo-dark-theme {
15+
@include angular-material-theme($dark-theme);
16+
}

‎src/demo-app/demo-app/demo-app.html‎

Lines changed: 41 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,46 @@
1-
<md-sidenav-container class="demo-root" fullscreen>
2-
<md-sidenav #start>
3-
<md-nav-list>
4-
<a *ngFor="let navItem of navItems"
5-
md-list-item
6-
(click)="start.close()"
7-
[routerLink]="[navItem.route]">
8-
{{navItem.name}}
9-
</a>
1+
<!-- Theme class needs to be applied above sidenav-container to style content background. -->
2+
<div [class.demo-dark-theme]="isDarkTheme">
3+
<md-sidenav-container class="demo-root" fullscreen>
4+
<md-sidenav #start>
5+
<md-nav-list>
6+
<a *ngFor="let navItem of navItems"
7+
md-list-item
8+
(click)="start.close()"
9+
[routerLink]="[navItem.route]">
10+
{{navItem.name}}
11+
</a>
1012

11-
<hr>
13+
<hr>
1214

13-
<a md-list-item
14-
(click)="start.close()"
15-
[routerLink]="['baseline']">
16-
Baseline
17-
</a>
18-
</md-nav-list>
19-
<button md-button (click)="start.close()">CLOSE</button>
20-
</md-sidenav>
21-
<div>
22-
<md-toolbar color="primary">
23-
<button md-icon-button (click)="start.open()">
24-
<md-icon class="md-24" >menu</md-icon>
25-
</button>
26-
<div class="demo-toolbar">
27-
<h1>Angular Material Demos</h1>
28-
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
29-
Fullscreen
15+
<a md-list-item
16+
(click)="start.close()"
17+
[routerLink]="['baseline']">
18+
Baseline
19+
</a>
20+
</md-nav-list>
21+
<button md-button (click)="start.close()">CLOSE</button>
22+
</md-sidenav>
23+
<div>
24+
<md-toolbar color="primary">
25+
<button md-icon-button (click)="start.open()">
26+
<md-icon class="md-24" >menu</md-icon>
3027
</button>
31-
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
32-
{{root.dir.toUpperCase()}}
33-
</button>
34-
</div>
35-
</md-toolbar>
28+
<div class="demo-toolbar">
29+
<h1>Angular Material Demos</h1>
30+
<span class="demo-flex-fill"></span>
31+
<button md-button (click)="isDarkTheme = !isDarkTheme">Toggle Theme</button>
32+
<button md-button (click)="toggleFullscreen()" title="Toggle fullscreen">
33+
Fullscreen
34+
</button>
35+
<button md-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
36+
{{root.dir.toUpperCase()}}
37+
</button>
38+
</div>
39+
</md-toolbar>
3640

37-
<div #root="$implicit" dir="ltr" class="demo-content">
38-
<router-outlet></router-outlet>
41+
<div #root="$implicit" dir="ltr" class="demo-content">
42+
<router-outlet></router-outlet>
43+
</div>
3944
</div>
40-
</div>
41-
</md-sidenav-container>
45+
</md-sidenav-container>
46+
</div>

‎src/demo-app/demo-app/demo-app.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ body {
3131

3232
.demo-toolbar {
3333
display: flex;
34-
justify-content: space-between;
3534
width: 100%;
3635
}
3736
}
@@ -41,6 +40,11 @@ body {
4140
}
4241
}
4342

43+
// Fills remaining flex space.
44+
.demo-flex-fill {
45+
flex: 1 1 auto;
46+
}
47+
4448
// stretch to screen size in fullscreen mode
4549
.demo-content {
4650
width: 100%;

‎src/demo-app/demo-app/demo-app.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,14 @@ export class Home {}
1515
selector: 'demo-app',
1616
providers: [],
1717
templateUrl: 'demo-app.html',
18-
styleUrls: ['demo-app.css'],
18+
styleUrls: ['demo-app.css', 'demo-app-theme.css'],
1919
encapsulation: ViewEncapsulation.None,
2020
})
2121
export class DemoApp {
22+
23+
/** Whether the demo-app should use a dark theme or not. */
24+
isDarkTheme: boolean = false;
25+
2226
navItems = [
2327
{name: 'Autocomplete', route: 'autocomplete'},
2428
{name: 'Button', route: 'button'},

‎src/demo-app/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88

99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
11-
<link href="@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
1211

1312
<!-- FontAwesome for md-icon demo. -->
1413
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

‎src/demo-app/list/list-demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h1>md-list demo</h1>
33

44
<button md-raised-button (click)="thirdLine=!thirdLine" class="demo-button">Show third line</button>
55

6-
<div class="demo">
6+
<div class="list-demo">
77
<div>
88
<h2>Normal lists</h2>
99

‎src/demo-app/list/list-demo.scss‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
.demo {
1+
.list-demo {
32
display: flex;
43
flex-flow: row wrap;
54

@@ -9,20 +8,32 @@
98
margin: 20px 20px 0 0;
109

1110
}
11+
1212
h2 {
1313
margin-top: 20px;
1414
}
15+
}
16+
17+
/* Theme for the list-item demo elements. */
18+
@mixin demo-list-item-theme($dark: false) {
19+
$base-color: if($dark, white, black);
1520

16-
.mat-icon {
17-
color: rgba(0, 0, 0, 0.12);
21+
.list-demo .mat-icon {
22+
color: rgba($base-color, 0.12);
1823
}
1924

20-
.mat-list-icon {
25+
.list-demo .mat-list-icon {
2126
color: white;
22-
background: rgba(0, 0, 0, 0.3);
27+
background: rgba($base-color, 0.3);
28+
}
29+
30+
.list-demo .demo-secondary-text {
31+
color: rgba($base-color, 0.54);
2332
}
2433
}
2534

26-
.demo-secondary-text {
27-
color: rgba(0, 0, 0, 0.54);
35+
@include demo-list-item-theme(false);
36+
37+
.demo-dark-theme {
38+
@include demo-list-item-theme(true);
2839
}

‎src/demo-app/list/list-demo.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import {Component} from '@angular/core';
1+
import {Component, ViewEncapsulation} from '@angular/core';
22

33

44
@Component({
55
moduleId: module.id,
66
selector: 'list-demo',
77
templateUrl: 'list-demo.html',
88
styleUrls: ['list-demo.css'],
9+
encapsulation: ViewEncapsulation.None
910
})
1011
export class ListDemo {
1112
items: string[] = [

‎src/demo-app/radio/radio-demo.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
}
55

66
.demo-section {
7-
background-color: #f7f7f7;
87
margin: 8px;
98
padding: 16px;
109

0 commit comments

Comments
 (0)