From 84d9b8ec5298bd5db2479f104c14e9b6e666256d Mon Sep 17 00:00:00 2001 From: Rahul Date: Fri, 1 Sep 2023 20:17:39 +0530 Subject: [PATCH] Theme Toggler Feature Added on Navbar --- count.js | 27 ++++++++++++++++++++++++++- index.html | 8 ++++++-- style.css | 36 +++++++++++++++++++++++++++++++----- 3 files changed, 63 insertions(+), 8 deletions(-) diff --git a/count.js b/count.js index 4edfcd94..8d5c527e 100644 --- a/count.js +++ b/count.js @@ -1,4 +1,5 @@ -window.onload = function() { +var toggle_theme = document.getElementById('switch-theme'); +window.onload = function () { let counts = { 'Company': 0, 'Project': 0, @@ -21,4 +22,28 @@ window.onload = function() { document.querySelector('#projectOutput .count').textContent = counts['Project']; document.querySelector('#foundationOutput .count').textContent = counts['Foundation']; document.querySelector('#individualOutput .count').textContent = counts['Individual']; + toggle_theme.innerHTML += mode_dark; }; +var mode_light = `` + + +var mode_dark = ``; + +toggle_theme.addEventListener('click', () => { + const bodyElem = document.getElementsByTagName('body'); + const tfLogo = document.getElementsByClassName('logo'); + console.log('logo :>> ', tfLogo[0]); + if (bodyElem[0].classList.contains('light')) { + toggle_theme.innerHTML = ''; + toggle_theme.innerHTML += mode_light; + bodyElem[0].classList.remove('light'); + bodyElem[0].classList.add('dark'); + tfLogo[0].src = 'images/on-dark@2x.png' + } else { + toggle_theme.innerHTML = '' + toggle_theme.innerHTML += mode_dark; + bodyElem[0].classList.remove('dark'); + bodyElem[0].classList.add('light'); + tfLogo[0].src = 'images/on-light@2x.png' + } +}) \ No newline at end of file diff --git a/index.html b/index.html index c9ed3c63..28576e82 100644 --- a/index.html +++ b/index.html @@ -39,8 +39,12 @@ - - [August 25, 2023] OpenTF Announces Fork of Terraform. Read more >> + + +
diff --git a/style.css b/style.css index c4077450..640a1bd4 100644 --- a/style.css +++ b/style.css @@ -17,7 +17,6 @@ html { /*16px*/ body { - background: white; color: rgb(75 85 99); font-family: 'Montserrat', sans-serif; @@ -27,7 +26,13 @@ body { padding-bottom: 2rem; margin: 0; } - +.light { + background: white; +} +.dark{ + background: #000; + color: #fff +} div.container { padding: 0 1rem 0 1rem; } @@ -388,7 +393,7 @@ span { font-style: italic; } -.purple-banner { +/* .purple-banner { display: block; background-color: #8a2be2; color: white; @@ -397,9 +402,9 @@ span { font-size: 20px; text-decoration: none; transition: background-color 0.3s ease; -} +} */ -.purple-banner:hover { +.banner:hover { background-color: purple; } @@ -407,3 +412,24 @@ img { max-width: 100%; height: auto; } + +.banner { + display: flex; + background-color: #8a2be2; + justify-content: center; + align-items: center; + padding: 0.75rem 0.5rem; + font-size: 20px; + text-decoration: none; + transition: background-color 0.3s ease; +position: sticky; +top:0; + .theme-switch, + .purple-banner { + text-align: center; + color: white; + } + .theme-switch{ + margin-left: 1rem; + } +} \ No newline at end of file