Skip to content

Commit 48fe733

Browse files
mazino2dmazino2d
committed
Implement dark mode feature with toggle button and styles
1 parent 4fb715e commit 48fe733

File tree

8 files changed

+332
-45
lines changed

8 files changed

+332
-45
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ A clear and concise description of what the bug is.
1212

1313
**To Reproduce**
1414
Steps to reproduce the behavior:
15+
1516
1. Go to '...'
1617
2. Click on '....'
1718
3. Scroll down to '....'
@@ -24,15 +25,17 @@ A clear and concise description of what you expected to happen.
2425
If applicable, add screenshots to help explain your problem.
2526

2627
**Desktop (please complete the following information):**
27-
- OS: [e.g. iOS]
28-
- Browser [e.g. chrome, safari]
29-
- Version [e.g. 22]
28+
29+
- OS: [e.g. iOS]
30+
- Browser [e.g. chrome, safari]
31+
- Version [e.g. 22]
3032

3133
**Smartphone (please complete the following information):**
32-
- Device: [e.g. iPhone6]
33-
- OS: [e.g. iOS8.1]
34-
- Browser [e.g. stock browser, safari]
35-
- Version [e.g. 22]
34+
35+
- Device: [e.g. iPhone6]
36+
- OS: [e.g. iOS8.1]
37+
- Browser [e.g. stock browser, safari]
38+
- Version [e.g. 22]
3639

3740
**Additional context**
3841
Add any other context about the problem here.

‎.github/issue_template.md‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎CODE_OF_CONDUCT.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,13 +116,13 @@ the community.
116116

117117
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118118
version 2.0, available at
119-
https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
119+
<https://www.contributor-covenant.org/version/2/0/code_of_conduct.html>.
120120

