Skip to content

Commit cb6fc0c

Browse files
gyanshankar1708gyanshankar1708
authored
Merge pull request #515 from MEHWISH310/master
Added dark mode feature to services.html
2 parents 1fbb0c5 + 6cf03d8 commit cb6fc0c

File tree

2 files changed

+215
-29
lines changed

2 files changed

+215
-29
lines changed

‎services.html‎

Lines changed: 215 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -257,16 +257,179 @@
257257
transform: scale(1.01);
258258
box-shadow: 0 0 18px grey;
259259
}
260+
.custom-footer-green {
261+
background: linear-gradient(180deg, #4be04b 0%, #6eea6e 100%);
262+
color: #222;
263+
font-family: 'Segoe UI', sans-serif;
264+
}
265+
body.dark-mode .custom-footer-green{
266+
background: #222;
267+
color: #222;
268+
font-family: 'Segoe UI', sans-serif;
269+
}
270+
/* Dark mode styles */
271+
body.dark-mode {
272+
background-color: #121212 !important;
273+
color: #ffffff !important;
274+
}
275+
276+
body.dark-mode .navbar {
277+
background-color: #1f1f1f !important;
278+
}
279+
280+
body.dark-mode .custom-footer-green {
281+
background-color: #1f1f1f !important;
282+
color: #ffffff;
283+
}
284+
285+
body.dark-mode .card {
286+
background-color: #1f1f1f !important;
287+
color: #ffffff;
288+
}
289+
290+
body.dark-mode a {
291+
color: #bb86fc !important;
292+
}
293+
294+
body.dark-mode .btn-outline-secondary {
295+
border-color: #bb86fc !important;
296+
color: #bb86fc !important;
297+
}
298+
299+
body.dark-mode .search-container {
300+
background-color: #333 !important;
301+
}
302+
303+
body.dark-mode .search-input {
304+
background-color: #222 !important;
305+
color: #fff !important;
306+
}
307+
308+
body.dark-mode .footer-list a {
309+
color: #bb86fc !important;
310+
}
311+
312+
body.dark-mode .theme-aware-logo {
313+
content: url('images/Logo.png');
314+
}
315+
/* Dark mode read more button fix */
316+
body.dark-mode .read-more {
317+
background: linear-gradient(to right, #5a5a5a, #777);
318+
color: #fff;
319+
}
320+
321+
/* Circular Dark Mode Toggle Button Styling */
322+
.theme-toggle .toggle-btn {
323+
border: 2px solid #cbc9cc;
324+
background-color: #2b2d2e;
325+
color: #ffffff;
326+
border-radius: 50%;
327+
width: 45px;
328+
height: 45px;
329+
display: flex;
330+
align-items: center;
331+
justify-content: center;
332+
cursor: pointer;
333+
transition: all 0.3s ease;
334+
font-size: 1.25rem;
335+
}
336+
337+
.theme-toggle .toggle-btn:hover {
338+
background-color: #bb86fc;
339+
transform: scale(1.1);
340+
}
341+
342+
/* Footer dark mode */
343+
/* Dark mode footer */
344+
body.dark-mode .custom-footer-green {
345+
background-color: #1a1a1a;
346+
color: #e0e0e0 !important; /* default text color */
347+
}
348+
.custom-footer-green{
349+
color:black;
350+
}
351+
352+
body.dark-mode .custom-footer-green a {
353+
color: #a6abd3 !important; /* links color */
354+
transition: color 0.3s;
355+
}
356+
.custom-footer-green a {
357+
color: #b604fd !important; /* links color */
358+
transition: color 0.3s;
359+
}
360+
361+
body.dark-mode .custom-footer-green a:hover {
362+
color: #ffb74d !important; /* hover color */
363+
}
364+
.custom-footer-green a:hover {
365+
color: #faf9f7 !important; /* hover color */
366+
}
367+
368+
body.dark-mode .custom-footer-green h5,
369+
body.dark-mode .custom-footer-green p,
370+
body.dark-mode .custom-footer-green span,
371+
body.dark-mode .custom-footer-green li {
372+
color: #ffffff !important; /* all text in footer */
373+
}
374+
.custom-footer-green h5,
375+
.custom-footer-green p,
376+
.custom-footer-green span,
377+
.custom-footer-green li {
378+
color: #090808 !important; /* all text in footer */
379+
}
380+
381+
body.dark-mode .custom-footer-green i {
382+
color: #e0e0e0 !important; /* icons */
383+
}
384+
385+
386+
387+
/* Footer bottom bar */
388+
body.dark-mode .footer-bottom-bar,
389+
body.dark-mode .footer-bottom-bar-text,
390+
body.dark-mode .footer-bottom-bar-text .footer-brand {
391+
background-color: #1a1a1a !important;
392+
color: #e0e0e0 !important;
393+
}
394+
.footer-bottom-bar,
395+
.footer-bottom-bar-text,
396+
.footer-bottom-bar-text .footer-brand {
397+
background-color: #f3eded !important;
398+
color: green !important;
399+
}
400+
401+
body.dark-mode .footer-bottom-bar a {
402+
color: #a6abd3 !important;
403+
}
404+
.footer-bottom-bar a {
405+
color: #01020b !important;
406+
}
407+
.footer-bottom-bar a:hover {
408+
color: green !important;
409+
}
410+
411+
body.dark-mode .footer-bottom-bar a:hover {
412+
color: #ffb74d !important;
413+
}
414+
/* Make all main containers dark in dark mode */
415+
416+
417+
/* Optional: for Bootstrap cards that still show white */
418+
body.dark-mode .card {
419+
background-color: #1f1f1f !important;
420+
color: #fff !important;
421+
}
422+
423+
424+
425+
426+
260427
</style>
261428
</head>
262429

263430
<body id="main-body">
264-
<!-- Navbar starts here -->
265-
<!-- ✅ Navbar -->
266431
<nav class="navbar navbar-expand-lg">
267-
<div
268-
class="container-fluid d-flex justify-content-between align-items-center px-3 px-lg-5"
269-
>
432+
<div class="container-fluid d-flex justify-content-between align-items-center px-3 px-lg-5">
270433
<!-- Logo -->
271434
<a class="navbar-brand" href="./index.html">
272435
<img
@@ -318,6 +481,7 @@
318481
</li>
319482
</ul>
320483
</div>
484+
321485

322486
<!-- Dark/Light toggle button
323487
<div class="theme-toggle">
@@ -327,14 +491,21 @@
327491
</div> -->
328492

329493
<!-- Responsive Search Bar -->
330-
<div class="search-container">
331-
<input type="text" placeholder="Search..." class="search-input" />
332-
<button class="search-button">
333-
<i class="fas fa-search"></i>
334-
<!-- Font Awesome icon -->
335-
</button>
336-
</div>
337-
</div>
494+
<div class="d-flex align-items-center gap-3">
495+
<div class="search-container">
496+
<input type="text" placeholder="Search..." class="search-input" />
497+
<button class="search-button">
498+
<i class="fas fa-search"></i>
499+
</button>
500+
</div>
501+
502+
<div class="theme-toggle">
503+
<button id="themeToggleBtn" class="toggle-btn">
504+
<i class="fa-solid fa-moon"></i>
505+
</button>
506+
</div>
507+
</div>
508+
338509
</nav>
339510

340511
<div class="container py-5">
@@ -507,20 +678,20 @@ <h5 class="card-title">Content Writing</h5>
507678
</div>
508679
</div>
509680
</div>
510-
<!-- Footer section starts here (Contact us) -->
511-
<!-- ...existing code... -->
512-
<footer class="custom-footer-green mt-5">
681+
682+
<footer class="custom-footer-green" style="
683+
background-color: #1a1a1a;
684+
color: #e0e0e0;">
513685
<div class="container py-5">
514686
<div class="row align-items-center">
515-
<!-- Logo & About -->
516687
<div class="col-lg-4 text-center text-lg-start mb-4 mb-lg-0">
517688
<img
518689
src="images/Logo_new.png"
519690
alt="GrowCraft"
520691
style="height: 60px"
521692
/>
522693
<!-- <h2 class="fw-bold mt-2 mb-3" style="color: #222;">GrowCraft</h2> -->
523-
<p class="mb-3 fw-semibold" style="color: #222; font-size: 1.15rem">
694+
<p class="mb-3 fw-semibold" style="font-size: 1.15rem">
524695
Empowering businesses with innovative digital<br />
525696
solutions and creative excellence.
526697
</p>
@@ -573,17 +744,16 @@ <h5 class="fw-bold mb-3 footer-underline">Quick Links</h5>
573744
<h5 class="fw-bold mb-3 footer-underline">Get In Touch</h5>
574745
<ul class="list-unstyled footer-list">
575746
<li>
576-
<i class="fa-solid fa-envelope me-2" style="color: #007bff"></i>
747+
<i class="fa-solid fa-envelope me-2"></i>
577748
<a href="mailto:info@growcraft.com">info@growcraft.com</a>
578749
</li>
579750
<li>
580-
<i class="fa-solid fa-phone me-2" style="color: #00bcd4"></i>
751+
<i class="fa-solid fa-phone me-2" ></i>
581752
<a href="tel:+91999999999">+91 999 999 999</a>
582753
</li>
583754
<li>
584755
<i
585756
class="fa-solid fa-location-dot me-2"
586-
style="color: #2196f3"
587757
></i>
588758
<a
589759
href="https://maps.google.com/?q=ABC+Street,+XYZ+City,+India"
@@ -599,9 +769,9 @@ <h5 class="fw-bold mb-3 footer-underline">Get In Touch</h5>
599769
<div
600770
class="container d-flex flex-column flex-md-row justify-content-between align-items-center"
601771
>
602-
<div class="small" style="color: #222">
772+
<div class="small">
603773
© 2025
604-
<span style="color: #007bff; font-weight: 600">GrowCraft</span>. All
774+
<span style="font-weight: 600">GrowCraft</span>. All
605775
rights reserved.
606776
</div>
607777
<div>
@@ -626,5 +796,27 @@ <h5 class="fw-bold mb-3 footer-underline">Get In Touch</h5>
626796
</script>
627797
<script src="script.js"></script>
628798
<script src="/src/darkMode.js"></script>
799+
<script>
800+
const toggleBtn = document.getElementById('themeToggleBtn');
801+
const body = document.body;
802+
803+
// Apply saved theme on page load
804+
if (localStorage.getItem('theme') === 'dark') {
805+
body.classList.add('dark-mode');
806+
}
807+
808+
toggleBtn.addEventListener('click', () => {
809+
body.classList.toggle('dark-mode');
810+
811+
if (body.classList.contains('dark-mode')) {
812+
localStorage.setItem('theme', 'dark');
813+
toggleBtn.innerHTML = '<i class="fa-solid fa-sun"></i>';
814+
} else {
815+
localStorage.setItem('theme', 'light');
816+
toggleBtn.innerHTML = '<i class="fa-solid fa-moon"></i>';
817+
}
818+
});
819+
820+
</script>
629821
</body>
630822
</html>

‎src/style.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1611,12 +1611,6 @@ body.dark .mb-4:hover {
16111611
opacity: 1;
16121612
}
16131613

1614-
.custom-footer-green {
1615-
background: linear-gradient(180deg, #4be04b 0%, #6eea6e 100%);
1616-
color: #222;
1617-
font-family: 'Segoe UI', sans-serif;
1618-
}
1619-
16201614
.custom-footer-green .footer-underline {
16211615
border-bottom: 3px solid #222;
16221616
display: inline-block;

0 commit comments

Comments
 (0)