diff --git a/public/css/base.css b/public/css/base.css index 43439e2..33e316c 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -374,7 +374,7 @@ body.active { .frame { max-width: 730px; margin: auto; - overflow: hidden; + /* overflow: hidden; */ } .horizontal_center { position: relative; @@ -430,6 +430,40 @@ header a.twitter img { position: absolute; } +/* + Dark Mode Styles +*/ +/* style for Dark Mode Button */ +.mode{ + color: #fff; + height: 30px; + width: 133px; + border-radius: 6px; + margin-right: 20px; + background: #2c2e31; + border: solid #83ba43 2px; + } + /* dark class for body of page */ + .dark{ + background-color: #212121 !important; + color: #a6a6a6 !important; +} +/* color in dark mode */ +.dark-content{ + color: #a6a6a6 !important; +} +/* color of heading in dark mode */ +.h-dark{ + color: #ffffff !important; +} +/* color of card in dark node */ +.card-dark{ + background-color: #2c2e31 !important; + z-index: auto !important; +} + + + @media screen and (max-width: 320px) { header h1 { font-size: 32px; @@ -734,8 +768,11 @@ html { width: 100%; background: #fff; border-radius: 3px; - -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); - box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0px 0px 9px 3px rgba(131,186,67,1); + -moz-box-shadow: 0px 0px 9px 3px rgba(131,186,67,1); + box-shadow: 0px 0px 9px 3px rgba(131,186,67,1); + /* -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */ overflow: hidden; text-align: center; z-index: 5; diff --git a/public/js/light-dark-mode.js b/public/js/light-dark-mode.js new file mode 100644 index 0000000..2bae0f3 --- /dev/null +++ b/public/js/light-dark-mode.js @@ -0,0 +1,72 @@ +(function(){ +body = document.querySelector('body') +let p = document.querySelectorAll('p') +let input = document.querySelectorAll('pre') +let btn = document.querySelector('#modes') +let h2 = document.querySelectorAll('h2'); +let card = document.querySelector('.card') +let modeStauts = document.querySelector('#off-on'); +const darkmode = () =>{ + switch (modeStauts.innerText) { + case 'OFF': + modeStauts.innerText = 'ON' + break; + case 'ON': + modeStauts.innerText = 'OFF' + break; + + default: + break; + } + // common of all pages + body.classList.toggle('dark'); + p.forEach(element => { + element.classList.toggle('dark-content') + }); + input.forEach(element => { + element.classList.toggle('dark-content') + }) + h2.forEach(element =>{ + element.classList.toggle('h-dark') + }) + // For index page + if (window.location.href.match(/index$/)){ + + card.classList.toggle('card-dark'); + } + // For Documentation Page and Changelog Page + if(window.location.href.match(/documentation$/) || window.location.href.match(/changelog$/)){ + let li = document.querySelectorAll('.doc-ul > li') + // The .doc-ul class is also added to the 'ul's of changelog page + li.forEach(element => { + element.classList.toggle('dark-content') + }); + } + // For stats page + if(window.location.href.match(/stats$/)){ + let span = document.querySelectorAll('span'); + span.forEach(element => { + element.classList.toggle('dark') + }) + } +} +btn.addEventListener('click', ()=>{ + // get value of 'dark' item form localstorage on every click + setDarkMode = localStorage.getItem('dark'); + if(setDarkMode !== 'ON'){ + darkmode(); + // set vlaue to 'ON' of dark node is on + setDarkMode = localStorage.setItem('dark', 'ON') + }else{ + darkmode(); + // set vlaues to 'null' of dark mode is off + setDarkMode = localStorage.setItem('dark', null) + } +}) +// get vlaue of 'dark' item form local storage; +let setDarkMode = localStorage.getItem('dark') +// cheak mode 'on-off' on page reload; +if(setDarkMode === 'ON'){ + darkmode() +} +})(); \ No newline at end of file diff --git a/views/pages/changelog.ejs b/views/pages/changelog.ejs index ad44495..4d6024e 100644 --- a/views/pages/changelog.ejs +++ b/views/pages/changelog.ejs @@ -11,7 +11,7 @@

Version 1.4

7/4/2022 -