121121
Community Impact Guidelines were inspired by [Mozilla's code of conduct
122122
enforcement ladder](https://github.com/mozilla/diversity).
123123

124124
[homepage]: https://www.contributor-covenant.org
125125

126126
For answers to common questions about this code of conduct, see the FAQ at
127-
https://www.contributor-covenant.org/faq. Translations are available at
128-
https://www.contributor-covenant.org/translations.
127+
<https://www.contributor-covenant.org/faq>. Translations are available at
128+
<https://www.contributor-covenant.org/translations>.

‎_includes/footer-scripts.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@
3636
<script src="{{ js | relative_url }}"></script>
3737
{% endfor %}
3838
{% endif %}
39+
40+
<!-- Dark Mode JavaScript -->
41+
<script src="{{ "/assets/js/darkmode.js" | relative_url }}"></script>

‎_includes/head.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,9 @@
7878
{% endfor %}
7979
{% endif %}
8080

81+
<!-- Dark Mode CSS -->
82+
<link rel="stylesheet" href="{{ "/assets/css/darkmode.css" | relative_url }}">
83+
8184
{% if site.fb_app_id %}
8285
<meta property="fb:app_id" content="{{ site.fb_app_id }}">
8386
{% endif %}

‎_includes/nav.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@
3838
</a>
3939
</li>
4040
{%- endif -%}
41+
<li class="nav-item">
42+
<button class="dark-mode-toggle" id="dark-mode-toggle" aria-label="Toggle dark mode">
43+
<i class="fas fa-moon"></i>
44+
</button>
45+
</li>
4146
</ul>
4247
</div>
4348

‎assets/css/darkmode.css‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
---
2+
layout: null
3+
---
4+
5+
/* Dark Mode Styles */
6+
7+
/* Root variables for color scheme */
8+
:root {
9+
--bg-color: {{ site.page-col | default: "#FFFFFF" }};
10+
--text-color: {{ site.text-col | default: "#404040" }};
11+
--link-color: {{ site.link-col | default: "#008AFF" }};
12+
--hover-color: {{ site.hover-col | default: "#0085A1" }};
13+
--navbar-bg: {{ site.navbar-col | default: "#EAEAEA" }};
14+
--navbar-text: {{ site.navbar-text-col | default: "#404040" }};
15+
--footer-bg: {{ site.footer-col | default: "#EAEAEA" }};
16+
--footer-text: {{ site.footer-text-col | default: "#777777" }};
17+
--border-color: #DDDDDD;
18+
--code-bg: #F5F5F5;
19+
--blockquote-color: #808080;
20+
}
21+
22+
/* Dark mode color scheme */
23+
[data-theme="dark"] {
24+
--bg-color: #1a1a1a;
25+
--text-color: #e0e0e0;
26+
--link-color: #4da3ff;
27+
--hover-color: #6bb6ff;
28+
--navbar-bg: #2d2d2d;
29+
--navbar-text: #e0e0e0;
30+
--footer-bg: #2d2d2d;
31+
--footer-text: #b0b0b0;
32+
--border-color: #404040;
33+
--code-bg: #2d2d2d;
34+
--blockquote-color: #b0b0b0;
35+
}
36+
37+
/* Apply color variables */
38+
body {
39+
background-color: var(--bg-color);
40+
color: var(--text-color);
41+
transition: background-color 0.3s ease, color 0.3s ease;
42+
}
43+
44+
a {
45+
color: var(--link-color);
46+
}
47+
48+
a:hover,
49+
a:focus {
50+
color: var(--hover-color);
51+
}
52+
53+
blockquote {
54+
color: var(--blockquote-color);
55+
}
56+
57+
/* Navbar dark mode */
58+
.navbar-custom {
59+
background-color: var(--navbar-bg);
60+
border-bottom: 1px solid var(--border-color);
61+
transition: background-color 0.3s ease;
62+
}
63+
64+
.navbar-custom .navbar-brand,
65+
.navbar-custom .navbar-nav .nav-link {
66+
color: var(--navbar-text);
67+
}
68+
69+
.navbar-custom .navbar-nav .nav-link:hover,
70+
.navbar-custom .navbar-nav .nav-link:focus {
71+
color: var(--hover-color);
72+
}
73+
74+
/* Footer dark mode */
75+
footer {
76+
background-color: var(--footer-bg);
77+
border-top: 1px solid var(--border-color);
78+
color: var(--footer-text);
79+
transition: background-color 0.3s ease;
80+
}
81+
82+
footer a {
83+
color: var(--footer-text);
84+
}
85+
86+
footer a:hover {
87+
color: var(--hover-color);
88+
}
89+
90+
/* Code blocks dark mode */
91+
[data-theme="dark"] pre,
92+
[data-theme="dark"] code {
93+
background-color: var(--code-bg);
94+
color: #f8f8f2;
95+
border-color: var(--border-color);
96+
}
97+
98+
[data-theme="dark"] .highlight {
99+
background-color: var(--code-bg);
100+
}
101+
102+
/* Post content dark mode */
103+
[data-theme="dark"] .post-preview {
104+
border-bottom: 1px solid var(--border-color);
105+
}
106+
107+
[data-theme="dark"] .blog-tags a {
108+
background-color: var(--code-bg);
109+
color: var(--text-color);
110+
border: 1px solid var(--border-color);
111+
}
112+
113+
[data-theme="dark"] .blog-tags a:hover {
114+
background-color: var(--navbar-bg);
115+
color: var(--hover-color);
116+
}
117+
118+
/* Pagination dark mode */
119+
[data-theme="dark"] .pagination .page-item .page-link {
120+
background-color: var(--navbar-bg);
121+
color: var(--text-color);
122+
border: 1px solid var(--border-color);
123+
}
124+
125+
[data-theme="dark"] .pagination .page-item.active .page-link {
126+
background-color: var(--link-color);
127+
border-color: var(--link-color);
128+
}
129+
130+
/* Table dark mode */
131+
[data-theme="dark"] table {
132+
color: var(--text-color);
133+
}
134+
135+
[data-theme="dark"] table thead {
136+
background-color: var(--navbar-bg);
137+
}
138+
139+
[data-theme="dark"] table tbody tr {
140+
border-bottom: 1px solid var(--border-color);
141+
}
142+
143+
[data-theme="dark"] table tbody tr:hover {
144+
background-color: var(--navbar-bg);
145+
}
146+
147+
/* Dark mode toggle button */
148+
.dark-mode-toggle {
149+
position: relative;
150+
width: 50px;
151+
height: 50px;
152+
cursor: pointer;
153+
display: flex;
154+
align-items: center;
155+
justify-content: center;
156+
color: var(--navbar-text);
157+
font-size: 1.5rem;
158+
transition: color 0.3s ease;
159+
border: none;
160+
background: transparent;
161+
margin-left: 1rem;
162+
}
163+
164+
.dark-mode-toggle:hover {
165+
color: var(--hover-color);
166+
}
167+
168+
.dark-mode-toggle i {
169+
transition: transform 0.3s ease;
170+
}
171+
172+
.dark-mode-toggle:hover i {
173+
transform: rotate(20deg);
174+
}
175+
176+
/* Responsive adjustments */
177+
@media (max-width: 767px) {
178+
.dark-mode-toggle {
179+
margin-left: 0;
180+
padding: 0.5rem;
181+
}
182+
}
183+
184+
/* Image adjustments for dark mode */
185+
[data-theme="dark"] img {
186+
opacity: 0.9;
187+
}
188+
189+
[data-theme="dark"] img:hover {
190+
opacity: 1;
191+
}
192+
193+
/* Search box dark mode */
194+
[data-theme="dark"] #nav-search-box {
195+
background-color: var(--navbar-bg);
196+
color: var(--text-color);
197+
border: 1px solid var(--border-color);
198+
}
199+
200+
[data-theme="dark"] #search-results-container {
201+
background-color: var(--navbar-bg);
202+
border: 1px solid var(--border-color);
203+
}
204+
205+
[data-theme="dark"] #search-results-container a {
206+
color: var(--link-color);
207+
}
208+
209+
/* Card styles for dark mode */
210+
[data-theme="dark"] .card {
211+
background-color: var(--navbar-bg);
212+
border: 1px solid var(--border-color);
213+
}
214+
215+
/* Dropdown menu dark mode */
216+
[data-theme="dark"] .dropdown-menu {
217+
background-color: var(--navbar-bg);
218+
border: 1px solid var(--border-color);
219+
}
220+
221+
[data-theme="dark"] .dropdown-item {
222+
color: var(--text-color);
223+
}
224+
225+
[data-theme="dark"] .dropdown-item:hover {
226+
background-color: var(--code-bg);
227+
color: var(--hover-color);
228+
}
229+
230+
/* Smooth transitions for theme switching */
231+
* {
232+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
233+
}
234+
235+
/* Preserve syntax highlighting colors in dark mode */
236+
[data-theme="dark"] .highlight .c { color: #6a9955; } /* Comment */
237+
[data-theme="dark"] .highlight .k { color: #569cd6; } /* Keyword */
238+
[data-theme="dark"] .highlight .s { color: #ce9178; } /* String */
239+
[data-theme="dark"] .highlight .n { color: #9cdcfe; } /* Name */
240+
[data-theme="dark"] .highlight .o { color: #d4d4d4; } /* Operator */
241+
[data-theme="dark"] .highlight .m { color: #b5cea8; } /* Number */

0 commit comments

Comments
 (0)