admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(UI): Light / dark mode themes and toggle utility added.

Browse Source
This commit is contained in:
teddy
2025-03-05 16:33:32 +00:00
parent 3912506f24
commit bd58bd82ed
6 changed files with 337 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="light" data-hash="home">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -16,7 +16,7 @@
GitHub Contributions Calendar (light mode default)
- Statistics under calendar do not work.
-->
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<!--
GitHub Contributions Calendar (dark mode default)
- Statistics under calendar do not work.
@@ -38,6 +38,14 @@
<li><a href="#experience">Experience</a></li>
<li><a href="#contact">Contact</a></li>
<li><div id="google_translate_element"></div></li>
<li>
<!-- <div id="theme-switch"></div> -->
<button class="theme-switch" aria-label="Toggle Dark Mode">
<img src="content/images/dark-mode-icon.webp" alt="Dark Mode" class="theme-icon dark-mode-icon">
<!-- Added with JavaScript
<img src="content/images/light-mode-icon.webp" alt="Light Mode" class="theme-icon light-mode-icon"> -->
</button>
</li>
</ul>
</nav>
@@ -248,12 +256,15 @@
<script>
// Basic implementation
// e - statistics are all 0
// GitHubCalendar(".github-calendar", "Teddy-1024");
GitHubCalendar(".github-calendar", "Teddy-1024");
// Or with responsive option enabled:
// e - statistics are all 0
// GitHubCalendar(".github-calendar", "Teddy-1024", { responsive: true });
/*
// Or with proxy option enabled:
// e - statistics are all 0
GitHubCalendar(".github-calendar", "Teddy-1024", {
responsive: true,
proxy: function(username) {
@@ -261,6 +272,7 @@
.then(response => response.text());
}
});
*/
</script>
<!--
GitHub Contributions Calendar (dark mode default)