Skip to content

Commit e683c25

Browse files
jleyvajleyva
authored
Merge pull request #2247 from crazyserver/MOBILE-3268
MOBILE-3268 styles: Add darkmode to modals
2 parents 17ca2d1 + 97e4376 commit e683c25

File tree

4 files changed

+108
-80
lines changed

4 files changed

+108
-80
lines changed

‎src/app/app.md.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@ ion-app.app-root.md {
6868
.action-sheet-title,
6969
.action-sheet-container > .action-sheet-group:first-child {
7070
box-shadow: 0 3px 5px $gray;
71+
@include darkmode() {
72+
box-shadow: 0 3px 5px $black;
73+
}
7174
}
7275

7376
.action-sheet-title {

‎src/app/app.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -668,6 +668,9 @@ ion-app.app-root {
668668
.action-sheet-wrapper {
669669
.action-sheet-button.action-sheet-cancel {
670670
color: $core-action-sheet-cancel-color;
671+
@include darkmode() {
672+
color: $core-dark-action-sheet-cancel-color;
673+
}
671674
}
672675
.action-sheet-selected {
673676
color: $core-color;

‎src/theme/dark.scss‎

Lines changed: 101 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -16,109 +16,130 @@ $core-dark-login-item-background-color: $core-dark-login-box-background-color !d
1616
$core-dark-login-button-outline: $core-login-button-outline !default;
1717
$core-dark-login-loading-color: $core-dark-text-color !default;
1818

19-
ion-app.app-root .ion-page {
19+
ion-app.app-root {
2020
@include darkmode() {
21-
color: $core-dark-text-color;
22-
background-color: $core-dark-item-bg-color;
21+
ion-action-sheet .action-sheet-container .action-sheet-group .action-sheet-button {
22+
color: $core-dark-text-color;
2323

24-
a:not(.button) {
25-
color: $core-dark-link-color;
24+
&.action-sheet-selected {
25+
color: $core-color;
26+
}
27+
&.activated {
28+
background-color: $black;
29+
}
2630
}
2731

28-
.core-tabs-bar,
29-
.core-tabs-bar *,
30-
.core-tabs-bar .tab-slide,
3132
.ion-page,
32-
.item,
33-
.item-select,
34-
ion-card,
35-
.card-header,
36-
.card-content {
33+
ion-popover .popover-content,
34+
ion-alert .alert-wrapper,
35+
ion-action-sheet .action-sheet-container .action-sheet-group,
36+
ion-loading .loading-wrapper {
37+
color: $core-dark-text-color;
38+
background-color: $core-dark-item-bg-color;
39+
40+
a:not(.button) {
41+
color: $core-dark-link-color;
42+
}
43+
44+
.alert-message {
3745
color: $core-dark-text-color;
38-
background-color: $core-dark-item-bg-color;
46+
}
3947

40-
h1, h2, h3, h4, h5, h6,
41-
ion-icon,
42-
.label {
48+
.core-tabs-bar,
49+
.core-tabs-bar *,
50+
.core-tabs-bar .tab-slide,
51+
.ion-page,
52+
.item,
53+
.item-select,
54+
ion-card,
55+
.card-header,
56+
.card-content {
4357
color: $core-dark-text-color;
44-
}
58+
background-color: $core-dark-item-bg-color;
4559

46-
@each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
47-
.icon-md-#{$color-name},
48-
.icon-ios-#{$color-name},
49-
.icon-wp-#{$color-name} {
50-
color: $color-base;
60+
h1, h2, h3, h4, h5, h6,
61+
ion-icon,
62+
.label {
63+
color: $core-dark-text-color;
5164
}
52-
}
53-
p {
54-
color: $core-dark-text-secondary-color;
55-
}
56-
}
5765

58-
.item-divider,
59-
.item-divider .item-inner {
60-
color: $core-dark-text-color;
61-
background-color: $core-dark-item-divider-bg-color;
62-
}
66+
@each $color-name, $color-base, $color-contrast in get-colors($colors-dark) {
67+
.icon-md-#{$color-name},
68+
.icon-ios-#{$color-name},
69+
.icon-wp-#{$color-name} {
70+
color: $color-base;
71+
}
72+
}
73+
p {
74+
color: $core-dark-text-secondary-color;
75+
}
76+
}
6377

64-
.item.item-ios:active,
65-
.item.item-ios.activated,
66-
.item.item-md:active,
67-
.item.item-md.activated,
68-
.item.item-wp:active,
69-
.item.item-wp.activated {
70-
background-color: $core-dark-background-color;
71-
}
78+
.item-divider,
79+
.item-divider .item-inner {
80+
color: $core-dark-text-color;
81+
background-color: $core-dark-item-divider-bg-color;
82+
}
7283

73-
.content,
74-
.content-md,
75-
.content-ios,
76-
.content-wp {
77-
color: $core-dark-text-color;
78-
background-color: $core-dark-background-color;
79-
}
84+
.item.item-ios:active,
85+
.item.item-ios.activated,
86+
.item.item-md:active,
87+
.item.item-md.activated,
88+
.item.item-wp:active,
89+
.item.item-wp.activated {
90+
background-color: $core-dark-background-color;
91+
}
8092

81-
.button,
82-
.button-md-light,
83-
.button-ios-light,
84-
.button-wp-light,
85-
.button-outline {
86-
ion-icon {
87-
color: inherit;
93+
.content,
94+
.content-md,
95+
.content-ios,
96+
.content-wp {
97+
color: $core-dark-text-color;
98+
background-color: $core-dark-background-color;
8899
}
89-
}
90100

91-
.toolbar-md-light .toolbar-background,
92-
.toolbar-ios-light .toolbar-background,
93-
.toolbar-wp-light .toolbar-background {
94-
background-color: $core-dark-item-divider-bg-color;
95-
color: $core-dark-text-color;
96-
}
101+
.button,
102+
.button-md-light,
103+
.button-ios-light,
104+
.button-wp-light,
105+
.button-outline {
106+
ion-icon {
107+
color: inherit;
108+
}
109+
}
97110

98-
.button.button-clear-md-dark,
99-
.button.button-clear-ios-dark,
100-
.button.button-clear-wp-dark {
101-
.button-inner ion-icon {
111+
.toolbar-md-light .toolbar-background,
112+
.toolbar-ios-light .toolbar-background,
113+
.toolbar-wp-light .toolbar-background {
114+
background-color: $core-dark-item-divider-bg-color;
102115
color: $core-dark-text-color;
103116
}
104-
}
105117

106-
.button-outline {
107-
background-color: $core-dark-item-bg-color;
108-
}
118+
.button.button-clear-md-dark,
119+
.button.button-clear-ios-dark,
120+
.button.button-clear-wp-dark {
121+
.button-inner ion-icon {
122+
color: $core-dark-text-color;
123+
}
124+
}
109125

110-
ion-refresher {
111-
.refresher-pulling-icon,
112-
.refresher-refreshing-icon,
113-
.refresher-pulling-icon ion-icon,
114-
.refresher-refreshing-icon ion-icon,
115-
ion-icon {
116-
color: $refresher-icon-color;
126+
.button-outline {
127+
background-color: $core-dark-item-bg-color;
117128
}
118129

119-
.refresher-pulling-text,
120-
.refresher-refreshing-text {
121-
color: $core-dark-text-color;
130+
ion-refresher {
131+
.refresher-pulling-icon,
132+
.refresher-refreshing-icon,
133+
.refresher-pulling-icon ion-icon,
134+
.refresher-refreshing-icon ion-icon,
135+
ion-icon {
136+
color: $refresher-icon-color;
137+
}
138+
139+
.refresher-pulling-text,
140+
.refresher-refreshing-text {
141+
color: $core-dark-text-color;
142+
}
122143
}
123144
}
124145
}

‎src/theme/variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ $core-login-item-background-color: $white !default;
202202

203203
$core-action-sheet-color: $core-color !default;
204204
$core-action-sheet-cancel-color: $danger !default;
205+
$core-dark-action-sheet-cancel-color: $danger-dark !default;
205206

206207
// App iOS Variables
207208
// --------------------------------------------------

0 commit comments

Comments
 (0)