From 6ffde20364ce3b56c0f4bacdc440a646a8af4cc0 Mon Sep 17 00:00:00 2001 From: TinWoodman92 Date: Fri, 15 Dec 2023 18:55:05 -0600 Subject: added dark mode toggle --- about.html | 4 ++++ app.js | 27 ++++++++++++++++++++++++++- index.html | 4 +++- projects_blog/NNetwork.html | 4 ++++ style.css | 9 +++++++++ 5 files changed, 46 insertions(+), 2 deletions(-) diff --git a/about.html b/about.html index 23d14e7..e0154b8 100644 --- a/about.html +++ b/about.html @@ -8,6 +8,10 @@ +
+ Dark Mode +
+

About Me

diff --git a/app.js b/app.js index 55c26c7..122cad7 100644 --- a/app.js +++ b/app.js @@ -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'); diff --git a/index.html b/index.html index 8f0e28b..83361b8 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,9 @@ - +

+ Dark Mode +

Christian Hodgden

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 @@ +

+ Dark Mode +
+

NNetwork

A simple neural network in R as an R6 class object