Skip to content

Commit b667ca4

Browse files
averyjohnstonaveryjohnston
authored
refactor(Stackblitz): use imported dark theme instead of hard-coded styles (#3378)
1 parent 0c9daa1 commit b667ca4

File tree

11 files changed

+131
-728
lines changed

11 files changed

+131
-728
lines changed

‎static/code/stackblitz/v8/angular/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,14 @@
2424
@import "~@ionic/angular/css/text-transformation.css";
2525
@import "~@ionic/angular/css/flex-utils.css";
2626
@import "~@ionic/angular/css/display.css";
27+
28+
/**
29+
* Ionic Dark Theme
30+
* -----------------------------------------------------
31+
* For more info, please see:
32+
* https://ionicframework.com/docs/theming/dark-mode
33+
*/
34+
35+
/* @import "~@ionic/angular/css/themes/dark.always.css"; */
36+
/* @import "~@ionic/angular/css/themes/dark.class.css"; */
37+
@import "~@ionic/angular/css/themes/dark.system.css";

‎static/code/stackblitz/v8/angular/variables.css‎

Lines changed: 0 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +0,0 @@
1-
/* Ionic Variables and Theming. For more info, please see:
2-
http://ionicframework.com/docs/theming/ */
3-
4-
/** Ionic CSS Variables **/
5-
6-
@media (prefers-color-scheme: dark) {
7-
/*
8-
* Dark Colors
9-
* -------------------------------------------
10-
*/
11-
12-
body {
13-
--ion-color-primary: #428cff;
14-
--ion-color-primary-rgb: 66,140,255;
15-
--ion-color-primary-contrast: #ffffff;
16-
--ion-color-primary-contrast-rgb: 255,255,255;
17-
--ion-color-primary-shade: #3a7be0;
18-
--ion-color-primary-tint: #5598ff;
19-
20-
--ion-color-secondary: #50c8ff;
21-
--ion-color-secondary-rgb: 80,200,255;
22-
--ion-color-secondary-contrast: #ffffff;
23-
--ion-color-secondary-contrast-rgb: 255,255,255;
24-
--ion-color-secondary-shade: #46b0e0;
25-
--ion-color-secondary-tint: #62ceff;
26-
27-
--ion-color-tertiary: #6a64ff;
28-
--ion-color-tertiary-rgb: 106,100,255;
29-
--ion-color-tertiary-contrast: #ffffff;
30-
--ion-color-tertiary-contrast-rgb: 255,255,255;
31-
--ion-color-tertiary-shade: #5d58e0;
32-
--ion-color-tertiary-tint: #7974ff;
33-
34-
--ion-color-success: #2fdf75;
35-
--ion-color-success-rgb: 47,223,117;
36-
--ion-color-success-contrast: #000000;
37-
--ion-color-success-contrast-rgb: 0,0,0;
38-
--ion-color-success-shade: #29c467;
39-
--ion-color-success-tint: #44e283;
40-
41-
--ion-color-warning: #ffd534;
42-
--ion-color-warning-rgb: 255,213,52;
43-
--ion-color-warning-contrast: #000000;
44-
--ion-color-warning-contrast-rgb: 0,0,0;
45-
--ion-color-warning-shade: #e0bb2e;
46-
--ion-color-warning-tint: #ffd948;
47-
48-
--ion-color-danger: #ff4961;
49-
--ion-color-danger-rgb: 255,73,97;
50-
--ion-color-danger-contrast: #ffffff;
51-
--ion-color-danger-contrast-rgb: 255,255,255;
52-
--ion-color-danger-shade: #e04055;
53-
--ion-color-danger-tint: #ff5b71;
54-
55-
--ion-color-dark: #f4f5f8;
56-
--ion-color-dark-rgb: 244,245,248;
57-
--ion-color-dark-contrast: #000000;
58-
--ion-color-dark-contrast-rgb: 0,0,0;
59-
--ion-color-dark-shade: #d7d8da;
60-
--ion-color-dark-tint: #f5f6f9;
61-
62-
--ion-color-medium: #989aa2;
63-
--ion-color-medium-rgb: 152,154,162;
64-
--ion-color-medium-contrast: #000000;
65-
--ion-color-medium-contrast-rgb: 0,0,0;
66-
--ion-color-medium-shade: #86888f;
67-
--ion-color-medium-tint: #a2a4ab;
68-
69-
--ion-color-light: #222428;
70-
--ion-color-light-rgb: 34,36,40;
71-
--ion-color-light-contrast: #ffffff;
72-
--ion-color-light-contrast-rgb: 255,255,255;
73-
--ion-color-light-shade: #1e2023;
74-
--ion-color-light-tint: #383a3e;
75-
}
76-
77-
/*
78-
* iOS Dark Theme
79-
* -------------------------------------------
80-
*/
81-
82-
.ios body {
83-
--ion-background-color: #000000;
84-
--ion-background-color-rgb: 0,0,0;
85-
86-
--ion-text-color: #ffffff;
87-
--ion-text-color-rgb: 255,255,255;
88-
89-
--ion-color-step-50: #0d0d0d;
90-
--ion-color-step-100: #1a1a1a;
91-
--ion-color-step-150: #262626;
92-
--ion-color-step-200: #333333;
93-
--ion-color-step-250: #404040;
94-
--ion-color-step-300: #4d4d4d;
95-
--ion-color-step-350: #595959;
96-
--ion-color-step-400: #666666;
97-
--ion-color-step-450: #737373;
98-
--ion-color-step-500: #808080;
99-
--ion-color-step-550: #8c8c8c;
100-
--ion-color-step-600: #999999;
101-
--ion-color-step-650: #a6a6a6;
102-
--ion-color-step-700: #b3b3b3;
103-
--ion-color-step-750: #bfbfbf;
104-
--ion-color-step-800: #cccccc;
105-
--ion-color-step-850: #d9d9d9;
106-
--ion-color-step-900: #e6e6e6;
107-
--ion-color-step-950: #f2f2f2;
108-
109-
--ion-item-background: #000000;
110-
111-
--ion-card-background: #1c1c1d;
112-
}
113-
114-
.ios ion-modal {
115-
--ion-background-color: var(--ion-color-step-100);
116-
--ion-toolbar-background: var(--ion-color-step-150);
117-
--ion-toolbar-border-color: var(--ion-color-step-250);
118-
}
119-
120-
121-
/*
122-
* Material Design Dark Theme
123-
* -------------------------------------------
124-
*/
125-
126-
.md body {
127-
--ion-background-color: #121212;
128-
--ion-background-color-rgb: 18,18,18;
129-
130-
--ion-text-color: #ffffff;
131-
--ion-text-color-rgb: 255,255,255;
132-
133-
--ion-border-color: #222222;
134-
135-
--ion-color-step-50: #1e1e1e;
136-
--ion-color-step-100: #2a2a2a;
137-
--ion-color-step-150: #363636;
138-
--ion-color-step-200: #414141;
139-
--ion-color-step-250: #4d4d4d;
140-
--ion-color-step-300: #595959;
141-
--ion-color-step-350: #656565;
142-
--ion-color-step-400: #717171;
143-
--ion-color-step-450: #7d7d7d;
144-
--ion-color-step-500: #898989;
145-
--ion-color-step-550: #949494;
146-
--ion-color-step-600: #a0a0a0;
147-
--ion-color-step-650: #acacac;
148-
--ion-color-step-700: #b8b8b8;
149-
--ion-color-step-750: #c4c4c4;
150-
--ion-color-step-800: #d0d0d0;
151-
--ion-color-step-850: #dbdbdb;
152-
--ion-color-step-900: #e7e7e7;
153-
--ion-color-step-950: #f3f3f3;
154-
155-
--ion-item-background: #1e1e1e;
156-
157-
--ion-toolbar-background: #1f1f1f;
158-
159-
--ion-tab-bar-background: #1f1f1f;
160-
161-
--ion-card-background: #1e1e1e;
162-
}
163-
}

‎static/code/stackblitz/v8/html/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@ import '@ionic/core/css/text-transformation.css';
1818
import '@ionic/core/css/flex-utils.css';
1919
import '@ionic/core/css/display.css';
2020

21+
/**
22+
* Ionic Dark Theme
23+
* -----------------------------------------------------
24+
* For more info, please see:
25+
* https://ionicframework.com/docs/theming/dark-mode
26+
*/
27+
28+
// import '@ionic/core/css/themes/dark.always.css';
29+
// import '@ionic/core/css/themes/dark.class.css';
30+
import '@ionic/core/css/themes/dark.system.css';
31+
2132
/* Theme variables */
2233
import './theme/variables.css';
2334

‎static/code/stackblitz/v8/html/variables.css‎

Lines changed: 0 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -1,163 +0,0 @@
1-
/* Ionic Variables and Theming. For more info, please see:
2-
http://ionicframework.com/docs/theming/ */
3-
4-
/** Ionic CSS Variables **/
5-
6-
@media (prefers-color-scheme: dark) {
7-
/*
8-
* Dark Colors
9-
* -------------------------------------------
10-
*/
11-
12-
body {
13-
--ion-color-primary: #428cff;
14-
--ion-color-primary-rgb: 66,140,255;
15-
--ion-color-primary-contrast: #ffffff;
16-
--ion-color-primary-contrast-rgb: 255,255,255;
17-
--ion-color-primary-shade: #3a7be0;
18-
--ion-color-primary-tint: #5598ff;
19-
20-
--ion-color-secondary: #50c8ff;
21-
--ion-color-secondary-rgb: 80,200,255;
22-
--ion-color-secondary-contrast: #ffffff;
23-
--ion-color-secondary-contrast-rgb: 255,255,255;
24-
--ion-color-secondary-shade: #46b0e0;
25-
--ion-color-secondary-tint: #62ceff;
26-
27-
--ion-color-tertiary: #6a64ff;
28-
--ion-color-tertiary-rgb: 106,100,255;
29-
--ion-color-tertiary-contrast: #ffffff;
30-
--ion-color-tertiary-contrast-rgb: 255,255,255;
31-
--ion-color-tertiary-shade: #5d58e0;
32-
--ion-color-tertiary-tint: #7974ff;
33-
34-
--ion-color-success: #2fdf75;
35-
--ion-color-success-rgb: 47,223,117;
36-
--ion-color-success-contrast: #000000;
37-
--ion-color-success-contrast-rgb: 0,0,0;
38-
--ion-color-success-shade: #29c467;
39-
--ion-color-success-tint: #44e283;
40-
41-
--ion-color-warning: #ffd534;
42-
--ion-color-warning-rgb: 255,213,52;
43-
--ion-color-warning-contrast: #000000;
44-
--ion-color-warning-contrast-rgb: 0,0,0;
45-
--ion-color-warning-shade: #e0bb2e;
46-
--ion-color-warning-tint: #ffd948;
47-
48-
--ion-color-danger: #ff4961;
49-
--ion-color-danger-rgb: 255,73,97;
50-
--ion-color-danger-contrast: #ffffff;
51-
--ion-color-danger-contrast-rgb: 255,255,255;
52-
--ion-color-danger-shade: #e04055;
53-
--ion-color-danger-tint: #ff5b71;
54-
55-
--ion-color-dark: #f4f5f8;
56-
--ion-color-dark-rgb: 244,245,248;
57-
--ion-color-dark-contrast: #000000;
58-
--ion-color-dark-contrast-rgb: 0,0,0;
59-
--ion-color-dark-shade: #d7d8da;
60-
--ion-color-dark-tint: #f5f6f9;
61-
62-
--ion-color-medium: #989aa2;
63-
--ion-color-medium-rgb: 152,154,162;
64-
--ion-color-medium-contrast: #000000;
65-
--ion-color-medium-contrast-rgb: 0,0,0;
66-
--ion-color-medium-shade: #86888f;
67-
--ion-color-medium-tint: #a2a4ab;
68-
69-
--ion-color-light: #222428;
70-
--ion-color-light-rgb: 34,36,40;
71-
--ion-color-light-contrast: #ffffff;
72-
--ion-color-light-contrast-rgb: 255,255,255;
73-
--ion-color-light-shade: #1e2023;
74-
--ion-color-light-tint: #383a3e;
75-
}
76-
77-
/*
78-
* iOS Dark Theme
79-
* -------------------------------------------
80-
*/
81-
82-
.ios body {
83-
--ion-background-color: #000000;
84-
--ion-background-color-rgb: 0,0,0;
85-
86-
--ion-text-color: #ffffff;
87-
--ion-text-color-rgb: 255,255,255;
88-
89-
--ion-color-step-50: #0d0d0d;
90-
--ion-color-step-100: #1a1a1a;
91-
--ion-color-step-150: #262626;
92-
--ion-color-step-200: #333333;
93-
--ion-color-step-250: #404040;
94-
--ion-color-step-300: #4d4d4d;
95-
--ion-color-step-350: #595959;
96-
--ion-color-step-400: #666666;
97-
--ion-color-step-450: #737373;
98-
--ion-color-step-500: #808080;
99-
--ion-color-step-550: #8c8c8c;
100-
--ion-color-step-600: #999999;
101-
--ion-color-step-650: #a6a6a6;
102-
--ion-color-step-700: #b3b3b3;
103-
--ion-color-step-750: #bfbfbf;
104-
--ion-color-step-800: #cccccc;
105-
--ion-color-step-850: #d9d9d9;
106-
--ion-color-step-900: #e6e6e6;
107-
--ion-color-step-950: #f2f2f2;
108-
109-
--ion-item-background: #000000;
110-
111-
--ion-card-background: #1c1c1d;
112-
}
113-
114-
.ios ion-modal {
115-
--ion-background-color: var(--ion-color-step-100);
116-
--ion-toolbar-background: var(--ion-color-step-150);
117-
--ion-toolbar-border-color: var(--ion-color-step-250);
118-
}
119-
120-
121-
/*
122-
* Material Design Dark Theme
123-
* -------------------------------------------
124-
*/
125-
126-
.md body {
127-
--ion-background-color: #121212;
128-
--ion-background-color-rgb: 18,18,18;
129-
130-
--ion-text-color: #ffffff;
131-
--ion-text-color-rgb: 255,255,255;
132-
133-
--ion-border-color: #222222;
134-
135-
--ion-color-step-50: #1e1e1e;
136-
--ion-color-step-100: #2a2a2a;
137-
--ion-color-step-150: #363636;
138-
--ion-color-step-200: #414141;
139-
--ion-color-step-250: #4d4d4d;
140-
--ion-color-step-300: #595959;
141-
--ion-color-step-350: #656565;
142-
--ion-color-step-400: #717171;
143-
--ion-color-step-450: #7d7d7d;
144-
--ion-color-step-500: #898989;
145-
--ion-color-step-550: #949494;
146-
--ion-color-step-600: #a0a0a0;
147-
--ion-color-step-650: #acacac;
148-
--ion-color-step-700: #b8b8b8;
149-
--ion-color-step-750: #c4c4c4;
150-
--ion-color-step-800: #d0d0d0;
151-
--ion-color-step-850: #dbdbdb;
152-
--ion-color-step-900: #e7e7e7;
153-
--ion-color-step-950: #f3f3f3;
154-
155-
--ion-item-background: #1e1e1e;
156-
157-
--ion-toolbar-background: #1f1f1f;
158-
159-
--ion-tab-bar-background: #1f1f1f;
160-
161-
--ion-card-background: #1e1e1e;
162-
}
163-
}

‎static/code/stackblitz/v8/react/app.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,17 @@ import '@ionic/react/css/text-transformation.css';
1717
import '@ionic/react/css/flex-utils.css';
1818
import '@ionic/react/css/display.css';
1919

20+
/**
21+
* Ionic Dark Theme
22+
* -----------------------------------------------------
23+
* For more info, please see:
24+
* https://ionicframework.com/docs/theming/dark-mode
25+
*/
26+
27+
// import '@ionic/react/css/themes/dark.always.css';
28+
// import '@ionic/react/css/themes/dark.class.css';
29+
import '@ionic/react/css/themes/dark.system.css';
30+
2031
/* Theme variables */
2132
import './theme/variables.css';
2233

‎static/code/stackblitz/v8/react/app.withContent.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,17 @@ import '@ionic/react/css/text-transformation.css';
1717
import '@ionic/react/css/flex-utils.css';
1818
import '@ionic/react/css/display.css';
1919

20+
/**
21+
* Ionic Dark Theme
22+
* -----------------------------------------------------
23+
* For more info, please see:
24+
* https://ionicframework.com/docs/theming/dark-mode
25+
*/
26+
27+
// import '@ionic/react/css/themes/dark.always.css';
28+
// import '@ionic/react/css/themes/dark.class.css';
29+
import '@ionic/react/css/themes/dark.system.css';
30+
2031
/* Theme variables */
2132
import './theme/variables.css';
2233

0 commit comments

Comments
 (0)