Skip to content

Commit e4ef418

Browse files
a2937a2937
committed
cleaner implementation
1 parent b52ab7e commit e4ef418

File tree

9 files changed

+125
-41
lines changed

9 files changed

+125
-41
lines changed

‎config/i18n/locales/english/links.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,12 @@
1313
"support": "https://www.freecodecamp.org/news/support/",
1414
"honesty": "https://www.freecodecamp.org/news/academic-honesty-policy/",
1515
"coc": "https://www.freecodecamp.org/news/code-of-conduct/"
16+
},
17+
"nav": {
18+
"contribute": "https://contribute.freecodecamp.org/#/",
19+
"forum": "https://forum.freecodecamp.org/",
20+
"learn": "https://www.freecodecamp.org/learn",
21+
"news": "https://freecodecamp.org/news/",
22+
"podcast": "https://freecodecamp.libsyn.com/"
1623
}
1724
}

‎config/i18n/locales/english/translations.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
"buttons": {
33
"forum": "Forum",
44
"donate": "Donate",
5-
"load-more-articles": "Load More Articles"
5+
"menu": "Menu",
6+
"news": "News",
7+
"curriculum": "Curriculum",
8+
"load-more-articles": "Load More Articles",
9+
"toggle-dark-mode": "Night Mode"
610
},
711
"search": {
812
"label": "Search",
@@ -94,5 +98,8 @@
9498
"audio": "audio",
9599
"video": "video"
96100
},
97-
"ad-text": "Advertisement"
101+
"ad-text": "Advertisement",
102+
"aria": {
103+
"opens-new-window": "Opens in new window"
104+
}
98105
}

‎cypress/e2e/english/landing/landing.cy.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ const selectors = {
1010
avatar: "[data-test-label='avatar']",
1111
siteNavLogo: "[data-test-label='site-nav-logo']",
1212
postPublishedTime: "[data-test-label='post-published-time']",
13-
banner: "[data-test-label='banner']"
13+
banner: "[data-test-label='banner']",
14+
darkModeButton: "[data-test-label='dark-mode-button']"
1415
};
1516

