Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme added #1536

Merged
merged 4 commits into from
Aug 9, 2024
+302 −18
Merged

theme added #1536

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8abd474
theme added
Varsani2520 Aug 1, 2024
9880360
solve conflicts
Varsani2520 Aug 1, 2024
1ae10ac
Merge branch 'main' into theme
Varsani2520 Aug 8, 2024
d434308
Merge branch 'main' into theme
Varsani2520 Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
theme added
@Varsani2520
Varsani2520 committed Aug 1, 2024
commit 8abd4748bb0eaeda82a58d0264bf22f6ff68da3b
64 changes: 54 additions & 10 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
@@ -2,11 +2,53 @@
margin: 0px;
padding: 0px;
}

body {
background-color: black;
:root {
--background-color: white;
--text-color: black;
--primary-color: rgb(204, 12, 12);
--secondary-color: rgb(177, 0, 0);
--tertiary-color: orangered;
--container-bg: rgb(224, 224, 252);
--filter-bg: transparent;
--contact-bg: rgb(208, 50, 50);
--button-bg: #ec0f25e3;
--button-hover-bg: rgba(208, 50, 50, 0.9);
--card-border: rgb(186, 186, 201);
--card-shadow: rgba(224, 224, 252, 0.678);
--link-color: rgb(177, 0, 0);
--pagination-bg: white;
--pagination-active-bg: rgb(177, 0, 0);
--pagination-btn-color: rgb(177, 0, 0);
--pagination-prev-next-bg: rgb(204, 12, 12);
--filter-text-color: black;
--filter-border-color: #dc3545;
}

.dark-theme {
--background-color: black;
--text-color: white;
--primary-color: rgb(204, 12, 12);
--secondary-color: rgb(177, 0, 0);
--tertiary-color: orangered;
--container-bg: rgb(35, 35, 35);
--filter-bg: rgba(0, 0, 0, 0.6);
--contact-bg: rgb(208, 50, 50);
--button-bg: #ec0f25e3;
--button-hover-bg: rgba(208, 50, 50, 0.9);
--card-border: rgb(100, 100, 100);
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: rgb(177, 0, 0);
--pagination-bg: #2e2e2e;
--pagination-active-bg: rgb(177, 0, 0);
--pagination-btn-color: rgb(177, 0, 0);
--pagination-prev-next-bg: rgb(204, 12, 12);
--filter-text-color: white;
--filter-border-color: #dc3545;
}
/* body {
background-color: var(--background-color);
overflow-x: hidden;
}
} */

/* MENU + LOGIN + SIGNUP + CONTACT PAGE */
.head_container {
@@ -42,7 +84,7 @@ body {
/* MENU PAGE SPECIFICS */
.menu-container {
padding: 55px 10px 30px 10px;
background-color: rgb(224, 224, 252);
background-color: var(--background-color)
}

.menu-container .container-fluid {
@@ -77,7 +119,7 @@ body {

.menu-container .nav-pills .nav-link.active {
background-color: rgb(204, 12, 12);
color: white;
/* color: white; */
}

.menu-items .row {
@@ -287,7 +329,7 @@ body {
.contact-wrapper .text{
font-size: 1rem;
line-height: 1.5;
color: #080808;
color: var(--text-color);
margin-bottom: 2rem;
}

@@ -322,7 +364,7 @@ body {
align-items: center; /* Center items vertically */
margin-bottom: 20px;
padding: 15px;
background-color: #fff;
background-color: var(--background-color);
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s;
@@ -421,7 +463,7 @@ body {
}
*/
.contact-form-wrapper {
background-color: white;
background-color:var(--container-bg);
padding: 30px 0;
}

@@ -668,7 +710,9 @@ body {
.testimonal__container {
display: flex;
}

.nav-link {
color:var(--a)
}
.testimonal__card {
text-align: center;
padding: 2rem 3rem 2.5rem;
16 changes: 9 additions & 7 deletions Css-files/navbar.css
View file
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
/* Additional Colors */
--container-bg: black;
--drop-bg: #212123;
--a: white;
--a: black;
--nav: black;
--invert: invert(1);
}
@@ -52,15 +52,14 @@
/* Additional Colors */
--container-bg: rgb(224, 224, 252);
--drop-bg: #ffffff;
--a: black;
--nav: white;
--invert: invert(0);
}

/* Navbar */
.navbar {
--bs-navbar-color: var(--a);
background-color: var(--nav);
/* --bs-navbar-color: var(--a); */
background-color: var(--background-color);
gap: 10px;
}

@@ -83,7 +82,7 @@

/* Navbar Links */
.nav-link {
transition: color 0.3s, background-color 0.3s;
color:var(--a)
}

.nav-link:hover {
@@ -102,6 +101,8 @@ ul {
display: flex;
justify-content: center;
align-items: center;
color:var(--a)

}


@@ -140,6 +141,7 @@ ul {
#theme-toggle-icon {
width: 30px;
cursor: pointer;
color:var(--drop-bg)
}

.center-links .nav-item .dropdown-menu {
@@ -165,7 +167,7 @@ ul {
background-color: #dc3545;
}

:root {
/* :root {
--background-color: #fff;
--text-color: #000;
--button-bg: #D0EEB0;
@@ -177,7 +179,7 @@ ul {
body {
background-color: var(--background-color);
color: var(--text-color);
}
} */

.section {
background-color: var(--background-color);
52 changes: 47 additions & 5 deletions Css-files/offers.css
View file
Original file line number Diff line number Diff line change
@@ -43,7 +43,49 @@ ol {
--primary-font: 'Roboto', sans-serif;
--secondry-font: 'Quicksand', sans-serif;
}

:root {
--background-color: white;
--text-color: black;
--primary-color: rgb(204, 12, 12);
--secondary-color: rgb(177, 0, 0);
--tertiary-color: orangered;
--container-bg: rgb(224, 224, 252);
--filter-bg: transparent;
--contact-bg: rgb(208, 50, 50);
--button-bg: #ec0f25e3;
--button-hover-bg: rgba(208, 50, 50, 0.9);
--card-border: rgb(186, 186, 201);
--card-shadow: rgba(224, 224, 252, 0.678);
--link-color: rgb(177, 0, 0);
--pagination-bg: white;
--pagination-active-bg: rgb(177, 0, 0);
--pagination-btn-color: rgb(177, 0, 0);
--pagination-prev-next-bg: rgb(204, 12, 12);
--filter-text-color: black;
--filter-border-color: #dc3545;
}

.dark-theme {
--background-color: black;
--text-color: white;
--primary-color: rgb(204, 12, 12);
--secondary-color: rgb(177, 0, 0);
--tertiary-color: orangered;
--container-bg: rgb(35, 35, 35);
--filter-bg: rgba(0, 0, 0, 0.6);
--contact-bg: rgb(208, 50, 50);
--button-bg: #ec0f25e3;
--button-hover-bg: rgba(208, 50, 50, 0.9);
--card-border: rgb(100, 100, 100);
--card-shadow: rgba(0, 0, 0, 0.5);
--link-color: rgb(177, 0, 0);
--pagination-bg: #2e2e2e;
--pagination-active-bg: rgb(177, 0, 0);
--pagination-btn-color: rgb(177, 0, 0);
--pagination-prev-next-bg: rgb(204, 12, 12);
--filter-text-color: white;
--filter-border-color: #dc3545;
}
html {
scroll-behavior: smooth;
}
@@ -137,7 +179,7 @@ h5 {

p {
font-size: 1rem;
color: var(--text-color);
color: var(--bs-heading-color);
font-weight: 400;
line-height: 1.75rem;
letter-spacing: 1px;
@@ -430,11 +472,11 @@ nav {
==========================================
*/
.testimonial-section {
background: lavender;
background: var(--background-color);
}

.testimonial-section h2 {
color: red;
color:var(--bs-heading-color);
}

.testimonial-section .carousel-item {
@@ -484,7 +526,7 @@ button.prev, button.next {
top: 50%;
margin: 20px;
transform: translateY(-50%);
background-color: brown;
background-color: var(--pagination-btn-color);
color: white;
border: 1px white solid;
padding: 10px;
1 change: 1 addition & 0 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
@@ -41,6 +41,7 @@
<link rel="stylesheet" href="../Css-files/content.css" />
<link rel="stylesheet" href="../Css-files/navbar.css" />
<link rel="stylesheet" href="../Css-files/footer.css" />
<link rel="stylesheet" href="../style.css" />

<style>
#progressBar {
7 changes: 4 additions & 3 deletions Html-files/menu.html
View file
Original file line number Diff line number Diff line change
@@ -81,7 +81,7 @@
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../Html-files/menu.html">
<a class="nav-link dark-theme" href="../Html-files/menu.html">
<i class="fa-solid fa-book-open"></i> Menu
</a>
</li>
@@ -114,8 +114,9 @@
</ul>
</div>
<div class="order-0 ml-auto p-2">
<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
</div>
<img class="nav-link" src="../Images/navbar/sun.png" id="theme-toggle-icon" alt="theme toggler button">
</div>

<div class="collapse navbar-collapse hamburgeritems enddiv order-3">
<ul class="navbar-nav end-links">
<li class="nav-item">
2 changes: 2 additions & 0 deletions Html-files/offers.html
View file
Original file line number Diff line number Diff line change
@@ -44,6 +44,8 @@
<link rel="stylesheet" href="../Css-files/scroll-top-button.css" />
<link rel="stylesheet" href="../Css-files/navbar.css" />
<link rel="stylesheet" href="../Css-files/footer.css" />
<link rel="stylesheet" href="../style.css" />
<script href="../script.js" ></script>
<!-- OWN CSS -->
<link id="theme-link" rel="stylesheet" href="/Css-files/offers.css" />
<style>
3 changes: 1 addition & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -78,7 +78,7 @@
<a href="index.html" class="navbar-brand opacity-75 flex-fill">


<img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo" style="background-color: black;">
<img src="./Images/logo/Foodielogo.png" height="30" alt="Brand Logo" >



@@ -166,7 +166,6 @@

<img class="nav-link" src="Images/navbar/moon.png" id="theme-toggle-icon" alt="theme toggler button">

<img class="nav-link" src="Images/navbar/sun.png" id="theme-toggle-icon" alt="Theme Toggler Button">

</div>

26 changes: 26 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -17,3 +17,29 @@ document.querySelectorAll('.faq-item h2').forEach(item => {
parent.classList.toggle('active');
});
});

// Get themeToggleIcon element
let themeToggleIcon = document.getElementById("theme-toggle-icon");

// Load theme from localStorage
const currentTheme = localStorage.getItem("theme");
if (currentTheme === "dark") {
document.body.classList.add("dark-theme");
themeToggleIcon.src = "../Images/navbar/sun.png";
} else {
document.body.classList.remove("dark-theme");
themeToggleIcon.src = "../Images/navbar/moon.png";
}

// Toggle theme and save to localStorage
themeToggleIcon.addEventListener("click", function () {
document.body.classList.toggle("dark-theme");

if (document.body.classList.contains("dark-theme")) {
themeToggleIcon.src = "../Images/navbar/sun.png";
localStorage.setItem("theme", "dark");
} else {
themeToggleIcon.src = "../Images/navbar/moon.png";
localStorage.setItem("theme", "light");
}
});