Skip to content

Commit 2769dec

Browse files
mst101mst101
committed
feat(style): Add a dark mode to datepicker
1 parent e02db19 commit 2769dec

File tree

1 file changed

+98
-39
lines changed

1 file changed

+98
-39
lines changed

‎src/styles/style.scss‎

Lines changed: 98 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
1+
:root {
2+
// Layout
3+
--vdp-width: 300px;
4+
--vdp-border-width: 1px;
5+
--vdp-header-height: 40px;
6+
--vdp-day-header-height: 40px;
7+
--vdp-cell-height: 40px;
8+
9+
// Light mode
10+
--vdp-bg: #fff;
11+
--vdp-text: #000;
12+
--vdp-text-disabled: #ddd;
13+
--vdp-border: #ccc;
14+
--vdp-today-bg: #eee;
15+
--vdp-button-hover-bg: #eee;
16+
--vdp-cell-selected-bg: #4bd;
17+
--vdp-cell-selected-text: #06262d;
18+
--vdp-cell-hover-border: #4bd;
19+
--vdp-cell-focus-outline: #000;
20+
--vdp-cell-highlighted-bg: #cae5ed;
21+
--vdp-cell-highlighted-text: #104756;
22+
--vdp-cell-highlighted-disabled-text: #accad2;
23+
--vdp-cell-edge-dates-text: #757575;
24+
--vdp-cell-edge-dates-selected-text: #104756;
25+
--vdp-cell-edge-dates-highlighted-text: #196676;
26+
}
27+
28+
html.dark {
29+
// Dark mode
30+
--vdp-bg: #121212;
31+
--vdp-text: #eee;
32+
--vdp-text-disabled: #666;
33+
--vdp-border: #333;
34+
--vdp-today-bg: #333;
35+
--vdp-button-hover-bg: #333;
36+
--vdp-cell-selected-bg: #24a0c4;
37+
--vdp-cell-selected-text: #092831;
38+
--vdp-cell-hover-border: #24a0c4;
39+
--vdp-cell-focus-outline: #fff;
40+
--vdp-cell-highlighted-bg: #092831;
41+
--vdp-cell-highlighted-text: #ecf8fc;
42+
--vdp-cell-highlighted-disabled-text: #16647a;
43+
--vdp-cell-edge-dates-text: #aaa;
44+
--vdp-cell-edge-dates-selected-text: #ecf8fc;
45+
--vdp-cell-edge-dates-highlighted-text: #9db8c2;
46+
}
47+
148
.rtl {
249
direction: rtl;
350
}
@@ -10,61 +57,61 @@
1057
}
1158

