diff options
| author | Parker <contact@pkrm.dev> | 2025-03-28 23:47:27 -0500 |
|---|---|---|
| committer | Parker <contact@pkrm.dev> | 2025-03-28 23:47:27 -0500 |
| commit | a46359bfe7b0698ea293e2dda5d9b29d8bf58a5c (patch) | |
| tree | a6bda650bfd767d45e24dffff03aca1a5b9ae1df | |
| parent | 5e510d137fc16f77af89f1ed9954d3cef2a643ed (diff) | |
small changes
| -rw-r--r-- | css/index.css | 12 | ||||
| -rw-r--r-- | index.html | 26 | ||||
| -rw-r--r-- | js/toggle.js | 74 |
3 files changed, 63 insertions, 49 deletions
diff --git a/css/index.css b/css/index.css index 1409763..6d0372d 100644 --- a/css/index.css +++ b/css/index.css @@ -1,17 +1,15 @@ html { - font-family: "Open Sans", Arial; - color: #9F9FAA; scroll-behavior: smooth; - background-color: #242528; } -html.light * { +html * { + font-family: "Open Sans", Arial; color: #444; background-color: #F0F0F0; } -html.light svg, -html.light #about a { +html svg, +html #about a{ color: #444; fill: #444; } @@ -38,7 +36,6 @@ nav { nav a { margin: 0 1rem; text-decoration: none; - color: #9F9FAA; } nav a:hover { @@ -200,7 +197,6 @@ svg:hover { #about a { text-decoration: underline; - color: #9F9FAA; } #about a:hover { @@ -7,16 +7,34 @@ <meta http-equiv="onion-location" content="http://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion"> <!-- Dicourage indexing --> <meta name="robots" content="noindex, nofollow, noarchive"> - - <link rel="stylesheet", href="/css/index.css"> <meta property="og:title" content="Parker M."/> <meta property="og:url" content="https://pkrm.dev/"/> <meta property="og:type" content="website"/> <meta property="og:description" content="My personal website. See my projects."/> - <script src="/js/toggle.js" defer></script> - <title>Parker M.</title> + + <script> + if (localStorage.getItem('darkMode') === 'true') { + document.documentElement.classList.add('dark'); + } + </script> + <style> + html.dark * { + color: #9F9FAA; + background-color: #242528; + } + + html.dark svg, + html.dark #about a { + color: #9F9FAA; + fill: #9F9FAA; + } + </style> + + <script src="/js/toggle.js" defer></script> + <link rel="preload", href="/css/index.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> + <noscript><link rel="stylesheet" href="styles.css"></noscript> </head> <body> <nav> diff --git a/js/toggle.js b/js/toggle.js index 275054a..11ba783 100644 --- a/js/toggle.js +++ b/js/toggle.js @@ -1,61 +1,61 @@ const moon = document.getElementById('moon'); const sun = document.getElementById('sun'); -if (!document.cookie.includes('preference')) { - setPreference(true); +/** + * Check if the user has dark mode enabled + */ +if (localStorage.getItem('darkMode') === 'true') { + turnDark(); } else { - const preference = document.cookie.split(';').find(cookie => cookie.includes('preference')).split('=')[1]; - if (preference === 'true') { - turnLight(); - } else { - turnDark(); - } - + turnLight(); } -function setPreference(value) { - if (typeof value === 'boolean') { - const expires = new Date(); - expires.setFullYear(expires.getFullYear() + 1); // 1 year - document.cookie = `preference=${value};expires=${expires.toUTCString()};path=/`; - turnLight(); +/** + * Update local storage with the current theme + */ +function updateLocalStorage() { + if (document.documentElement.classList.contains('dark')) { + localStorage.setItem('darkMode', 'true'); + } else { + localStorage.setItem('darkMode', 'false'); } } +/** + * Toggle the theme to dark + */ function turnLight() { - document.documentElement.classList.add('light'); + document.documentElement.classList.remove('dark'); - moon.style.opacity = '0'; - sun.style.opacity = '1'; + sun.style.display = 'none'; + moon.style.display = 'block'; - setTimeout(() => { - moon.style.display = 'none'; - sun.style.display = 'block'; - } - , 100); + sun.style.opacity = '0'; + moon.style.opacity = '1'; + + updateLocalStorage(); } +/** + * Toggle the theme to light + */ function turnDark() { - document.documentElement.classList.remove('light'); + document.documentElement.classList.add('dark'); - sun.style.opacity = '0'; - moon.style.opacity = '1'; + moon.style.display = 'none'; + sun.style.display = 'block'; - setTimeout(() => { - sun.style.display = 'none'; - moon.style.display = 'block'; - } - , 100); + moon.style.opacity = '0'; + sun.style.opacity = '1'; + + updateLocalStorage(); } +// Check for icon clicks moon.addEventListener('click', () => { - document.documentElement.classList.add('light'); - setPreference(true); - turnLight(); + turnDark(); }); sun.addEventListener('click', () => { - document.documentElement.classList.remove('light'); - setPreference(false); - turnDark(); + turnLight(); }); |