Skip to content

Commit

Permalink
Merge pull request #57 from T-Rahul-prabhu-38/main
Browse files Browse the repository at this point in the history 
dark mode added✨
  • Loading branch information
@Vimall03
Vimall03 authored Oct 7, 2024
2 parents 3025304 + 71be4e6 commit 238e35e
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 27 deletions.
23 changes: 23 additions & 0 deletions darkMode.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const checkbox = document.getElementById('checkbox')
const modeLabel = document.getElementById('mode-label')

// Check if dark mode is already enabled
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark')
checkbox.checked = true
modeLabel.textContent = 'Dark Mode'
}

// Add event listener for toggle switch
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
document.documentElement.setAttribute('data-theme', 'dark')
localStorage.setItem('theme', 'dark')
modeLabel.textContent = 'Dark Mode'
} else {
document.documentElement.setAttribute('data-theme', 'light')
localStorage.setItem('theme', 'light')
modeLabel.textContent = 'Light Mode'
}
})

8 changes: 8 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,13 @@
</li>
</ul>
</div>
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox">
<div class="slider"></div>
</label>
<span id="mode-label">Light Mode</span>
</div>
</div>
</nav>

Expand Down Expand Up @@ -453,6 +460,7 @@ <h5 class="heading-secondary heading-secondary--semi-bold heading-secondary--whi
</script>
<script src="js/external.js"></script>
<script src="js/index.js"></script>
<script src="darkMode.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<script>
AOS.init();
Expand Down
168 changes: 141 additions & 27 deletions main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@

body {
width: 100%;
overflow-x: hidden
overflow-x: hidden;
background-color: var(--background-color);
color: var(--text-color);
}

