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

implementing dark mode #84

Merged
merged 7 commits into from
Jan 11, 2025
+755 −287
Merged

implementing dark mode #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
33dd555
implementing dark mode
msv6264 Jan 10, 2025
8beeb21
Merge branch 'main' into implementing-dark-mode
msv6264 Jan 10, 2025
02df41b
Fixed changes in dark mode pr
msv6264 Jan 11, 2025
ffb726e
Merge branch 'main' into implementing-dark-mode
msv6264 Jan 11, 2025
db9653f
modified dark mode code
msv6264 Jan 11, 2025
b5ae7ba
Merge branch 'implementing-dark-mode' of https://github.com/msv6264/S…
msv6264 Jan 11, 2025
221cd86
fixed previous commit
msv6264 Jan 11, 2025
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
54 changes: 42 additions & 12 deletions about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,37 @@

body {
font-family: Arial, sans-serif;
background-color: antiquewhite;
}
background-color: var(--body-bg);
}

:root {
--body-bg: antiquewhite;
--primary-color: white;
--border-color: #d6a52b;
--tertiary-color: #191970;
--pink-bg: #cf00a3;
--heading-color: #8b4513;
--icons-color: #d6a52b;
--footer-text: #4a4a4a;
--card-text: #333;
--card-bg: #fdf4dc;
--back-button-color: #333;
}

html .dark {
--body-bg: black;
--primary-color: rgb(41, 40, 40);
--tertiary-color: #37fcff;
--border-color: black;
--pink-bg: #ff00ff;
--heading-color: #ffff00;
--icons-color: #d6ae2b;
--feature-border-color: #ffff00;
--footer-text: white;
--card-text: aqua;
--card-bg: #044464;
--back-button-color: #d6a52b;
}

.navbar .logo h2{
margin-left: 150%;
Expand Down Expand Up @@ -221,7 +250,8 @@
transform: scale(1.1);
}
.about-box {
background-color: #f9f9f9;
width: 80%;
background-color: var(--primary-color);
border: 2px solid #d6a52b;
border-radius: 10px;
padding: 20px;
Expand All @@ -248,7 +278,7 @@
left: 20px;
background-color: transparent;
border: none;
color: #333;
color: var(--back-button-color);
font-size: 24px;
cursor: pointer;
z-index: 999;
Expand All @@ -260,10 +290,10 @@
}
.about-section h1 {
text-align: center;
color: #8b4513;
color: var(--heading-color);
}
.about-section h2 {
color: #8b4513;
color: var(--heading-color);
}
.about-section li {
color: #191970;
Expand All @@ -274,7 +304,7 @@
.about-section p {
margin: 10px 0;
text-align: center;
color: #191970;
color: var(--tertiary-color);
}
.features {
display: flex;
Expand All @@ -285,7 +315,7 @@
}

.feature-card {
background: #fdf4dc;
background: var(--card-bg);
border: 2px solid #ffd465;
border-radius: 8px;
padding: 20px;
Expand All @@ -302,12 +332,12 @@

.feature-card i {
font-size: 40px;
color: #d6a52b;
color: var(--icons-color);
margin-bottom: 10px;
}

.feature-card h3 {
color: #8b4513;
color: var(--heading-color);
margin-bottom: 10px;
}
.image-button1 {
Expand Down Expand Up @@ -340,9 +370,9 @@

footer {
padding: 10px;
background-color: #f0cd9e66;
background-color: var(--primary-color);
color: var(--footer-text);
text-align: center;
border: 4px solid #faebd7;
}

@media(max-width:768px) {
Expand Down
33 changes: 30 additions & 3 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,9 @@ <h2>Ajivika</h2>
<section class="about-section">
<div class="about-box">
<h1>
<i class="fas fa-info-circle" style="color: #cf00a3" ></i> About Us
<i class="fas fa-info-circle" style="color: var(--pink-bg)" ></i> About Us
</h1>
<div class="about-section">
<div class="about-container">
<p>
In order to address the lack of an intelligent and adaptive Job
Recommendation Portal, the idea to create a website Ajivika (literal
Expand Down Expand Up @@ -250,7 +250,34 @@ <h3>🌍 Access to Jobs in Smaller Areas</h3>
const navLinks = document.querySelector('.nav-links');
navLinks.classList.toggle('active');
}
</script>
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.querySelector('.theme-switch__checkbox');
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
themeToggle.checked = true;
} else {
document.body.classList.add('light');
document.body.classList.remove('dark');
}

themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
document.body.classList.add('dark');
document.body.classList.remove('light');
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.remove('dark');
document.body.classList.add('light');
localStorage.setItem('theme', 'light');
}
});
});
</script>