1259
.vdp-datepicker__calendar {
13-
background: #fff;
14-
border: 1px solid #ccc;
60+
background: var(--vdp-bg);
61+
border: var(--vdp-border-width) solid var(--vdp-border);
1562
position: absolute;
16-
width: 300px;
17-
z-index: 10000;
63+
width: var(--vdp-width);
64+
z-index: 10;
1865

1966
> div {
20-
background: #fff;
21-
width: 298px;
67+
background: var(--vdp-bg);
68+
width: calc(var(--vdp-width) - (2 * var(--vdp-border-width)));
2269
}
2370

2471
.today {
25-
background-color: #eee;
72+
background-color: var(--vdp-today-bg);
2673
}
2774

2875
* {
2976
box-sizing: border-box;
3077
}
3178

3279
&.vdp-datepicker__calendar--inline {
33-
position: static;
80+
position: relative;
3481
}
3582

3683
button {
3784
background: inherit;
85+
color: var(--vdp-text);
3886
text-align: center;
3987

4088
&:disabled {
41-
color: #ddd;
89+
color: var(--vdp-text-disabled);
4290
}
4391
}
4492

4593
header {
4694
display: flex;
47-
height: 40px;
95+
height: var(--vdp-header-height);
4896
justify-content: space-between;
4997

5098
button {
5199
border: none;
52100

53101
&:hover:not(:disabled) {
54-
background: #eee;
102+
background: var(--vdp-button-hover-bg);
55103
cursor: pointer;
56104
}
57105

58106
&.vdp-datepicker__up {
59-
color: #000;
107+
color: var(--vdp-text);
60108
flex-grow: 5;
61109
}
62110
}
63111

64112
.prev,
65113
.next {
66114
flex-grow: 1;
67-
max-height: 40px;
68115
position: relative;
69116

70117
.default {
@@ -89,15 +136,15 @@
89136
.prev {
90137
.default {
91138
&:after {
92-
border-right: 10px solid #000;
139+
border-right: 10px solid var(--vdp-text);
93140
margin-left: -5px;
94141
}
95142
}
96143

97144
&:disabled {
98145
.default {
99146
&:after {
100-
border-right: 10px solid #ddd;
147+
border-right: 10px solid var(--vdp-text-disabled);
101148
}
102149
}
103150
}
@@ -106,15 +153,15 @@
106153
.next {
107154
.default {
108155
&:after {
109-
border-left: 10px solid #000;
156+
border-left: 10px solid var(--vdp-text);
110157
margin-left: 5px;
111158
}
112159
}
113160

114161
&:disabled {
115162
.default {
116163
&:after {
117-
border-left: 10px solid #ddd;
164+
border-left: 10px solid var(--vdp-text-disabled);
118165
}
119166
}
120167
}
@@ -124,7 +171,8 @@
124171
.cell {
125172
border: 1px solid transparent;
126173
display: inline-block;
127-
height: 40px;
174+
font-size: 100%;
175+
height: var(--vdp-cell-height);
128176
padding: 0 5px;
129177
position: relative;
130178
text-align: center;
@@ -137,58 +185,67 @@
137185
cursor: pointer;
138186

139187
&:hover {
140-
border: 1px solid #4bd;
188+
border: 0.1em solid var(--vdp-cell-hover-border);
141189
}
142190

143-
&:focus {
144-
z-index: 1;
191+
// Default 'non-bootstrap' focus style...
192+
&:not(.btn):focus {
193+
outline: 0.1em solid var(--vdp-cell-focus-outline);
194+
outline-offset: -0.1em;
145195
}
146196
}
147197

148-
&.selected {
149-
background: #4bd;
150-
color: #104756;
198+
&:hover {
199+
outline: 0.1em solid var(--vdp-cell-hover-outline) !important;
200+
}
151201

152-
&:hover {
153-
background: #4bd;
154-
}
202+
&.selected,
203+
&.selected:hover {
204+
background: var(--vdp-cell-selected-bg);
205+
color: var(--vdp-cell-selected-text);
155206

156207
&.highlighted {
157-
background: #4bd;
208+
background: var(--vdp-cell-selected-bg);
209+
color: var(--vdp-cell-selected-text);
158210
}
159211
}
160212

161213
&.highlighted {
162-
background: #cae5ed;
163-
color: #104756;
214+
background: var(--vdp-cell-highlighted-bg);
215+
color: var(--vdp-cell-highlighted-text);
164216

165217
&.disabled {
166-
color: #accad2;
218+
color: var(--vdp-cell-highlighted-disabled-text);
167219
}
168220
}
169221

170222
&.muted {
171-
color: #757575;
223+
color: var(--vdp-cell-edge-dates-text);
172224

173225
&.selected {
174-
color: #104756;
226+
color: var(--vdp-cell-edge-dates-selected-text);
227+
}
228+
229+
&.highlighted {
230+
color: var(--vdp-cell-edge-dates-highlighted-text);
175231
}
176232

177233
&.disabled:not(.selected) {
178-
color: #ddd;
234+
color: var(--vdp-text-disabled);
179235

180236
&.highlighted {
181-
color: #accad2;
237+
color: var(--vdp-cell-highlighted-disabled-text);
182238
}
183239
}
184240
}
185241
}
186242

187243
.day-header span {
244+
color: var(--vdp-text);
188245
display: inline-block;
189246
font-size: 75%;
190-
height: 40px;
191-
line-height: 40px;
247+
height: var(--vdp-day-header-height);
248+
line-height: var(--vdp-day-header-height);
192249
padding: 0 5px;
193250
text-align: center;
194251
vertical-align: middle;
@@ -269,8 +326,10 @@
269326

270327
.vdp-datepicker__clear-button,
271328
.vdp-datepicker__calendar-button {
272-
border: none;
273-
font-style: normal;
329+
background: var(--vdp-today-bg);
330+
border: 1px solid var(--vdp-border);
331+
cursor: pointer;
332+
padding: 0.5em;
274333

275334
&.input-group-prepend,
276335
&.input-group-append {

0 commit comments

Comments
 (0)