html {
Expand Down Expand Up @@ -50,14 +52,17 @@ a {

.heading-primary {
font-size: 2.8rem;
color: #000;
color: var(--text-color);
font-weight: 700;
text-transform: uppercase
}

.heading-primary--white {
color: #fff
}
p{
color: var(--text-color);
}

@media (max-width: 56.25em) {
.heading-primary {
Expand All @@ -74,7 +79,7 @@ a {
.heading-secondary {
font-size: 1.8rem;
font-weight: 800;
color: #000
color: var(--text-color);
}

.heading-secondary--bold {
Expand All @@ -99,7 +104,7 @@ a {

.heading-tertiary {
font-size: 2rem;
color: #000;
color: var(--text-color);
font-weight: 600;
position: relative;
top: 1rem
Expand All @@ -116,8 +121,8 @@ a {
.paragraph {
font-size: 1.4rem;
font-weight: 500;
color: #000
}
}


.paragraph--small {
font-size: 1.2rem
Expand Down Expand Up @@ -146,15 +151,15 @@ a {

.paragraph__li::before {
content: " \00BB";
color: #000;
color: var(--text-color);
vertical-align: middle;
right: .5rem;
top: -.2rem
}

.nav__link-item {
font-weight: 500;
color: #000;
color: var(--text-color);
font-size: 1.6rem;
vertical-align: middle;
top: -.4rem;
Expand All @@ -164,7 +169,7 @@ a {
.sidebar__link-item {
position: relative;
font-size: 2rem;
color: #000;
color: var(--text-color);
top: -.6rem;
font-weight: 500
}
Expand Down Expand Up @@ -687,7 +692,7 @@ a {
width: 100%;
display: block;
position: fixed;
background-color: #fff;
background-color: var(--background-color);
z-index: 100;
padding: 0 1rem;
-webkit-box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
Expand All @@ -703,7 +708,10 @@ a {
.nav__wrapper {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
align-items: center;
display: flex;
justify-content: space-between;
color: var(--text-color);
}

.nav__logo-img {
Expand Down Expand Up @@ -735,7 +743,7 @@ a {
}

.mob-nav {
background-color: #fff;
background-color: var(--background-color);
width: 100%;
position: fixed;
display: none;
Expand Down Expand Up @@ -796,7 +804,7 @@ a {
}

.sidebar__left {
background-color: rgba(0, 0, 0, 0.3);
background-color: var(--background-color);
width: 60%;
height: inherit;
float: left;
Expand All @@ -807,7 +815,7 @@ a {
.sidebar__right {
display: none;
position: relative;
background-color: #fff;
background-color: var(--background-color);
width: 40%;
height: inherit;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.16);
Expand Down Expand Up @@ -1430,7 +1438,7 @@ a {
margin: 1rem 0;
border-color: rgba(0, 0, 0, 0.1);
border-width: .5px;
background-color: rgba(0, 0, 0, 0.1)
background-color: var(--background-color);
}

.order__cart-footer {
Expand Down Expand Up @@ -1482,13 +1490,13 @@ a {
height: 100vh;
position: fixed;
z-index: 11000;
background-color: rgba(0, 0, 0, 0.3)
background-color: var(--background-color);
}

.modal__container {
width: 60%;
padding: 3rem;
background-color: #fff
background-color: var(--background-color);
}

.modal__container {
Expand Down Expand Up @@ -1588,7 +1596,7 @@ a {
}

.menus-detail-button {
background-color: #fff;
background-color: var(--background-color);
border-radius: .8rem;
border: none;
padding: 1rem 2rem;
Expand All @@ -1610,7 +1618,7 @@ a {
border-radius: 45px;
border: 1.3px solid #fff;
padding: 1rem 4rem;
background-color: rgba(255, 255, 255, 0.1);
background-color: var(--background-color);
cursor: pointer
}

Expand Down Expand Up @@ -1649,7 +1657,7 @@ a {
border: 2px solid #E94F37;
padding: 3px 1.4rem;
color: #E94F37;
background-color: #fff;
background-color: var(--background-color);
font-weight: 600;
font-size: 1.4rem;
cursor: pointer;
Expand Down Expand Up @@ -1729,7 +1737,7 @@ a {
padding: 0px 1.5rem;
-webkit-box-shadow: 1px 1px 1rem rgba(0, 0, 0, 0.13);
box-shadow: 1px 1px 1rem rgba(0, 0, 0, 0.13);
background-color: #fff
background-color: var(--background-color);
}

.dropdown__option {
Expand Down Expand Up @@ -2068,8 +2076,8 @@ a {
z-index: 2;
content: "";
height: 90%;
width: 100%;
background-color: #fff;
background-color: var(--background-color);
;
border-radius: 8px;
left: 0;
z-index: -1;
Expand Down Expand Up @@ -2218,7 +2226,7 @@ a {

.contact__right {
padding: 2.5rem;
background-color: #fff
background-color: var(--background-color);
}

.contact__ul {
Expand Down Expand Up @@ -2338,8 +2346,8 @@ a {
border-radius: 5px;
position: relative;
top: 4px;
height: 15px;
background-color: #fff;
background-color: var(--background-color);
;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg)
Expand Down Expand Up @@ -2795,4 +2803,110 @@ a {
.traits__panel:not(:last-child) {
margin-bottom: 2rem
}
}
}




/* Dark mode */

/* Default light mode colors */
:root {
--background-color: rgb(240, 234, 234);
--text-color: black;
--header-bg: lightgray;

}

h2{
color: var(--text-color);
}
/* Dark mode colors */
[data-theme="dark"] {
--background-color: #222831;
--text-color: #f0f5f5;
--header-bg: #1c1c1c;

}
/*
background-image: -o-linear-gradient(left, #E94F37 30%, #E28413 70%);
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.3s, color 0.3s;
} */

/* header {
background-color: var(--header-bg);
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
} */

h1 {
margin: 0;
}

.theme-switch-wrapper {
display: flex;
align-items: center;
}

#mode-label {
margin-left: 10px;
font-size: 1rem;
}

/* Toggle Switch */
.theme-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}

.theme-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--background-color);
transition: 0.4s;
border-radius: 24px;
}

.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
border-radius: 50%;
background-color: white;
transition: 0.4s;
top: 3px;
left: 4px;
}

input:checked + .slider {
background-color: #66bb6a;
}

input:checked + .slider:before {
transform: translateX(26px);
}




0 comments on commit 238e35e

Please sign in to comment.