Skip to content

Commit f71094a

Browse files
vishwa35vishwa35
committed
colors
1 parent 228d950 commit f71094a

26 files changed

+200
-56
lines changed

‎assets/scss/overrides.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
// The following variables can be overridden
22

3-
// The primary accent color can take any css color property, including hex, named props, rgba etc.
4-
// $primary:
3+
// The colors can take any css color property, including hex, named props, rgba etc.
4+
5+
// $themes: (
6+
// newTheme: (
7+
// text: #hex,
8+
// ...
9+
// ),
10+
// );
11+
12+

‎assets/scss/pages/about.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,25 @@
3030
}
3131

3232
.fancy {
33-
color: $primary;
33+
@include theme() {
34+
color: theme-get('accent');
35+
}
3436
}
3537

3638
.handle {
3739
display: inline-block;
3840
margin-top: 0.275em;
39-
color: $grey;
41+
@include theme() {
42+
color: theme-get('neutral');
43+
}
4044
letter-spacing: 0.5px;
4145
}
4246

4347
.writing {
48+
@include theme() {
49+
color: theme-get('accent');
50+
}
4451
text-decoration: none;
45-
color: $primary;
4652
}
4753

4854
/* overrides */

‎assets/scss/pages/post.scss‎

Lines changed: 51 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,17 @@ $tocBreakpoint: 1024px;
2828
text-decoration: none;
2929
position: absolute;
3030
left: -1rem;
31-
color: $grey;
31+
@include theme() {
32+
color: theme-get('neutral');
33+
}
3234
font-size: 1.2rem;
3335
font-weight: 400;
3436
}
3537

3638
.anchor:hover {
37-
color: $darkGrey;
39+
@include theme() {
40+
color: theme-get('light-text');
41+
}
3842
}
3943
}
4044

@@ -44,7 +48,9 @@ $tocBreakpoint: 1024px;
4448
font-size: 1rem;
4549

4650
a {
47-
color: $darkGrey;
51+
@include theme() {
52+
color: theme-get('light-text');
53+
}
4854
text-decoration: underline;
4955
}
5056
}
@@ -63,7 +69,9 @@ $tocBreakpoint: 1024px;
6369
}
6470

6571
.post__date {
66-
color: $grey;
72+
@include theme() {
73+
color: theme-get('neutral');
74+
}
6775
font-size: 0.8rem;
6876
}
6977

@@ -128,12 +136,18 @@ $tocBreakpoint: 1024px;
128136
text-decoration: none;
129137
padding: 0.2em 0.4em;
130138
border-radius: 3px;
131-
background: lighten($primary, 41%);
132-
color: $primary;
139+
@include theme() {
140+
background: lighten(theme-get('accent'), 41%);;
141+
}
142+
@include theme() {
143+
color: theme-get('accent');
144+
}
133145
font-size: 0.8rem;
134146

135147
&:hover {
136-
background: lighten($primary, 38%);
148+
@include theme() {
149+
background: lighten(theme-get('accent'), 38%);
150+
}
137151
}
138152
}
139153

@@ -182,24 +196,32 @@ $tocBreakpoint: 1024px;
182196
}
183197

184198
.pagination__label {
185-
color: $grey;
199+
@include theme() {
200+
color: theme-get('neutral');
201+
}
186202
font-size: 0.8rem;
187203
}
188204

189205
.pagination__title {
190-
color: $black;
206+
@include theme() {
207+
color: theme-get('text');
208+
}
191209
font-weight: 700;
192210
margin-top: 0.25rem;
193211
}
194212

195213
footer {
196214
text-align: center;
197215
padding: 0 1.5rem;
198-
background: $white;
216+
@include theme() {
217+
background: theme-get('bg');
218+
}
199219

200220
p {
201221
margin-top: 1rem; // reduce margin top due to social icons' padding
202-
color: $grey;
222+
@include theme() {
223+
color: theme-get('neutral');
224+
}
203225
font-size: 0.65rem;
204226
}
205227
}
@@ -214,12 +236,23 @@ footer {
214236

215237
&::before {
216238
content: "-";
217-
color: $darkGrey;
239+
@include theme() {
240+
color: theme-get('light-text');
241+
}
218242
position: absolute;
219243
margin-left: -15px;
220244
}
221245
}
222246
}
247+
248+
a[href] {
249+
@include theme() {
250+
color: theme-get('accent-text');
251+
&:visited {
252+
color: theme-get('accent-bg')
253+
}
254+
}
255+
}
223256
}
224257

