From bd58bd82ed9b7b46a77202a374ba963ac1ade6f2 Mon Sep 17 00:00:00 2001
From: teddy <edward.middletonsmith@gmail.com>
Date: Wed, 5 Mar 2025 16:33:32 +0000
Subject: [PATCH] Feat(UI): Light / dark mode themes and toggle utility added.

---
 content/images/dark-mode-icon.webp  | Bin 0 -> 9036 bytes
 content/images/light-mode-icon.svg  |  28 +++++
 content/images/light-mode-icon.webp | Bin 0 -> 6622 bytes
 index.html                          |  18 ++-
 scripts/scripts.js                  | 155 +++++++++++++++++++++--
 styles/styles.css                   | 187 ++++++++++++++++++++++------
 6 files changed, 337 insertions(+), 51 deletions(-)
 create mode 100644 content/images/dark-mode-icon.webp
 create mode 100644 content/images/light-mode-icon.svg
 create mode 100644 content/images/light-mode-icon.webp

diff --git a/content/images/dark-mode-icon.webp b/content/images/dark-mode-icon.webp
new file mode 100644
index 0000000000000000000000000000000000000000..1cb37e31e79727227bfa3e5c2e6693be0ebe90c4
GIT binary patch
literal 9036
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

literal 0
HcmV?d00001

diff --git a/content/images/light-mode-icon.svg b/content/images/light-mode-icon.svg
new file mode 100644
index 0000000..9dc7b2d
--- /dev/null
+++ b/content/images/light-mode-icon.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <!-- Defaults to black background but can be styled with CSS -->
+  <rect width="24" height="24" fill="black" style="fill: var(--page-background-colour, black);" />
+  
+  <!-- Sun icon with transparent fill to reveal what's behind the SVG -->
+  <mask id="sun-mask">
+    <!-- The white parts of this mask will be the visible parts -->
+    <rect width="24" height="24" fill="white"/>
+    
+    <!-- Sun circle -->
+    <circle cx="12" cy="12" r="4" fill="black"/>
+    
+    <!-- Sun rays -->
+    <rect x="11" y="4" width="2" height="3" fill="black"/>
+    <rect x="11" y="17" width="2" height="3" fill="black"/>
+    <rect x="4" y="11" width="3" height="2" fill="black"/>
+    <rect x="17" y="11" width="3" height="2" fill="black"/>
+    
+    <!-- Diagonal rays -->
+    <rect x="6.1" y="6.1" width="2" height="3" transform="rotate(-45 7.1 7.6)" fill="black"/>
+    <rect x="15.9" y="15.9" width="2" height="3" transform="rotate(-45 16.9 17.4)" fill="black"/>
+    <rect x="15.9" y="6.1" width="2" height="3" transform="rotate(45 16.9 7.6)" fill="black"/>
+    <rect x="6.1" y="15.9" width="2" height="3" transform="rotate(45 7.1 17.4)" fill="black"/>
+  </mask>
+  
+  <!-- This is the transparent part that reveals what's behind the SVG -->
+  <rect width="24" height="24" fill="transparent" mask="url(#sun-mask)"/>
+</svg>
\ No newline at end of file
diff --git a/content/images/light-mode-icon.webp b/content/images/light-mode-icon.webp
new file mode 100644
index 0000000000000000000000000000000000000000..60f057679b17ec6fa1fc88247de6e4580fc10a9a
GIT binary patch
literal 6622
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

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 8b9f2f3..707b63d 100644
--- a/index.html
+++ b/index.html
@@ -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)
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 5dc203b..42d2580 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -1,16 +1,60 @@
 var activeFlag = 'active';
+var darkThemeFlag = 'dark';
+var darkThemeIconFlag = 'dark-mode-icon';
+var hashAttribute = 'data-hash';
+var homePageHash = 'home';
+var lightThemeFlag = 'light';
+var lightThemeIconFlag = 'light-mode-icon';
+var themeAttribute = 'data-theme';
+var themeFlag = 'theme';
+var themeIconFlag = 'theme-icon';
+var themeSwitchFlag = 'theme-switch';
 
 function hookupPage() {
-    console.log("Hooking up home page...");
+    hookupPageLocalStorage();
     hookupNav();
+    hookupThemeSwitch();
     hookupScroll();
     // hookupProjectThumbnails();
     hookupProjectDetailButtons();
 }
