Skip to content

Commit 0c9daa1

Browse files
thetaPCthetaPC
authored
feat(light-mode): update light theme on stackblitz (#3380)
1 parent 751364c commit 0c9daa1

File tree

10 files changed

+11
-303
lines changed

10 files changed

+11
-303
lines changed

‎static/code/stackblitz/v8/angular/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"dependencies": {
3-
"@ionic/angular": "7.5.8-dev.11702398696.1ab62ea9",
4-
"@ionic/core": "7.5.8-dev.11702398696.1ab62ea9",
3+
"@ionic/angular": "7.6.2-dev.11704998705.1e1f9850",
4+
"@ionic/core": "7.6.2-dev.11704998705.1e1f9850",
55
"@angular/platform-browser-dynamic": "17.0.4"
66
}
77
}

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

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,6 @@
22
http://ionicframework.com/docs/theming/ */
33

44
/** Ionic CSS Variables **/
5-
:root {
6-
/** primary **/
7-
--ion-color-primary: #3880ff;
8-
--ion-color-primary-rgb: 56, 128, 255;
9-
--ion-color-primary-contrast: #ffffff;
10-
--ion-color-primary-contrast-rgb: 255, 255, 255;
11-
--ion-color-primary-shade: #3171e0;
12-
--ion-color-primary-tint: #4c8dff;
13-
14-
/** secondary **/
15-
--ion-color-secondary: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
57-
--ion-color-dark-contrast: #ffffff;
58-
--ion-color-dark-contrast-rgb: 255, 255, 255;
59-
--ion-color-dark-shade: #1e2023;
60-
--ion-color-dark-tint: #383a3e;
61-
62-
/** medium **/
63-
--ion-color-medium: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
73-
--ion-color-light-contrast: #000000;
74-
--ion-color-light-contrast-rgb: 0, 0, 0;
75-
--ion-color-light-shade: #d7d8da;
76-
--ion-color-light-tint: #f5f6f9;
77-
}
785

