diff --git a/content/images/dark-mode-icon.webp b/content/images/dark-mode-icon.webp
new file mode 100644
index 0000000..1cb37e3
Binary files /dev/null and b/content/images/dark-mode-icon.webp differ
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 0000000..60f0576
Binary files /dev/null and b/content/images/light-mode-icon.webp differ
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
