diff --git a/public/dashboard/css/style.css b/public/dashboard/css/style.css
index 715b11a..f5c07ed 100644
--- a/public/dashboard/css/style.css
+++ b/public/dashboard/css/style.css
@@ -353,4 +353,93 @@ padding: 0.1rem 0.65rem 0.2rem;
.badge--smaller {
font-size: 0.7rem;
padding: 0.05rem 0.4rem 0.15rem;
+}
+
+/* Dialog Styles */
+.modal{
+ background-color: rgba(0, 0, 0, 0.8);
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width:100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem 4rem;
+}
+
+.hidden{
+ display: none;
+}
+
+.modal-rect{
+ background-color: white;
+ border-radius: 5%;
+ padding: 1rem 2rem 3rem 2rem;
+}
+
+.theme-row{
+ display: flex;
+ align-content: stretch;
+ gap: 2rem;
+ padding-bottom: 2rem;
+}
+
+.theme-submit{
+ background-color:#06d6a0 ;
+ padding: 1rem;
+ border-radius: 5%;
+}
+
+.theme-submit:hover{
+ background-color:#32383e;
+ color: white;
+ padding: 1rem;
+ cursor: pointer;
+ border-radius: 5%;
+}
+
+.modal-title{
+ padding-bottom: 2rem;
+}
+
+.theme-card{
+ justify-content: center;
+ text-align: center;
+}
+
+.theme-img{
+ padding: 2rem 2rem;
+ border-radius: 5%;
+}
+
+.theme-name{
+ font-size: 0.75rem;
+}
+
+.modal-open{
+ background-color: #06d6a0;
+ padding: 1rem;
+}
+
+.modal-close{
+ display: flex;
+ justify-content: end;
+ padding:0.5rem ;
+}
+/* .modal-close:hover{
+ background-color: #1f5b83;
+ color: #06d6a0;
+ cursor: pointer;
+} */
+
+.close-icon{
+ height: 1.5rem;
+}
+
+.close-icon:hover{
+ height: 1.5rem;
+ stroke: #06d6a0;
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/views/dashboard/appearance.ejs b/views/dashboard/appearance.ejs
index a8ae58e..63e564d 100644
--- a/views/dashboard/appearance.ejs
+++ b/views/dashboard/appearance.ejs
@@ -91,6 +91,102 @@
+ Change theme
+
+
+
+
+
+
+
+
Choose Theme
+
+
+
Done
+
@@ -160,6 +256,39 @@
})
});
+ const toggleModal = () => {
+ document.querySelector('.modal').classList.toggle('hidden');
+ }
+ const setTheme = (themeName) => {
+ // const themeCard = document.getElementsByClassName('theme-cards')
+ const selecttheme = document.querySelector('#profileTheme');
+ selecttheme.value = themeName;
+ }
+
+ // Toggle Dialog Box
+ document.querySelector('.modal-open').addEventListener('click', toggleModal);
+ document.querySelector('.theme-submit').addEventListener('click', toggleModal);
+ document.querySelector('.modal-close').addEventListener('click', toggleModal);
+
+ // Theme setting
+ document.querySelector('.default').addEventListener('click', function(){setTheme('default')})
+ document.querySelector('.dark').addEventListener('click', function(){setTheme('dark')})
+ document.querySelector('.wave').addEventListener('click', function(){setTheme('wave')})
+ document.querySelector('.purple').addEventListener('click', function(){setTheme('purple')})
+ document.querySelector('.hexagonal').addEventListener('click', function(){setTheme('hexagonal')})
+ document.querySelector('.bluedot').addEventListener('click', function(){setTheme('bluedot')})
+ document.querySelector('.purpledot').addEventListener('click', function(){setTheme('purpledot')})
+ document.querySelector('.shapes').addEventListener('click', function(){setTheme('shapes')})
+ document.querySelector('.snow').addEventListener('click', function(){setTheme('snow')})
+ document.querySelector('.moon').addEventListener('click', function(){setTheme('moon')})
+ document.querySelector('.soundwave').addEventListener('click', function(){setTheme('soundwave')})
+ document.querySelector('.abstractpaper').addEventListener('click', function(){setTheme('abstractpaper')})
+ document.querySelector('.stockmarket').addEventListener('click', function(){setTheme('stockmarket')})
+ document.querySelector('.worldmapindia').addEventListener('click', function(){setTheme('worldmapindia')})
+ document.querySelector('.sprinkle').addEventListener('click', function(){setTheme('sprinkle')})
+ document.querySelector('.masscircles').addEventListener('click', function(){setTheme('masscircles')})
+ document.querySelector('.animatedshape').addEventListener('click', function(){setTheme('animatedshape')})
+