<footer>&copy; 2024 Ajivika. All rights reserved.</footer>
</body>
Expand Down
43 changes: 34 additions & 9 deletions contact.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,28 @@
body {
font-family: Arial, sans-serif;
background-color: antiquewhite;
background-color: var(--body-bg);
}

:root {
--body-bg: antiquewhite;
--primary-color: white;
--icon-color: #d6a52b;
--card-text: #333;
--card-bg: #f7f7f7;
--heading-color: #8b4513;
--text-area: white;
--textarea-text: black;
}

html .dark {
--body-bg: black;
--primary-color: rgb(41, 40, 40);
--icon-color: aqua;
--card-text: yellow;
--card-bg: #044464;
--heading-color: rgb(255, 187, 52);
--text-area: gray;
--textarea-text: white;
}

.slideshow-container {
Expand Down Expand Up @@ -141,7 +163,7 @@ body {

.option p {
font-size: 16px;
color: #333;
color: var(--card-text);
}
.options-container:hover{
color: #FFD465;
Expand Down Expand Up @@ -234,7 +256,7 @@ text-align: left; /* Adjusts text alignment, optional */
left: 20px;
background-color: transparent;
border: none;
color: #333;
color: var(--card-text);
font-size: 24px;
cursor: pointer;
z-index: 999;
Expand Down Expand Up @@ -279,7 +301,7 @@ text-align: left; /* Adjusts text alignment, optional */
.contact-section {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
background-color: var(--primary-color);
padding: 30px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
border-radius: 10px;
Expand All @@ -293,14 +315,14 @@ text-align: left; /* Adjusts text alignment, optional */

.contact-section h1 {
text-align: center;
color: #333;
font-size: 30px;
color: var(--heading-color);
font-size: 35px;
margin-bottom: 20px;
}

.contact-section p {
text-align: center;
color: #666;
color: var(--card-text);
font-size: 15px;
margin-bottom: 30px;
}
Expand All @@ -312,17 +334,20 @@ text-align: left; /* Adjusts text alignment, optional */

.contact-section label {
margin-bottom: 5px;
color: #333;
color: var(--card-text);
font-size: 16px;
}

.contact-section input,
.contact-section textarea {
padding: 12px;
border: 1px solid #ddd;
background-color: var(--text-area);
color: var(--textarea-text);
border-radius: 5px;
margin-bottom: 20px;
font-size: 16px;
font-weight: 400;
width: 100%;
box-sizing: border-box;
transition: all 0.3s ease;
Expand Down Expand Up @@ -356,7 +381,7 @@ text-align: left; /* Adjusts text alignment, optional */
width: 20px;
text-align: center;
margin-right: 10px;
color: #d6a52b;
color: var(--icon-color);
}
.image-button1 {
position: fixed;
Expand Down
29 changes: 28 additions & 1 deletion contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,5 +191,32 @@ <h1><i class="fas fa-envelope icon"></i> Contact Us</h1>
}
});
</script>
</body>

<script>
document.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.querySelector('.theme-switch__checkbox');
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
themeToggle.checked = true;
} else {
document.body.classList.add('light');
document.body.classList.remove('dark');
}

themeToggle.addEventListener('change', () => {
if (themeToggle.checked) {
document.body.classList.add('dark');
document.body.classList.remove('light');
localStorage.setItem('theme', 'dark');
} else {
document.body.classList.remove('dark');
document.body.classList.add('light');
localStorage.setItem('theme', 'light');
}
});
});
</script>
</body>
</html>
2 changes: 2 additions & 0 deletions desktop.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[LocalizedFileNames]
resume.jpg=@resume,0
Loading
Loading