+function hookupPageLocalStorage() {
+    let pageLocalStorage = getPageLocalStorage();
+    // Colour theme
+    let theme = pageLocalStorage[themeFlag];
+    if (!theme) {
+        let prefersDark = window.matchMedia(`(prefers-color-scheme: ${darkThemeFlag})`).matches;
+        theme = prefersDark ? darkThemeFlag : lightThemeFlag;
+    }
+    setPageTheme(theme);
+}
+function getPageLocalStorage() {
+    let pageHash = getPageHash();
+    let pageLocalStorage = localStorage.getItem(pageHash);
+    let decodedPageLocalStorage;
+    if (pageLocalStorage) {
+        decodedPageLocalStorage = JSON.parse(pageLocalStorage);
+    }
+    else {
+        decodedPageLocalStorage = {};
+    }
+    return decodedPageLocalStorage;
+}
+function getPageHash() {
+    return document.documentElement.getAttribute(hashAttribute) || homePageHash;
+}
+function setPageTheme(theme) {
+    document.documentElement.setAttribute(themeAttribute, theme);
+    let pageLocalStorage = getPageLocalStorage();
+    pageLocalStorage[themeFlag] = theme;
+    setPageLocalStorage(pageLocalStorage);
+}
+function setPageLocalStorage(pageLocalStorage) {
+    let pageHash = getPageHash();
+    localStorage.setItem(pageHash, JSON.stringify(pageLocalStorage));
+}
 function hookupNav() {
-    console.log("Hooking up nav...");
     document.querySelectorAll('nav a').forEach(anchor => {
-        console.log("Hooking up nav anchor...");
         anchor.addEventListener('click', function(e) {
             e.preventDefault();
             const section = document.querySelector(this.getAttribute('href'));
@@ -20,8 +64,104 @@ function hookupNav() {
         });
     });
 }
+function hookupThemeSwitch() {
+    makeLightThemeIcon();
+    /*
+    let themeSwitch = document.querySelector('#' + themeSwitchId);
+    themeSwitch.addEventListener('click', function() {
+        let theme = document.documentElement.getAttribute(themeAttribute);
+        let newTheme = theme === darkThemeFlag ? lightThemeFlag : darkThemeFlag;
+        setPageTheme(newTheme);
+    });
+    */
+    let themeSwitch = getThemeSwitchButton();
+    themeSwitch.addEventListener('click', function() {
+        let theme = getPageTheme();
+        let newTheme = theme === darkThemeFlag ? lightThemeFlag : darkThemeFlag;
+        setPageTheme(newTheme);
+    });
+}
+function makeLightThemeIcon() {
+    let themeSwitch = getThemeSwitchButton();
+    const backgroundRadius = 500;
+    const sunRadius = 250;
+    // const sunColour = "var(--text-colour)"; // "var(--text-background-colour)";
+    // const backgroundColour = "var(--secondary-colour)";
+
+    // Create the SVG element
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("viewBox", "0 0 1000 1000");
+    svg.classList.add(themeIconFlag);
+    svg.classList.add(lightThemeIconFlag);
+    
+    // Create the background circle
+    const background = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    background.setAttribute("cx", backgroundRadius);
+    background.setAttribute("cy", backgroundRadius);
+    background.setAttribute("r", backgroundRadius);
+    // background.setAttribute("fill", backgroundColour);
+    background.setAttribute("class", "background");
+    
+    // Create the sun body
+    const sunBody = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    sunBody.setAttribute("cx", backgroundRadius);
+    sunBody.setAttribute("cy", backgroundRadius);
+    sunBody.setAttribute("r", sunRadius);
+    // sunBody.setAttribute("fill", sunColour);
+    sunBody.setAttribute("class", "sun");
+    
+    // Add background and sun body to the SVG
+    svg.appendChild(background);
+    svg.appendChild(sunBody);
+    
+    // Parameters for rays
+    const centerX = 500;
+    const centerY = 500;
+    const numberOfRays = 8;
+    const rayRadialSpacing = 75;
+    const innerRadius = sunRadius + rayRadialSpacing;  // Where the sun body ends
+    const outerRadius = sunRadius + rayRadialSpacing + (backgroundRadius - sunRadius - rayRadialSpacing) * 0.5;  // Where the rays extend to
+    const strokeWidth = 75;
+    
+    // Create rays using a loop and trigonometry
+    for (let i = 0; i < numberOfRays; i++) {
+        // Calculate angle in radians
+        const angle = (i * 2 * Math.PI) / numberOfRays;
+        
+        // Calculate start point (inner circle)
+        const startX = centerX + innerRadius * Math.cos(angle);
+        const startY = centerY + innerRadius * Math.sin(angle);
+        
+        // Calculate end point (outer radius)
+        const endX = centerX + outerRadius * Math.cos(angle);
+        const endY = centerY + outerRadius * Math.sin(angle);
+        
+        // Create the line element
+        const line = document.createElementNS("http://www.w3.org/2000/svg", "line");
+        line.setAttribute("x1", startX);
+        line.setAttribute("y1", startY);
+        line.setAttribute("x2", endX);
+        line.setAttribute("y2", endY);
+        // line.setAttribute("stroke", sunColour);
+        line.setAttribute("class", "sun");
+        line.setAttribute("stroke-width", strokeWidth);
+        line.setAttribute("stroke-linecap", "round");
+        
+        // Append the line to the SVG
+        svg.appendChild(line);
+    }
+    
+    // Append the completed SVG to the container
+    themeSwitch.appendChild(svg);
+}
+function getThemeSwitchButton() {
+    return document.querySelector('button.' + themeSwitchFlag);
+}
+function getPageTheme() {
+    return document.documentElement.getAttribute(themeAttribute);
+}
 function hookupScroll() {
-    console.log("Hooking up scroll...");
     window.addEventListener('scroll', function() {
         const sections = document.querySelectorAll('section');
         const navLinks = document.querySelectorAll('nav a');
@@ -45,12 +185,9 @@ function hookupScroll() {
 }
 /*
 function hookupProjectThumbnails() {
-    console.log("Hooking up project thumbnails...");
     let demoButtonSelector = '.project-links .button';
     document.querySelectorAll(demoButtonSelector).forEach(demoButton => {
-        console.log("Hooking up project thumbnail...");
         let projectName = getProjectNameFromDemoButton(demoButton);
-        console.log({projectName});
         demoButton.addEventListener('mouseover', function() {
             let projectName = getProjectNameFromDemoButton(this);
             let thumbnailContainer = getProjectThumbnailContainer(projectName);
@@ -65,20 +202,16 @@ function hookupProjectThumbnails() {
 }
 function getProjectNameFromDemoButton(demoButton) {
     let projectName = demoButton.getAttribute('data-project');
-    console.log({projectName});
     return projectName;
 }
 function getProjectThumbnailContainer(projectName) {
     let container = document.querySelector(`div.project-thumbnail[data-project="${projectName}"]`);
-    console.log({container});
     return container;
 }
 */
 function hookupProjectDetailButtons() {
-    console.log("Hooking up project detail buttons...");
     let detailButtonSelector = '.project-detail-button';
     document.querySelectorAll(detailButtonSelector).forEach(detailButton => {
-        console.log("Hooking up project detail button...");
         detailButton.addEventListener('click', function() {
             let projectDetailContainer = this.parentElement.querySelector('.project-detail-container');
             let wasActive = projectDetailContainer.classList.contains(activeFlag);
diff --git a/styles/styles.css b/styles/styles.css
index 00ed0c3..c770480 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -1,29 +1,60 @@
 /* Modern CSS reset and variables */
 :root {
-    /* Claude dark blue / grey theme
-    --text-color: #1a202c;
-    --primary-color: #2d3748;
-    --secondary-color: #4a5568;
-    --accent-color: #4299e1;
-    --background-color: #f7fafc;
-    */
+    /* Claude dark blue / grey theme */
+    --text-colour: #1a202c;
+    --primary-colour: #2d3748;
+    --secondary-colour: #4a5568;
+    --accent-colour: #4299e1;
+    --page-background-colour: #f7fafc;
+    --text-background-colour: white;
+}
+:root[data-theme="purple"] {
     /* Purple theme 
         - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff
-    --text-color: #10002B; /* very dark * /
-    --primary-color: #240046; /* medium dark * /
-    --secondary-color: #3C096C; /* dark * /
-    --accent-color: #C77DFF; /* light * /
-    --background-color: #E0AAFF; /* very light * /
     */
+    --text-colour: #10002B; /* very dark */
+    --primary-colour: #240046; /* medium dark */
+    --secondary-colour: #3C096C; /* dark */
+    --accent-colour: #C77DFF; /* light */
+    --page-background-colour: #E0AAFF; /* very light */
+    --text-background-colour: white;
+}
+:root[data-theme="red"],
+:root[data-theme="light"] {
     /* Red theme 
         - https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000
         - https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc
     */
-    --text-color: #2B0000;
-    --primary-color: #740000;
-    --secondary-color: #B50000;
-    --accent-color: #E35053;
-    --background-color: #F6CACC;
+    --text-colour: #2B0000;
+    --primary-colour: #740000;
+    --secondary-colour: #B50000;
+    --accent-colour: #E35053;
+    --page-background-colour: #F6CACC;
+    --text-background-colour: white;
+}
+:root[data-theme="dark"] {
+    /*
+    --text-colour: #E0E0E0;
+    --primary-colour: #BB86FC;
+    --secondary-colour: #03DAC6;
+    --accent-colour: #FF4081;
+    --page-background-colour: #121212;
+    --text-background-colour: black;
+    */
+    /*
+    --text-colour: #E0E0E0; /* Light * /
+    --primary-colour: #740000; /* Dark * /
+    --secondary-colour: #B50000; /* Medium * /
+    --accent-colour: #FF4081; /* Light-medium * /
+    --page-background-colour: #121212; /* Dark * /
+    --text-background-colour: black; /* Black * /
+    */
+    --text-colour: #E0E0E0; /* Light Gray */
+    --primary-colour: #980000; /* Slightly lighter Dark Red */
+    --secondary-colour: #D30000; /* Slightly lighter Medium Red */
+    --accent-colour: #FF4081; /* Pink */
+    --page-background-colour: #121212; /* Dark Gray */
+    --text-background-colour: black; /* Dark Red */
 }
 
 * {
@@ -35,24 +66,24 @@
 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
-    color: var(--text-color);
-    background-color: var(--background-color);
+    color: var(--text-colour);
+    background-color: var(--page-background-colour);
 }
 
 /* Header styles */
 header {
-    background-color: var(--primary-color);
-    color: white;
+    background-color: var(--primary-colour);
+    color: var(--text-background-colour);
     padding: 2rem 1rem;
     text-align: center;
 }
 
 header h1 {
-    color: white;
+    color: var(--text-background-colour);
 }
 
 nav {
-    background-color: var(--secondary-color);
+    background-color: var(--secondary-colour);
     padding: 1rem;
     position: sticky;
     top: 0;
@@ -67,14 +98,14 @@ nav ul {
 }
 
 nav a {
-    color: white;
+    color: var(--text-background-colour);
     text-decoration: none;
     font-weight: 500;
     transition: color 0.3s;
 }
 
 nav a:hover {
-    color: var(--accent-color);
+    color: var(--accent-colour);
 }
 
 /* Google Translate styles
@@ -92,6 +123,83 @@ body {
     top: 0px !important;
 }
 
+/* Toggle light mode / dark mode button */
+.theme-switch {
+    background: none;
+    border: none;
+    cursor: pointer;
+    width: 5vh;
+    height: 5vh;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin-top: auto;
+    border-radius: 2.5vh;
+}
+.theme-switch:hover {
+    background-color: var(--primary-colour);
+}
+.theme-switch img.theme-icon,
+.theme-switch svg.theme-icon {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transition: opacity 1s ease, transform 1s ease;
+    position: absolute;
+    margin-top: auto;
+}
+img.theme-icon.dark-mode-icon {
+    top: 0vh;
+    left: -0.1vh;
+}
+svg.theme-icon.light-mode-icon {
+    width: 4vh;
+    height: 4vh;
+    top: 0.55vh;
+    left: 0.45vh;
+}
+svg.theme-icon.light-mode-icon .background {
+    fill: var(--secondary-colour);
+}
+.theme-switch:hover svg.theme-icon.light-mode-icon .background {
+    fill: var(--primary-colour);
+}
+svg.theme-icon.light-mode-icon .sun {
+    fill: var(--text-colour);
+    stroke: var(--text-colour);
+}
+/*
+svg.theme-icon {
+    width: 2vh;
+    height: 2vh;
+}
+*/
+
+/* Hide the icon that doesn't match the current theme */
+[data-theme="light"] .theme-switch .dark-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}
+[data-theme="light"] .theme-switch .light-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(90deg);
+}
+
+[data-theme="dark"] .theme-switch .dark-mode-icon {
+    opacity: 0;
+    display: none;
+    transform: rotate(-90deg);
+}
+[data-theme="dark"] .theme-switch .light-mode-icon {
+    opacity: 1;
+    display: block;
+    transform: rotate(0deg);
+}
+
 /* Main content styles */
 main {
     max-width: 1200px;
@@ -104,7 +212,7 @@ section {
 }
 
 h1, h2, h3 {
-    color: var(--primary-color);
+    color: var(--primary-colour);
     margin-bottom: 1rem;
 }
 
@@ -119,7 +227,7 @@ ul, li {
 }
 
 .expertise-card {
-    background: white;
+    background: var(--text-background-colour);
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -137,7 +245,7 @@ ul, li {
 .project-card-gridslot {
 }
 .project-card {
-    background: white;
+    background: var(--text-background-colour);
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -147,14 +255,14 @@ ul, li {
 .expertise-card h3,
 .project-card h3,
 .experience-card h3 {
-    color: var(--secondary-color);
+    color: var(--secondary-colour);
 }
 
 .button {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background-color: var(--accent-color);
-    color: white;
+    background-color: var(--accent-colour);
+    color: var(--text-background-colour);
     text-decoration: none;
     border-radius: 4px;
     transition: background-color 0.3s;
@@ -230,7 +338,7 @@ ul, li {
 
 /* Experience */
 .experience-card {
-    background: white;
+    background: var(--text-background-colour);
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -241,7 +349,7 @@ ul, li {
     margin-bottom: 0;
 }
 .experience-date {
-    color: var(--primary-color);
+    color: var(--primary-colour);
     font-size: 0.9rem;
     width: 50%;
     min-width: 50%;
@@ -304,15 +412,15 @@ ul, li {
 
 /* Footer styles */
 footer {
-    background-color: var(--primary-color);
-    color: white;
+    background-color: var(--primary-colour);
+    color: var(--text-background-colour);
     text-align: center;
     padding: 2rem 1rem;
     margin-top: 4rem;
 }
 
 footer a {
-    color: white;
+    color: var(--text-background-colour);
 }
 
 /* Responsive design */
@@ -331,6 +439,11 @@ footer a {
 
 
 /* GitHub Contributions Calendar */
+.github-calendar {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+}
 /* Hide broken statistics */
 .github-calendar > :not(:first-child) {
     display: none;
@@ -346,6 +459,6 @@ footer a {
 }
 .github-calendar table.js-calendar-graph-table > caption:first-child::before {
     content: "GitHub Contributions Calendar";
-    color: var(--text-color);
+    color: var(--text-colour);
     font-size: 1rem;
 }
\ No newline at end of file