Skip to content

Commit aab2022

Browse files
mhughes2012sumn2u
mhughes2012
authored and
sumn2u
committed
feat: add dark mode support across website and homepage
1 parent 2aa91d6 commit aab2022

29 files changed

Lines changed: 486 additions & 0 deletions

File tree

‎_layouts/layout.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,25 @@
1818
{% endfor %}
1919
{% endblock %}
2020
<link rel="stylesheet" href="/website/copy-code.css">
21+
<link rel="stylesheet" href="/website/dark-mode.css">
2122
{% block head %}{% endblock %}
2223
</head>
2324
<body>
25+
<div class="book-header" role="navigation">
26+
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
27+
<span class="icon-sun" aria-hidden="true">
28+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
29+
<circle cx="12" cy="12" r="5"></circle>
30+
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
31+
</svg>
32+
</span>
33+
<span class="icon-moon" aria-hidden="true">
34+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
35+
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
36+
</svg>
37+
</span>
38+
</button>
39+
</div>
2440
{% block body %}{% endblock %}
2541
{% block javascript %}{% endblock %}
2642
</body>

‎_layouts/website/layout.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="shortcut icon" href="{{ "images/favicon.ico"|resolveAsset }}" type="image/x-icon">
1111
<meta property="og:image" content="https://github-production-user-asset-6210df.s3.amazonaws.com/80192140/277288453-4e65df60-ee6d-41af-8911-931e7f43313c.png" />
1212
<meta property="twitter:image" content="https://github-production-user-asset-6210df.s3.amazonaws.com/80192140/277288453-4e65df60-ee6d-41af-8911-931e7f43313c.png" />
13+
<script src="/website/dark-mode.js"></script>
1314
{% endblock %}
1415

1516
{% block style %}

‎cn/_layouts/layout.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
{% endfor %}
1919
{% endblock %}
2020
<link rel="stylesheet" href="/website/copy-code.css">
21+
<link rel="stylesheet" href="/website/dark-mode.css">
2122
{% block head %}{% endblock %}
2223
</head>
2324
<body>

‎cn/_layouts/website/header.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,18 @@ <h1>
99
<i class="fa fa-circle-o-notch fa-spin"></i>
1010
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
1111
</h1>
12+
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
13+
<span class="icon-sun" aria-hidden="true">
14+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
15+
<circle cx="12" cy="12" r="5"></circle>
16+
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
17+
</svg>
18+
</span>
19+
<span class="icon-moon" aria-hidden="true">
20+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
21+
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
22+
</svg>
23+
</span>
24+
</button>
1225
</div>
1326
{% endblock %}

‎cn/_layouts/website/page.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,5 +125,6 @@
125125
});
126126
</script>
127127
<script src="/website/copy-code.js"></script>
128+
<script src="/website/dark-mode.js"></script>
128129
</div>
129130
{% endblock %}

‎de/_layouts/layout.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
{% endfor %}
1919
{% endblock %}
2020
<link rel="stylesheet" href="/website/copy-code.css">
21+
<link rel="stylesheet" href="/website/dark-mode.css">
2122
{% block head %}{% endblock %}
2223
</head>
2324
<body>

‎de/_layouts/website/header.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,18 @@ <h1>
99
<i class="fa fa-circle-o-notch fa-spin"></i>
1010
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
1111
</h1>
12+
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
13+
<span class="icon-sun" aria-hidden="true">
14+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
15+
<circle cx="12" cy="12" r="5"></circle>
16+
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
17+
</svg>
18+
</span>
19+
<span class="icon-moon" aria-hidden="true">
20+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
21+
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
22+
</svg>
23+
</span>
24+
</button>
1225
</div>
1326
{% endblock %}

‎de/_layouts/website/page.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,5 +125,6 @@
125125
});
126126
</script>
127127
<script src="/website/copy-code.js"></script>
128+
<script src="/website/dark-mode.js"></script>
128129
</div>
129130
{% endblock %}

‎en/_layouts/layout.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
{% endfor %}
1919
{% endblock %}
2020
<link rel="stylesheet" href="/website/copy-code.css">
21+
<link rel="stylesheet" href="/website/dark-mode.css">
2122
{% block head %}{% endblock %}
2223
</head>
2324
<body>

‎en/_layouts/website/header.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,18 @@ <h1>
99
<i class="fa fa-circle-o-notch fa-spin"></i>
1010
<a href="{{ "/"|resolveFile }}" >{{ page.title }}</a>
1111
</h1>
12+
<button id="dark-mode-toggle" aria-label="Toggle Dark Mode" class="btn">
13+
<span class="icon-sun" aria-hidden="true">
14+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
15+
<circle cx="12" cy="12" r="5"></circle>
16+
<path d="M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"></path>
17+
</svg>
18+
</span>
19+
<span class="icon-moon" aria-hidden="true">
20+
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
21+
<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"></path>
22+
</svg>
23+
</span>
24+
</button>
1225
</div>
1326
{% endblock %}

0 commit comments

Comments
 (0)