1617
describe('Landing (Hashnode sourced)', () => {
@@ -35,6 +36,31 @@ describe('Landing (Hashnode sourced)', () => {
3536
);
3637
});
3738

39+
const visit = darkAppearance =>
40+
cy.visit('/', {
41+
onBeforeLoad(win) {
42+
cy.stub(win, 'matchMedia')
43+
.withArgs('(prefers-color-scheme: dark)')
44+
.returns({
45+
matches: darkAppearance
46+
});
47+
}
48+
});
49+
50+
it('The dark mode button should be able to change the theme to dark mode from light mode', function () {
51+
visit(false);
52+
cy.get(selectors.darkModeButton).click();
53+
54+
cy.get('body', { timeout: 1000 }).should('have.class', 'dark-mode');
55+
});
56+
57+
it('The dark mode button should be able to change the theme to light mode from dark mode', function () {
58+
visit(true);
59+
cy.get(selectors.darkModeButton).click();
60+
61+
cy.get('body', { timeout: 1000 }).should('not.have.class', 'dark-mode');
62+
});
63+
3864
// Because all templates readers see use `default.njk` as a base,
3965
// we can test the favicon here
4066
it('should have a favicon', () => {

‎src/_includes/assets/css/global.css

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,3 @@
1-
/* Variables
2-
/* ---------------------------------------------------------- */
3-
4-
:root {
5-
/* Colours */
6-
--dark-blue: #002ead;
7-
--theme-color: #0a0a23;
8-
--gray90: #0a0a23;
9-
--gray85: #1b1b32;
10-
--gray80: #2a2a40;
11-
--gray75: #3b3b4f;
12-
--gray45: #858591;
13-
--gray15: #d0d0d5;
14-
--gray10: #dfdfe2;
15-
--gray05: #eeeef0;
16-
--gray00: #fff;
17-
--header-height: 38px;
18-
--blue-dark: #002ead;
19-
/* Font */
20-
--font-family-sans-serif: 'Lato', sans-serif;
21-
}
22-
231
/* Japanese Font */
242
:root:lang(ja) {
253
--font-family-sans-serif: 'Lato', 'Noto Sans JP', sans-serif;

‎src/_includes/assets/css/screen.css

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ on every page through _includes/layouts/default.njk
3434
/* ---------------------------------------------------------- */
3535

3636
body {
37-
background: #fff;
37+
background: var(--primary-background);
3838
}
3939

4040
.img {
@@ -311,7 +311,7 @@ a.nav-forum {
311311
border-width: 3px;
312312
border-color: #f1a02a;
313313
background-image: none;
314-
color: var(--theme-color);
314+
color: var(--gray90);
315315
text-decoration: none;
316316
}
317317

@@ -374,7 +374,7 @@ a.nav-forum {
374374
.rss-button svg {
375375
margin-bottom: 1px;
376376
height: 2.1rem;
377-
fill: #fff;
377+
fill: var(--primary-background);
378378
}
379379

380380
@media (max-width: 999px) {
@@ -438,7 +438,7 @@ a.nav-forum {
438438
overflow: hidden;
439439
margin: 0 20px 50px;
440440
min-height: 100px;
441-
background: #fff center center;
441+
background: var(--primary-background) center center;
442442
background-size: cover;
443443
}
444444

@@ -470,7 +470,7 @@ a.nav-forum {
470470

471471
.post-card-tags a {
472472
margin-bottom: 1.3rem;
473-
color: var(--gray75);
473+
color: var(--quaternary-color);
474474
font-size: 1.5rem;
475475
line-height: 1.15em;
476476
font-weight: 500;
@@ -484,7 +484,7 @@ a.nav-forum {
484484
}
485485

486486
.post-card-title a {
487-
color: var(--gray90);
487+
color: var(--primary-color);
488488
}
489489

490490
.post-card-content {
@@ -579,7 +579,7 @@ a.nav-forum {
579579
margin: 0 -5px;
580580
width: 34px;
581581
height: 34px;
582-
border: #fff 2px solid;
582+
border: var(--primary-background) 2px solid;
583583
}
584584

585585
.moving-avatar {
@@ -588,7 +588,7 @@ a.nav-forum {
588588
margin: 0 -6px;
589589
width: 56px;
590590
height: 56px;
591-
border: #fff 2px solid;
591+
border: var(--primary-background) 2px solid;
592592
transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
593593
}
594594

@@ -610,7 +610,7 @@ a.nav-forum {
610610
.reading-time {
611611
flex-shrink: 0;
612612
margin-left: 20px;
613-
color: var(--gray75);
613+
color: var(--quaternary-color);
614614
font-size: 1.2rem;
615615
line-height: 20px;
616616
font-weight: 500;
@@ -718,7 +718,7 @@ make sure this only happens on large viewports / desktop-ish devices.
718718
.post-template.site-main,
719719
.page-template.site-main {
720720
padding-bottom: 4vw;
721-
background: #fff;
721+
background: var(--primary-background);
722722
}
723723

724724
.post-full {
@@ -1957,8 +1957,8 @@ p:has(mjx-container.MathJax) {
19571957
/* ---------------------------------------------------------- */
19581958

19591959
.site-footer {
1960-
color: var(--gray85);
1961-
background: var(--gray05);
1960+
color: var(--secondary-color);
1961+
background: var(--primary-background);
19621962
line-height: 1.6;
19631963
padding: 40px 15px;
19641964
font-size: 16px;
@@ -1988,7 +1988,7 @@ p:has(mjx-container.MathJax) {
19881988
}
19891989

19901990
.site-footer a {
1991-
color: var(--gray85);
1991+
color: var(--secondary-color);
19921992
text-decoration: none;
19931993
padding: 2px;
19941994
}
@@ -2177,7 +2177,7 @@ p.footer-donation a:hover {
21772177
align-items: center;
21782178
display: flex;
21792179
border: 2px solid #0a0a23;
2180-
background: #eeeef0;
2180+
background: var(--secondary-background);
21812181
color: #0a0a23;
21822182
}
21832183

‎src/_includes/assets/css/variables.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
:root {
2+
/* Colours */
3+
--dark-blue: #002ead;
4+
--theme-color: #0a0a23;
5+
--gray90: #0a0a23;
6+
--gray85: #1b1b32;
7+
--gray80: #2a2a40;
8+
--gray75: #3b3b4f;
9+
--gray45: #858591;
10+
--gray15: #d0d0d5;
11+
--gray10: #dfdfe2;
12+
--gray05: #eeeef0;
13+
--gray00: #fff;
14+
--header-height: 38px;
15+
--blue-dark: #002ead;
16+
/* Font */
17+
--font-family-sans-serif: 'Lato', sans-serif;
18+
}
19+
20+
body {
21+
--primary-color: var(--gray90);
22+
--secondary-color: var(--gray85);
23+
--tertiary-color: var(--gray80);
24+
--quaternary-color: var(--gray75);
25+
--quaternary-background: var(--gray15);
26+
--tertiary-background: var(--gray10);
27+
--secondary-background: var(--gray05);
28+
--primary-background: var(--gray00);
29+
}
30+
31+
body.dark-mode {
32+
--primary-color: var(--gray00);
33+
--secondary-color: var(--gray05);
34+
--tertiary-color: var(--gray10);
35+
--quaternary-color: var(--gray15);
36+
--quaternary-background: var(--gray75);
37+
--tertiary-background: var(--gray80);
38+
--secondary-background: var(--gray85);
39+
--primary-background: var(--gray90);
40+
}

‎src/_includes/assets/js/dark-mode.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
function loadDarkModePreference() {
2+
const theme = localStorage.getItem('theme');
3+
if (
4+
window.matchMedia('(prefers-color-scheme: dark)')?.matches ||
5+
theme == 'dark' ||
6+
theme == 'night'
7+
) {
8+
document.body.classList.add('dark-mode');
9+
}
10+
}
11+
12+
document.addEventListener('DOMContentLoaded', () => {
13+
loadDarkModePreference();
14+
document
15+
.getElementById('toggle-dark-mode')
16+
.addEventListener('click', function () {
17+
document.body.classList.toggle('dark-mode');
18+
});
19+
});

‎src/_includes/layouts/default.njk

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
{# News Theme Styles #}
2727
<link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="{% cacheBuster '/assets/css/global.css' %}" />
28+
<link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/variables.css' %}" />
2829
<link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/screen.css' %}" />
2930
<link rel="stylesheet" type="text/css" href="{% cacheBuster '/assets/css/search-bar.css' %}" />
3031

@@ -47,6 +48,7 @@
4748
{% include "assets/js/search-bar.js" %}
4849
{% include "assets/js/client-dayjs.js" %}
4950
{% include "assets/js/cookie-checker.js" %}
51+
{% include "assets/js/dark-mode.js" %}
5052
{% endset %}
5153
<script>{{ js | jsMin | safe }}</script>
5254

@@ -61,7 +63,7 @@
6163
{% if secrets.eleventyEnv === 'prod' %}
6264
{% include "partials/gtm-head.njk" %}
6365
{% endif %}
64-
66+
6567
{# Dynamically load MathJax script #}
6668
{% block mathjax %}
6769
{% endblock %}

‎src/_includes/partials/site-nav.njk

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<nav class="site-nav nav-padding">
1+
<nav class="site-nav nav-padding universal-nav">
22
<div class="site-nav-left">
33
{% include "partials/search-bar.njk" %}
44
</div>
@@ -23,6 +23,11 @@
2323
target="_blank"
2424
data-test-label="donate-button"
2525
>{% t 'buttons.donate' %}</a>
26+
<a
27+
class="toggle-button-nav"
28+
id="toggle-dark-mode"
29+
data-test-label="dark-mode-button"
30+
>{% t 'buttons.toggle-dark-mode' %}</a>
2631
</div>
2732
</div>
2833
</nav>

0 commit comments

Comments
 (0)