225258
.twitter-tweet.twitter-tweet-rendered {
@@ -232,12 +265,16 @@ table {
232265
border-spacing: 0;
233266

234267
thead {
235-
background: $lightGrey;
268+
@include theme() {
269+
background: theme-get('dark-bg');
270+
}
236271
}
237272

238273
th,
239274
td {
240275
padding: 0.5em 1em;
241-
border: 1px double $greyTableBorder;
276+
@include theme() {
277+
border: 1px double theme-get('neutral-table-border');
278+
}
242279
}
243280
}

‎assets/scss/pages/posts.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@
3636

3737
.tag__link {
3838
text-decoration: none;
39-
color: $grey;
4039
font-size: 0.9rem;
4140

4241
&::before {
@@ -45,8 +44,11 @@
4544
padding-right: 1px;
4645
}
4746

48-
&:hover {
49-
color: $darkGrey;
47+
@include theme() {
48+
color: theme-get('neutral');
49+
&:hover {
50+
color: theme-get('light-text');
51+
}
5052
}
5153
}
5254

‎assets/scss/pages/tags.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88

99
a,
1010
.separator {
11-
color: $grey;
11+
@include theme() {
12+
color: theme-get('neutral');
13+
}
1214
font-size: 1.5rem;
1315
}
1416

‎assets/scss/partials/_burger.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@
55
padding: 0 1.5rem;
66
position: fixed;
77
width: 100%;
8-
background: $white;
8+
@include theme() {
9+
background: theme-get('bg');
10+
}
911
z-index: 2;
1012

1113
@media screen and (min-width: $medium) {
@@ -24,7 +26,9 @@
2426
position: absolute;
2527
width: $meatWidth;
2628
height: $meatHeight;
27-
background: $black;
29+
@include theme() {
30+
background: theme-get('text');
31+
}
2832
top: calc(50% - #{$meatHeight} / 2);
2933
left: calc(50% - #{$meatWidth} / 2);
3034
transition: all 150ms ease-in;

‎assets/scss/partials/_nav.scss‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
display: flex;
77
justify-content: center;
88
align-items: center;
9-
background: $white;
9+
@include theme() {
10+
background: theme-get('bg');
11+
}
1012
visibility: hidden;
1113
z-index: 1;
1214

@@ -64,16 +66,22 @@
6466
}
6567

6668
.nav__list a {
67-
color: $grey;
69+
@include theme() {
70+
color: theme-get('neutral');
71+
}
6872
text-decoration: none;
6973
font-size: 2em;
7074

7175
&.active {
72-
color: $black;
76+
@include theme() {
77+
color: theme-get('text');
78+
}
7379
}
7480

7581
&:hover {
76-
color: $black;
82+
@include theme() {
83+
color: theme-get('text');
84+
}
7785
}
7886

7987
@media screen and (min-width: $medium) {

‎assets/scss/partials/_post-list.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,16 @@
2323
font-weight: 500;
2424

2525
a {
26-
color: $black;
26+
@include theme() {
27+
color: theme-get('text');
28+
}
2729
text-decoration: none;
2830
}
2931
}
3032

3133
.post__date {
32-
color: $grey;
34+
@include theme() {
35+
color: theme-get('neutral');
36+
}
3337
font-size: 0.8rem;
3438
}

‎assets/scss/partials/_reset.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
html,
22
body {
3-
background-color: $white;
4-
color: $black;
3+
@include theme() {
4+
background-color: theme-get('bg');
5+
color: theme-get('text');
6+
}
57
height: 100%;
68
}
79

‎assets/scss/partials/_social-icons.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,5 +15,8 @@
1515
height: 1.4rem;
1616
background-size: contain;
1717
background-repeat: no-repeat;
18+
@include theme() {
19+
color: theme-get('text');
20+
}
1821
}
1922
}

0 commit comments

Comments
 (0)