From 00e4d6859442cb8ff6601a54f4da00dc05cbea9c Mon Sep 17 00:00:00 2001 From: Risky90 Date: Sat, 2 Dec 2023 08:41:27 +0500 Subject: [PATCH 1/2] adding dark mode with local storage --- public/css/base.css | 41 +++++++++++++++++++- public/js/light-dark-mode.js | 72 +++++++++++++++++++++++++++++++++++ views/pages/changelog.ejs | 31 +++++++-------- views/pages/copyright.ejs | 1 + views/pages/documentation.ejs | 9 +++-- views/pages/donate.ejs | 1 + views/pages/index.ejs | 1 + views/pages/photos.ejs | 1 + views/pages/photoshop.ejs | 1 + views/pages/sketch.ejs | 1 + views/pages/stats.ejs | 1 + views/snippets/header.ejs | 2 +- views/snippets/nav.ejs | 1 + 13 files changed, 141 insertions(+), 22 deletions(-) create mode 100644 public/js/light-dark-mode.js diff --git a/public/css/base.css b/public/css/base.css index 43439e2..e93bdfa 100644 --- a/public/css/base.css +++ b/public/css/base.css @@ -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 -