796
@media (prefers-color-scheme: dark) {
807
/*

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<html>
22

33
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
4+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/core.css" />
5+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/ionic.bundle.css" />
66
</head>
77

88
<body>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<html>
22

33
<head>
4-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/core.css" />
5-
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7/css/ionic.bundle.css" />
4+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/core.css" />
5+
<link rel="stylesheet" type="text/css" href="https://cdn.skypack.dev/@ionic/core@7.6.2-dev.11704998705.1e1f9850/css/ionic.bundle.css" />
66
</head>
77

88
<body>

‎static/code/stackblitz/v8/html/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"dependencies": {
3-
"@ionic/core": "7.5.8-dev.11702398696.1ab62ea9"
3+
"@ionic/core": "7.6.2-dev.11704998705.1e1f9850"
44
}
55
}

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

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,6 @@
22
http://ionicframework.com/docs/theming/ */
33

44
/** Ionic CSS Variables **/
5-
:root {
6-
/** primary **/
7-
--ion-color-primary: #3880ff;
8-
--ion-color-primary-rgb: 56, 128, 255;
9-
--ion-color-primary-contrast: #ffffff;
10-
--ion-color-primary-contrast-rgb: 255, 255, 255;
11-
--ion-color-primary-shade: #3171e0;
12-
--ion-color-primary-tint: #4c8dff;
13-
14-
/** secondary **/
15-
--ion-color-secondary: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
57-
--ion-color-dark-contrast: #ffffff;
58-
--ion-color-dark-contrast-rgb: 255, 255, 255;
59-
--ion-color-dark-shade: #1e2023;
60-
--ion-color-dark-tint: #383a3e;
61-
62-
/** medium **/
63-
--ion-color-medium: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
73-
--ion-color-light-contrast: #000000;
74-
--ion-color-light-contrast-rgb: 0, 0, 0;
75-
--ion-color-light-shade: #d7d8da;
76-
--ion-color-light-tint: #f5f6f9;
77-
}
785

796
@media (prefers-color-scheme: dark) {
807
/*

‎static/code/stackblitz/v8/react/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@ionic/react": "7.5.8-dev.11702398696.1ab62ea9",
7-
"@ionic/react-router": "7.5.8-dev.11702398696.1ab62ea9",
6+
"@ionic/react": "7.6.2-dev.11704998705.1e1f9850",
7+
"@ionic/react-router": "7.6.2-dev.11704998705.1e1f9850",
88
"@types/node": "^20.0.0",
99
"@types/react": "^18.0.9",
1010
"@types/react-dom": "^18.0.4",

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

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,6 @@
22
http://ionicframework.com/docs/theming/ */
33

44
/** Ionic CSS Variables **/
5-
:root {
6-
/** primary **/
7-
--ion-color-primary: #3880ff;
8-
--ion-color-primary-rgb: 56, 128, 255;
9-
--ion-color-primary-contrast: #ffffff;
10-
--ion-color-primary-contrast-rgb: 255, 255, 255;
11-
--ion-color-primary-shade: #3171e0;
12-
--ion-color-primary-tint: #4c8dff;
13-
14-
/** secondary **/
15-
--ion-color-secondary: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
57-
--ion-color-dark-contrast: #ffffff;
58-
--ion-color-dark-contrast-rgb: 255, 255, 255;
59-
--ion-color-dark-shade: #1e2023;
60-
--ion-color-dark-tint: #383a3e;
61-
62-
/** medium **/
63-
--ion-color-medium: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
73-
--ion-color-light-contrast: #000000;
74-
--ion-color-light-contrast-rgb: 0, 0, 0;
75-
--ion-color-light-shade: #d7d8da;
76-
--ion-color-light-tint: #f5f6f9;
77-
}
785

796
@media (prefers-color-scheme: dark) {
807
/*

‎static/code/stackblitz/v8/vue/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@ionic/vue": "7.5.8-dev.11702398696.1ab62ea9",
12-
"@ionic/vue-router": "7.5.8-dev.11702398696.1ab62ea9",
11+
"@ionic/vue": "7.6.2-dev.11704998705.1e1f9850",
12+
"@ionic/vue-router": "7.6.2-dev.11704998705.1e1f9850",
1313
"vue": "^3.2.25",
1414
"vue-router": "4.2.5"
1515
},

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

Lines changed: 0 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,79 +2,6 @@
22
http://ionicframework.com/docs/theming/ */
33

44
/** Ionic CSS Variables **/
5-
:root {
6-
/** primary **/
7-
--ion-color-primary: #3880ff;
8-
--ion-color-primary-rgb: 56, 128, 255;
9-
--ion-color-primary-contrast: #ffffff;
10-
--ion-color-primary-contrast-rgb: 255, 255, 255;
11-
--ion-color-primary-shade: #3171e0;
12-
--ion-color-primary-tint: #4c8dff;
13-
14-
/** secondary **/
15-
--ion-color-secondary: #3dc2ff;
16-
--ion-color-secondary-rgb: 61, 194, 255;
17-
--ion-color-secondary-contrast: #ffffff;
18-
--ion-color-secondary-contrast-rgb: 255, 255, 255;
19-
--ion-color-secondary-shade: #36abe0;
20-
--ion-color-secondary-tint: #50c8ff;
21-
22-
/** tertiary **/
23-
--ion-color-tertiary: #5260ff;
24-
--ion-color-tertiary-rgb: 82, 96, 255;
25-
--ion-color-tertiary-contrast: #ffffff;
26-
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
27-
--ion-color-tertiary-shade: #4854e0;
28-
--ion-color-tertiary-tint: #6370ff;
29-
30-
/** success **/
31-
--ion-color-success: #2dd36f;
32-
--ion-color-success-rgb: 45, 211, 111;
33-
--ion-color-success-contrast: #ffffff;
34-
--ion-color-success-contrast-rgb: 255, 255, 255;
35-
--ion-color-success-shade: #28ba62;
36-
--ion-color-success-tint: #42d77d;
37-
38-
/** warning **/
39-
--ion-color-warning: #ffc409;
40-
--ion-color-warning-rgb: 255, 196, 9;
41-
--ion-color-warning-contrast: #000000;
42-
--ion-color-warning-contrast-rgb: 0, 0, 0;
43-
--ion-color-warning-shade: #e0ac08;
44-
--ion-color-warning-tint: #ffca22;
45-
46-
/** danger **/
47-
--ion-color-danger: #eb445a;
48-
--ion-color-danger-rgb: 235, 68, 90;
49-
--ion-color-danger-contrast: #ffffff;
50-
--ion-color-danger-contrast-rgb: 255, 255, 255;
51-
--ion-color-danger-shade: #cf3c4f;
52-
--ion-color-danger-tint: #ed576b;
53-
54-
/** dark **/
55-
--ion-color-dark: #222428;
56-
--ion-color-dark-rgb: 34, 36, 40;
57-
--ion-color-dark-contrast: #ffffff;
58-
--ion-color-dark-contrast-rgb: 255, 255, 255;
59-
--ion-color-dark-shade: #1e2023;
60-
--ion-color-dark-tint: #383a3e;
61-
62-
/** medium **/
63-
--ion-color-medium: #92949c;
64-
--ion-color-medium-rgb: 146, 148, 156;
65-
--ion-color-medium-contrast: #ffffff;
66-
--ion-color-medium-contrast-rgb: 255, 255, 255;
67-
--ion-color-medium-shade: #808289;
68-
--ion-color-medium-tint: #9d9fa6;
69-
70-
/** light **/
71-
--ion-color-light: #f4f5f8;
72-
--ion-color-light-rgb: 244, 245, 248;
73-
--ion-color-light-contrast: #000000;
74-
--ion-color-light-contrast-rgb: 0, 0, 0;
75-
--ion-color-light-shade: #d7d8da;
76-
--ion-color-light-tint: #f5f6f9;
77-
}
785

796
@media (prefers-color-scheme: dark) {
807
/*

0 commit comments

Comments
 (0)