Skip to content
This repository was archived by the owner on Nov 30, 2022. It is now read-only.

Commit ce77e05

Browse files
marcjulianmarcjulian
committed
demo(theme): add dark theme
1 parent 7e9af9d commit ce77e05

4 files changed

Lines changed: 293 additions & 6 deletions

File tree

‎angular.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@
3434
"src/manifest.webmanifest"
3535
],
3636
"styles": [
37-
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
37+
{
38+
"input": "src/theme/material-theme.scss"
39+
},
3840
{
3941
"input": "src/theme/variables.scss"
4042
},
@@ -108,7 +110,6 @@
108110
"tsConfig": "src/tsconfig.spec.json",
109111
"karmaConfig": "src/karma.conf.js",
110112
"styles": [
111-
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
112113
"styles.css"
113114
],
114115
"scripts": [],

‎src/app/app.component.ts‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Inject } from '@angular/core';
22

33
import { Platform, NavController } from '@ionic/angular';
44
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
55
import { StatusBar } from '@ionic-native/status-bar/ngx';
66
import { FivRoutingStateService } from '@fivethree/core';
7+
import { DOCUMENT } from '@angular/common';
78

89
@Component({
910
selector: 'app-root',
@@ -67,15 +68,16 @@ export class AppComponent {
6768
private splashScreen: SplashScreen,
6869
private statusBar: StatusBar,
6970
private routing: FivRoutingStateService,
70-
private navCtrl: NavController
71+
private navCtrl: NavController,
72+
@Inject(DOCUMENT) private document: Document
7173
) {
7274
this.initializeApp();
7375
}
7476

7577
initializeApp() {
7678
this.platform.ready().then(() => {
7779
this.routing.loadRouting({ clearOn: ['/'], root: '/' });
78-
80+
this.setupThemeListener();
7981
this.statusBar.styleDefault();
8082
this.splashScreen.hide();
8183
});
@@ -87,4 +89,18 @@ export class AppComponent {
8789
navigate(url: string) {
8890
this.navCtrl.navigateForward(url);
8991
}
92+
93+
private setupThemeListener() {
94+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
95+
96+
this.toggleTheme(prefersDark.matches);
97+
98+
prefersDark.addEventListener('change', mediaQuery =>
99+
this.toggleTheme(mediaQuery.matches)
100+
);
101+
}
102+
103+
private toggleTheme(shouldAdd: boolean) {
104+
this.document.body.classList.toggle('dark', shouldAdd);
105+
}
90106
}

‎src/theme/material-theme.scss‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import '~@angular/material/theming';
2+
3+
@include mat-core();
4+
5+
// Generate color palette visit http://mcg.mbitson.com and enter base color which will be 500
6+
// use for contrast white, $white-87-opacity, black and $black-87-opacity
7+
8+
$primary: (
9+
50: #ecedfb,
10+
100: #cfd2f4,
11+
200: #b0b4ed,
12+
300: #9095e5,
13+
400: #787fe0,
14+
500: #6068da,
15+
600: #5860d6,
16+
700: #4e55d0,
17+
800: #444bcb,
18+
900: #333ac2,
19+
A100: #ffffff,
20+
A200: #d6d8ff,
21+
A400: #a3a7ff,
22+
A700: #8a8eff,
23+
contrast: (
24+
50: $black-87-opacity,
25+
100: $black-87-opacity,
26+
200: $black-87-opacity,
27+
300: $black-87-opacity,
28+
400: $black-87-opacity,
29+
500: white,
30+
600: white,
31+
700: white,
32+
800: white,
33+
900: white,
34+
A100: $black-87-opacity,
35+
A200: $black-87-opacity,
36+
A400: $black-87-opacity,
37+
A700: $black-87-opacity
38+
)
39+
);
40+
41+
$accent: (
42+
50: #fdf1e9,
43+
100: #fbddc8,
44+
200: #f8c6a4,
45+
300: #f5af80,
46+
400: #f29e64,
47+
500: #f08d49,
48+
600: #ee8542,
49+
700: #ec7a39,
50+
800: #e97031,
51+
900: #e55d21,
52+
A100: #ffffff,
53+
A200: #fff0ea,
54+
A400: #ffcbb7,
55+
A700: #ffb89d,
56+
contrast: (
57+
50: $black-87-opacity,
58+
100: $black-87-opacity,
59+
200: $black-87-opacity,
60+
300: $black-87-opacity,
61+
400: $black-87-opacity,
62+
500: $black-87-opacity,
63+
600: $black-87-opacity,
64+
700: $black-87-opacity,
65+
800: $black-87-opacity,
66+
900: white,
67+
A100: $black-87-opacity,
68+
A200: $black-87-opacity,
69+
A400: $black-87-opacity,
70+
A700: $black-87-opacity
71+
)
72+
);
73+
74+
$warn: (
75+
50: #fee8e8,
76+
100: #fcc5c5,
77+
200: #fa9e9e,
78+
300: #f87777,
79+
400: #f75a5a,
80+
500: #f53d3d,
81+
600: #f43737,
82+
700: #f22f2f,
83+
800: #f02727,
84+
900: #ee1a1a,
85+
A100: #ffffff,
86+
A200: #ffeded,
87+
A400: #ffbaba,
88+
A700: #ffa1a1,
89+
contrast: (
90+
50: $black-87-opacity,
91+
100: $black-87-opacity,
92+
200: $black-87-opacity,
93+
300: $black-87-opacity,
94+
400: $black-87-opacity,
95+
500: white,
96+
600: white,
97+
700: white,
98+
800: white,
99+
900: white,
100+
A100: $black-87-opacity,
101+
A200: $black-87-opacity,
102+
A400: $black-87-opacity,
103+
A700: $black-87-opacity
104+
)
105+
);
106+
107+
// mandatory stuff for theming
108+
$palette-primary: mat-palette($primary);
109+
$palette-accent: mat-palette($accent);
110+
$palette-warn: mat-palette($warn);
111+
112+
// include the custom theme components into a theme object
113+
$light-theme: mat-light-theme($palette-primary, $palette-accent, $palette-warn);
114+
$dark-theme: mat-dark-theme($palette-primary, $palette-accent, $palette-warn);
115+
116+
// include the custom theme object into the angular material theme
117+
@include angular-material-theme($light-theme);
118+
119+
.dark {
120+
@include angular-material-theme($dark-theme);
121+
}

‎src/theme/variables.scss‎

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
:root {
2-
// --ion-color-primary: #8e95fd;
32
--ion-color-primary: #6068da;
43
--ion-color-primary-rgb: 142, 149, 253;
54
--ion-color-primary-contrast: #fff;
@@ -72,3 +71,153 @@
7271
--ion-color-shade: var(--ion-color-secondary-shade);
7372
--ion-color-tint: var(--ion-color-secondary-tint);
7473
}
74+
75+
/*
76+
* Dark Colors
77+
* ------------------
78+
*/
79+
80+
body.dark {
81+
--ion-color-primary: #6068da;
82+
--ion-color-primary-rgb: 142, 149, 253;
83+
--ion-color-primary-contrast: #fff;
84+
--ion-color-primary-contrast-rgb: 0, 0, 0;
85+
--ion-color-primary-shade: #7d83df;
86+
--ion-color-primary-tint: #99a0fd;
87+
88+
--ion-color-secondary: #f08d49;
89+
--ion-color-secondary-rgb: 240, 141, 73;
90+
--ion-color-secondary-contrast: #000000;
91+
--ion-color-secondary-contrast-rgb: 0, 0, 0;
92+
--ion-color-secondary-shade: #d37c40;
93+
--ion-color-secondary-tint: #f2985b;
94+
95+
--ion-color-tertiary: #7ec699;
96+
--ion-color-tertiary-rgb: 126, 198, 153;
97+
--ion-color-tertiary-contrast: #000000;
98+
--ion-color-tertiary-contrast-rgb: 0, 0, 0;
99+
--ion-color-tertiary-shade: #6fae87;
100+
--ion-color-tertiary-tint: #8bcca3;
101+
102+
--ion-color-success: #10dc60;
103+
--ion-color-success-rgb: 16, 220, 96;
104+
--ion-color-success-contrast: #ffffff;
105+
--ion-color-success-contrast-rgb: 255, 255, 255;
106+
--ion-color-success-shade: #0ec254;
107+
--ion-color-success-tint: #28e070;
108+
109+
--ion-color-warning: #ffce00;
110+
--ion-color-warning-rgb: 255, 206, 0;
111+
--ion-color-warning-contrast: #ffffff;
112+
--ion-color-warning-contrast-rgb: 255, 255, 255;
113+
--ion-color-warning-shade: #e0b500;
114+
--ion-color-warning-tint: #ffd31a;
115+
116+
--ion-color-danger: #f04141;
117+
--ion-color-danger-rgb: 245, 61, 61;
118+
--ion-color-danger-contrast: #ffffff;
119+
--ion-color-danger-contrast-rgb: 255, 255, 255;
120+
--ion-color-danger-shade: #d33939;
121+
--ion-color-danger-tint: #f25454;
122+
123+
--ion-color-dark: #f4f5f8;
124+
--ion-color-dark-rgb: 244, 245, 248;
125+
--ion-color-dark-contrast: #000000;
126+
--ion-color-dark-contrast-rgb: 0, 0, 0;
127+
--ion-color-dark-shade: #d7d8da;
128+
--ion-color-dark-tint: #f5f6f9;
129+
130+
--ion-color-medium: #989aa2;
131+
--ion-color-medium-rgb: 152, 154, 162;
132+
--ion-color-medium-contrast: #000000;
133+
--ion-color-medium-contrast-rgb: 0, 0, 0;
134+
--ion-color-medium-shade: #86888f;
135+
--ion-color-medium-tint: #a2a4ab;
136+
137+
--ion-color-light: #222428;
138+
--ion-color-light-rgb: 34, 36, 40;
139+
--ion-color-light-contrast: #ffffff;
140+
--ion-color-light-contrast-rgb: 255, 255, 255;
141+
--ion-color-light-shade: #1e2023;
142+
--ion-color-light-tint: #383a3e;
143+
}
144+
145+
/*
146+
* iOS Dark Theme
147+
* -------------------------------------------
148+
*/
149+
150+
.ios body.dark {
151+
--ion-background-color: #000000;
152+
--ion-background-color-rgb: 0, 0, 0;
153+
154+
--ion-text-color: #ffffff;
155+
--ion-text-color-rgb: 255, 255, 255;
156+
157+
--ion-color-step-50: #0d0d0d;
158+
--ion-color-step-100: #1a1a1a;
159+
--ion-color-step-150: #262626;
160+
--ion-color-step-200: #333333;
161+
--ion-color-step-250: #404040;
162+
--ion-color-step-300: #4d4d4d;
163+
--ion-color-step-350: #595959;
164+
--ion-color-step-400: #666666;
165+
--ion-color-step-450: #737373;
166+
--ion-color-step-500: #808080;
167+
--ion-color-step-550: #8c8c8c;
168+
--ion-color-step-600: #999999;
169+
--ion-color-step-650: #a6a6a6;
170+
--ion-color-step-700: #b3b3b3;
171+
--ion-color-step-750: #bfbfbf;
172+
--ion-color-step-800: #cccccc;
173+
--ion-color-step-850: #d9d9d9;
174+
--ion-color-step-900: #e6e6e6;
175+
--ion-color-step-950: #f2f2f2;
176+
177+
--ion-toolbar-background: #0d0d0d;
178+
179+
--ion-item-background: #1c1c1c;
180+
--ion-item-background-activated: #313131;
181+
}
182+
183+
/*
184+
* Material Design Dark Theme
185+
* -------------------------------------------
186+
*/
187+
188+
.md body.dark {
189+
--ion-background-color: #121212;
190+
--ion-background-color-rgb: 18, 18, 18;
191+
192+
--ion-text-color: #ffffff;
193+
--ion-text-color-rgb: 255, 255, 255;
194+
195+
--ion-border-color: #222222;
196+
197+
--ion-color-step-50: #1e1e1e;
198+
--ion-color-step-100: #2a2a2a;
199+
--ion-color-step-150: #363636;
200+
--ion-color-step-200: #414141;
201+
--ion-color-step-250: #4d4d4d;
202+
--ion-color-step-300: #595959;
203+
--ion-color-step-350: #656565;
204+
--ion-color-step-400: #717171;
205+
--ion-color-step-450: #7d7d7d;
206+
--ion-color-step-500: #898989;
207+
--ion-color-step-550: #949494;
208+
--ion-color-step-600: #a0a0a0;
209+
--ion-color-step-650: #acacac;
210+
--ion-color-step-700: #b8b8b8;
211+
--ion-color-step-750: #c4c4c4;
212+
--ion-color-step-800: #d0d0d0;
213+
--ion-color-step-850: #dbdbdb;
214+
--ion-color-step-900: #e7e7e7;
215+
--ion-color-step-950: #f3f3f3;
216+
217+
--ion-item-background: #1a1b1e;
218+
}
219+
220+
/* Optional CSS, this is added for the flashing that happens when toggling between themes */
221+
ion-item {
222+
--transition: none;
223+
}

0 commit comments

Comments
 (0)