diff options
| author | TinWoodman92 <chrhodgden@gmail.com> | 2023-12-15 18:55:05 -0600 |
|---|---|---|
| committer | TinWoodman92 <chrhodgden@gmail.com> | 2023-12-15 18:55:05 -0600 |
| commit | 6ffde20364ce3b56c0f4bacdc440a646a8af4cc0 (patch) | |
| tree | 5dcb426305ebd2d294fab50b24dc6656486cbbd1 | |
| parent | cdaf4b1fd9b2213669b0d8bf06207efefedb6f17 (diff) | |
added dark mode toggle
| -rw-r--r-- | about.html | 4 | ||||
| -rw-r--r-- | app.js | 27 | ||||
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | projects_blog/NNetwork.html | 4 | ||||
| -rw-r--r-- | style.css | 9 |
5 files changed, 46 insertions, 2 deletions
@@ -8,6 +8,10 @@ <body> + <div class="dark-mode-container"> + <input type="checkbox" id="--dark-theme-check">Dark Mode</input> + </div> + <h1>About Me</h1> <p> @@ -1 +1,26 @@ -console.log('Hello from app.js!');
\ No newline at end of file +console.log('Hello from app.js!'); + +const toggleTheme = function() { + document.documentElement.style.setProperty(this.id, Number(this.checked)); + localStorage.setItem(this.id, Number(this.checked)); +}; + +const initInput = function(styleVariable=null) { + let initValue = localStorage.getItem(styleVariable); + if (initValue) { + initValue = Number(initValue); + document.documentElement.style.setProperty(styleVariable, initValue); + } else { + initValue = getComputedStyle(document.body).getPropertyValue(styleVariable); + }; + + const inputObject = document.getElementById(styleVariable); + if (inputObject) { + inputObject.addEventListener('change', toggleTheme); + if (inputObject.type == 'checkbox') { + inputObject.checked = initValue + }; + }; +}; + +initInput('--dark-theme-check'); @@ -7,7 +7,9 @@ </head> <body> - + <div class="dark-mode-container"> + <input type="checkbox" id="--dark-theme-check">Dark Mode</input> + </div> <h1>Christian Hodgden</h1> <p> Welcome to my website! It is currently under development. diff --git a/projects_blog/NNetwork.html b/projects_blog/NNetwork.html index b26aeb6..c44beba 100644 --- a/projects_blog/NNetwork.html +++ b/projects_blog/NNetwork.html @@ -6,6 +6,10 @@ </head> <body> + <div class="dark-mode-container"> + <input type="checkbox" id="--dark-theme-check">Dark Mode</input> + </div> + <h1>NNetwork</h1> <p class="header-sub-text">A simple neural network in R as an R6 class object</p> <nav class="nav-footer"> @@ -90,4 +90,13 @@ a:visited { a:hover { color: hsl(calc(var(--contrast-hue) - 150), 100%, var(--contrast-lightness)) +} + +.dark-mode-container { + float: right; +} + +input[type='checkbox'] { + border-color: var(--foreground-accent-color); + background-color: var(--background-accent-color); }
\ No newline at end of file |