Skip to content

Commit 56b98ce

Browse files
dotcomakidotcomaki
authored
Merge pull request #5 from dotcomaki/main
Add dark mode theme toggle and custom styles
2 parents f131413 + 28068a1 commit 56b98ce

5 files changed

Lines changed: 112 additions & 1 deletion

File tree

‎_includes/head_custom.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<style>
2+
.theme-toggle {
3+
position: fixed;
4+
top: 1rem;
5+
right: 1rem;
6+
z-index: 1000;
7+
width: 2.25rem;
8+
height: 2.25rem;
9+
border-radius: 50%;
10+
border: none;
11+
cursor: pointer;
12+
padding: 0;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
background-color: rgba(128, 128, 128, 0.15);
17+
color: inherit;
18+
transition: background-color 0.2s, transform 0.2s;
19+
}
20+
.theme-toggle svg {
21+
width: 1.1rem;
22+
height: 1.1rem;
23+
fill: currentColor;
24+
}
25+
.theme-toggle:hover {
26+
background-color: rgba(128, 128, 128, 0.3);
27+
transform: scale(1.1);
28+
}
29+
.theme-toggle:active {
30+
transform: scale(0.95);
31+
}
32+
</style>
33+
<script>
34+
(function() {
35+
var saved = localStorage.getItem('theme');
36+
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
37+
if (saved === 'codeday-dark' || (!saved && prefersDark)) {
38+
var link = document.querySelector('link[rel="stylesheet"]');
39+
if (link) {
40+
link.href = link.href.replace(/just-the-docs-[^.]+/, 'just-the-docs-codeday-dark');
41+
window.scrollTo(0, 0);
42+
document.addEventListener('DOMContentLoaded', function() { window.scrollTo(0, 0); });
43+
}
44+
}
45+
})();
46+
47+
document.addEventListener('DOMContentLoaded', function() {
48+
var sunSvg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
49+
var moonSvg = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
50+
51+
var btn = document.createElement('button');
52+
btn.className = 'theme-toggle';
53+
btn.setAttribute('aria-label', 'Toggle dark mode');
54+
document.body.appendChild(btn);
55+
56+
function setTheme(theme) {
57+
var link = document.querySelector('link[rel="stylesheet"]');
58+
if (link) link.setAttribute('href', link.getAttribute('href').replace(/just-the-docs-[^.]+/, 'just-the-docs-' + theme));
59+
}
60+
function isDark() {
61+
var saved = localStorage.getItem('theme');
62+
return saved === 'codeday-dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
63+
}
64+
function updateBtn() {
65+
var dark = isDark();
66+
btn.innerHTML = dark ? sunSvg : moonSvg;
67+
var logo = document.querySelector('.site-logo');
68+
if (logo) logo.style.backgroundImage = dark ? 'url("/assets/logo-text/white.svg")' : 'url("/assets/logo-text/color.svg")';
69+
}
70+
btn.addEventListener('click', function() {
71+
var toDark = !isDark();
72+
var newTheme = toDark ? 'codeday-dark' : 'codeday-light';
73+
setTheme(newTheme);
74+
localStorage.setItem('theme', newTheme);
75+
updateBtn();
76+
});
77+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
78+
if (!localStorage.getItem('theme')) {
79+
setTheme(e.matches ? 'codeday-dark' : 'codeday-light');
80+
updateBtn();
81+
}
82+
});
83+
updateBtn();
84+
});
85+
</script>

‎_sass/color_schemes/codeday-dark.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
$color-scheme: dark;
2+
3+
$body-font-family: "Sofia Pro";
4+
$mono-font-family: "Fira Code";
5+
6+
$body-background-color: $modes-dark-bg;
7+
$body-heading-color: $modes-dark-text;
8+
$body-text-color: $modes-dark-text;
9+
$link-color: $gray-400;
10+
$nav-child-link-color: $gray-400;
11+
$sidebar-color: $gray-900;
12+
$base-button-color: $modes-dark-placeholder;
13+
$btn-primary-color: $blue-200;
14+
$code-background-color: $modes-dark-border;
15+
$code-linenumber-color: $modes-dark-textLight;
16+
$feedback-color: $gray-800;
17+
$table-background-color: $modes-dark-placeholder;
18+
$search-background-color: $modes-dark-placeholder;
19+
$search-result-preview-color: $modes-dark-textLight;
20+
$border-color: $modes-dark-border;

‎assets/css/just-the-docs-codeday-dark.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
---
3+
{% include css/just-the-docs.scss.liquid color_scheme="codeday-dark" %}

‎assets/css/just-the-docs-codeday-light.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
---
3+
{% include css/just-the-docs.scss.liquid color_scheme="codeday-light" %}

‎mentor-training/when2meet-guide.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ This guide walks you through the entire process - from creating a poll to confir
1717
Follow these steps to set up a new availability poll for your team.
1818

1919
1. **Go to [when2meet.com](https://www.when2meet.com/).** No login or account required.
20-
2. **Name your event.** Use something descriptive like `{{Your Name}} - CodeDay Labs Weekly Check-in` so mentees know exactly what it is.
20+
2. **Name your event.** Use something descriptive like `Your Name - CodeDay Labs Weekly Check-in` so mentees know exactly what it is.
2121
3. **Select candidate dates.** Click the dates you want to offer. For a recurring weekly meeting, choose the same days across 1-2 weeks (e.g. Mon-Fri of the upcoming two weeks).
2222
4. **Set the time range.** Use the **Earliest** and **Latest** dropdowns to set a daily window. A window of 9 AM - 7 PM captures most time zones.
2323
5. **Choose your time zone.** Select your local time zone. When2Meet will automatically display times in each respondent's own time zone when they fill it in.

0 commit comments

Comments
 (0)