diff options
| author | TinWoodman92 <chrhodgden@gmail.com> | 2023-12-15 20:07:07 -0600 |
|---|---|---|
| committer | TinWoodman92 <chrhodgden@gmail.com> | 2023-12-15 20:07:07 -0600 |
| commit | 3c13057bc5726686ce937d1b13c1a0430e0085d4 (patch) | |
| tree | 6c51436b42bac5e6496abe521bc729588d03fba2 | |
| parent | 793f966038552b7f913a429a2d9e46666468c22f (diff) | |
added dynamic theme
| -rw-r--r-- | about.html | 5 | ||||
| -rw-r--r-- | app.js | 6 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | projects_blog/NNetwork.html | 6 | ||||
| -rw-r--r-- | style.css | 7 |
5 files changed, 24 insertions, 2 deletions
@@ -4,6 +4,11 @@ <head> <title>chrhodgden - About</title> <link rel="stylesheet" href="style.css"/> + <style> + :root { + --theme-hue: var(--about-hue); + } + </style> </head> <body> @@ -1,5 +1,9 @@ console.log('Hello from app.js!'); +const setStyleVariable = function(styleVariable, styleValue) { + document.documentElement.style.setProperty(styleVariable, styleValue); +}; + const toggleTheme = function() { document.documentElement.style.setProperty(this.id, Number(this.checked)); localStorage.setItem(this.id, Number(this.checked)); @@ -16,8 +20,8 @@ const initInput = function(styleVariable=null) { const inputObject = document.getElementById(styleVariable); if (inputObject) { - inputObject.addEventListener('change', toggleTheme); if (inputObject.type == 'checkbox') { + inputObject.addEventListener('change', toggleTheme); inputObject.checked = initValue }; }; @@ -26,7 +26,7 @@ <ul> Projects - <li><a href="projects_blog/NNetwork.html">NNetwork</a></li> + <li class="nnetwork"><a href="projects_blog/NNetwork.html">NNetwork</a></li> </ul> <nav class="nav-footer"> diff --git a/projects_blog/NNetwork.html b/projects_blog/NNetwork.html index c44beba..d469682 100644 --- a/projects_blog/NNetwork.html +++ b/projects_blog/NNetwork.html @@ -3,6 +3,12 @@ <head> <title>chrhodgden - NNetwork</title> <link rel="stylesheet" href="../style.css"/> + <style> + :root { + --theme-color-check: 0; + --accent-hue: var(--nnetwork-hue); + } + </style> </head> <body> @@ -12,6 +12,9 @@ --default-contrast-hue: calc(210 - calc(var(--theme-color-check) * 210)); --contrast-hue: calc(var(--theme-contrast-hue) + var(--default-contrast-hue)); + --about-hue: 310; + --nnetwork-hue: 240; + --foreground-lightness: calc(10% + calc(var(--dark-theme-check) * 70%)); --background-lightness: calc(80% - calc(var(--dark-theme-check) * 70%)); --contrast-lightness: calc(30% + calc(var(--dark-theme-check) * 55%)); @@ -80,6 +83,10 @@ li { font-weight: normal; } +li.nnetwork { + color: hsl(var(--nnetwork-hue), 100%, var(--foreground-lightness)); +} + a { color: var(--contrast-color); } |