Skip to content

Commit 3e5d13e

Browse files
BrunnerLivioLivio Brunner
BrunnerLivio
authored and
Livio Brunner
committed
feat(theme): Add dark mode
1 parent ab7d4a0 commit 3e5d13e

File tree

13 files changed

+163
-102
lines changed

13 files changed

+163
-102
lines changed

‎src/app/common/social-wrapper/social-wrapper.component.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../../scss/variables.scss';
21
@import '../../../scss/utils.scss';
32

43
.social-wrapper {
@@ -21,15 +20,15 @@
2120
position: relative;
2221

2322
&:hover {
24-
fill: $red-color;
23+
fill: var(--primary);
2524
}
2625
}
2726

2827
&:first-of-type {
2928
font-size: 20px;
3029
}
3130
&:hover {
32-
color: $red-color;
31+
color: var(--primary);
3332
}
3433
}
3534
@include media(medium) {

‎src/app/homepage/footer/footer.component.scss‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
@import '../../../scss/variables.scss';
21
@import '../../../scss/utils.scss';
32

43
:host {
54
@extend .transition;
65
@extend .box-sizing;
7-
background: $black-color;
6+
background: var(--header-background);
87
display: block;
98
padding: 40px 0;
109
margin: 0 -85px;
@@ -35,10 +34,10 @@ footer {
3534

3635
a {
3736
@extend .transition;
38-
color: $red-color;
37+
color: var(--primary);
3938
font-weight: 600;
4039
&:hover {
41-
color: $red-color;
40+
color: var(--primary);
4241
}
4342
}
4443

@@ -65,7 +64,6 @@ footer {
6564
@extend .transition;
6665
display: inline-block;
6766
vertical-align: middle;
68-
color: $silver-color;
6967
font-size: 20px;
7068
margin-left: 15px;
7169
cursor: pointer;
@@ -74,7 +72,7 @@ footer {
7472
font-size: 20px;
7573
}
7674
&:hover {
77-
color: $red-color;
75+
color: var(--primary);
7876
}
7977
}
8078

‎src/app/homepage/header/header.component.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
@import '../../../scss/variables.scss';
21
@import '../../../scss/utils.scss';
32

43
:host {
5-
background: $black-color;
4+
background: var(--header-background);
65
display: block;
76
width: 100%;
87
height: 70px;
@@ -159,7 +158,7 @@ header {
159158
&:last-of-type a {
160159
@include radius(2px);
161160
padding: 4px 6px;
162-
background: $red-color;
161+
background: var(--primary);
163162

164163
&:hover {
165164
background: #262626;
@@ -179,7 +178,7 @@ header {
179178
font-weight: 600;
180179

181180
&:hover {
182-
color: $red-color;
181+
color: var(--primary);
183182
}
184183
}
185184
@media print {
@@ -240,9 +239,9 @@ header {
240239
position: relative;
241240

242241
&:hover {
243-
color: $red-color;
242+
color: var(--primary);
244243
&::after {
245-
background: $red-color;
244+
background: var(--primary);
246245
}
247246
}
248247

@@ -347,7 +346,7 @@ header {
347346

348347
&:active,
349348
&:focus {
350-
border-bottom-color: $red-color;
349+
border-bottom-color: var(--primary);
351350
width: 190px;
352351
}
353352
}
@@ -374,7 +373,7 @@ header {
374373
&::after,
375374
&::before {
376375
content: '';
377-
background: $red-color;
376+
background: var(--primary);
378377
display: block;
379378
height: 2px;
380379
position: absolute;

‎src/app/homepage/homepage.component.scss‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import '../../scss/utils.scss';
2-
@import '../../scss/variables.scss';
32

43
.container-fluid {
54
position: relative;
@@ -58,12 +57,12 @@
5857
}
5958

6059
.page-wrapper {
61-
color: $grey-color;
60+
color: var(--color);
6261
line-height: 26px;
6362

6463
a {
6564
font-weight: 600;
66-
color: $red-color;
65+
color: var(--primary);
6766
&:hover {
6867
color: #0894e2;
6968
}
@@ -75,7 +74,7 @@
7574
h4,
7675
h5,
7776
h6 {
78-
color: $black-color;
77+
color: var(--color-1dp);
7978
}
8079
h3 {
8180
font-size: 24px;
@@ -109,7 +108,7 @@
109108
}
110109
}
111110
h5 {
112-
color: $grey-color;
111+
color: var(--color);
113112
margin-top: 5px;
114113
font-weight: 600;
115114
font-size: 16px;
@@ -126,7 +125,7 @@
126125
}
127126

128127
.sponsors-wrapper {
129-
border-top: 1px solid #e8e8e8;
128+
border-top: 1px solid var(--background-2dp);
130129
padding: 10px 0 60px;
131130
margin-top: 20px;
132131
position: relative;
@@ -137,7 +136,7 @@
137136
}
138137

139138
a {
140-
color: $red-color;
139+
color: var(--primary);
141140
font-weight: 600;
142141
&:hover {
143142
color: #0894e2;
@@ -147,11 +146,10 @@
147146
h3 {
148147
font-size: 24px;
149148
font-weight: 700;
150-
color: #1d1d1d;
151149
}
152150

153151
h4 {
154-
color: #1b2247;
152+
color: var(--color-1dp);
155153
font-weight: 600;
156154
margin: 0;
157155
font-size: 18px;
@@ -167,7 +165,7 @@
167165
line-height: 26px;
168166
font-size: 16px;
169167
font-weight: 500;
170-
color: #4e4e4e;
168+
color: var(--color);
171169
}
172170

173171
.logo-sponsor {
@@ -195,8 +193,8 @@
195193
}
196194

197195
.btn-primary {
198-
border: 2px solid $red-color;
199-
color: $red-color;
196+
border: 2px solid var(--primary);
197+
color: var(--primary);
200198
padding: 12px 20px;
201199
display: inline-block;
202200

@@ -296,7 +294,7 @@
296294
}
297295

298296
.contact-us {
299-
background: $red-color;
297+
background: var(--primary);
300298
color: #fff;
301299
padding: 20px 30px;
302300
border-radius: 3px;
@@ -360,9 +358,9 @@
360358

361359
svg {
362360
font-size: 17px;
363-
color: $black-color;
361+
color: var(--color-black);
364362
&:hover {
365-
color: $red-color;
363+
color: var(--primary);
366364
}
367365
}
368366
}
@@ -382,19 +380,19 @@
382380
.company-logo img {
383381
max-width: 130px;
384382
max-height: 90px;
385-
-webkit-filter: grayscale(100%);
386-
filter: grayscale(100%);
383+
-webkit-filter: var(--company-filter);
384+
filter: var(--company-filter);
387385
opacity: 0.5;
388386

389387
&:hover {
390-
-webkit-filter: grayscale(0%);
391-
filter: grayscale(0%);
388+
-webkit-filter: var(--company-filter-hover);
389+
filter: var(--company-filter-hover);
392390
opacity: 1;
393391
}
394392
}
395393

396394
.companies-list a {
397-
color: #404040;
395+
color: var(--color);
398396
font-size: 15px;
399397
font-weight: 400;
400398
}
@@ -447,7 +445,7 @@
447445
bottom: 20px;
448446
overflow: hidden;
449447
padding: 1em;
450-
background: #fdfdfd;
448+
background: var(--background);
451449
text-align: center;
452450
line-height: 1.5;
453451
font-size: 13px;
@@ -502,7 +500,7 @@
502500
}
503501

504502
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
505-
color: $red-color;
503+
color: var(--primary);
506504
background: #fff2f4;
507505
}
508506

‎src/app/homepage/menu/menu-item/menu-item.component.scss‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../../../scss/variables.scss';
21
@import '../../../../scss/utils.scss';
32

43
:host {
@@ -10,16 +9,16 @@ h3 {
109
@extend .transition;
1110
text-transform: uppercase;
1211
font-weight: bold;
13-
color: $black-color;
12+
color: var(--color-1dp);
1413
font-size: 15px;
1514
margin: 10px 0;
1615
&:hover {
17-
color: $red-color;
16+
color: var(--primary);
1817
}
1918
}
2019

2120
.active h3 {
22-
color: $red-color;
21+
color: var(--primary);
2322
}
2423

2524
.material-icons {
@@ -46,16 +45,16 @@ li {
4645
}
4746

4847
a {
49-
color: $black-color;
48+
color: var(--menu-color);
5049
font-size: 14px;
5150
text-decoration: none;
5251
cursor: pointer;
5352
&:hover {
54-
color: $red-color;
53+
color: var(--primary);
5554
}
5655
&.active {
5756
font-weight: 600;
58-
color: $red-color;
57+
color: var(--primary);
5958
}
6059
}
6160

@@ -70,10 +69,13 @@ li {
7069
margin: 10px 0 15px;
7170
}
7271

72+
.arrow-icon {
73+
fill: var(--color);
74+
}
7375
&.opened {
7476
.arrow-icon {
7577
@include transform(rotate(-90deg));
76-
fill: $red-color;
78+
fill: var(--primary);
7779
}
7880
}
7981
}
@@ -82,7 +84,7 @@ li {
8284
cursor: pointer;
8385
&:hover {
8486
.arrow-icon {
85-
color: $red-color;
87+
color: var(--primary);
8688
}
8789
}
8890
}
@@ -99,5 +101,5 @@ ul {
99101
}
100102

101103
.has-icon h3 {
102-
color: $red-color;
104+
color: var(--primary);
103105
}

‎src/app/homepage/menu/menu.component.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import '../../../scss/variables.scss';
21
@import '../../../scss/utils.scss';
32

43
:host {
@@ -7,7 +6,7 @@
76
@include transform(translateX(-100%));
87
padding: 90px 17px 40px 24px;
98
width: 250px;
10-
background: #f5f5f5;
9+
background: var(--menu-background);
1110
position: fixed !important;
1211
bottom: 0;
1312
top: 0;
@@ -78,7 +77,7 @@
7877

7978
.btn-support {
8079
margin-top: 20px;
81-
background: $red-color;
80+
background: var(--primary);
8281
color: #fff;
8382

8483
&:hover {

0 commit comments

Comments
 (0)