adding dark mode

ShubhamSupekar · Aug 29, 2024 · fb07a77 · fb07a77
1 parent f847aec
commit fb07a77
Show file tree

Hide file tree

Showing 4 changed files with 332 additions and 3 deletions.
diff --git a/DarkMode.css b/DarkMode.css
@@ -0,0 +1,307 @@
+
+
+/* Theme Toggle Styles */
+.theme-toggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: 20px;
+}
+
+.theme-toggle input[type="checkbox"] {
+    display: none;
+}
+
+.theme-toggle .toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 50px;
+    height: 24px;
+    background-color: #ccc;
+    border-radius: 12px;
+    padding: 2px;
+    cursor: pointer;
+    position: relative;
+    transition: background-color 0.3s ease;
+}
+
+.theme-toggle .toggle::before {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    border-radius: 50%;
+    transition: transform 0.3s ease;
+    z-index: 2;
+}
+
+.theme-toggle input[type="checkbox"]:checked + .toggle::before {
+    transform: translateX(26px);
+}
+
+.theme-toggle .sun-icon {
+    font-size: 14px;
+    color: #f39c12;
+    position: absolute;
+    left: 8px; /* Positioned inside the toggle track */
+    transition: opacity 0.3s ease;
+    z-index: 1;
+}
+
+.theme-toggle .moon-icon {
+    font-size: 14px;
+    color: #3498db;
+    position: absolute;
+    right: 8px; /* Positioned inside the toggle track */
+    transition: opacity 0.3s ease;
+    z-index: 1;
+}
+
+.theme-toggle input[type="checkbox"]:checked + .toggle .sun-icon {
+    opacity: 1; /* Make the sun icon visible when in light mode */
+}
+
+.theme-toggle input[type="checkbox"]:checked + .toggle .moon-icon {
+    opacity: 1; /* Make the moon icon visible when in dark mode */
+}
+
+
+/* Dark Mode Styles */
+body.dark-mode {
+    background-color: #121212;
+    color: #e0e0e0;
+}
+
+header.dark-mode {
+    background: #1f1f1f;
+    color: #e0e0e0;
+}
+
+header.dark-mode .logo {
+    color: #e0e0e0;
+}
+
+header.dark-mode nav ul li a {
+    color: #e0e0e0;
+}
+
+header.dark-mode nav ul li a:hover {
+    color: #f4a261;
+}
+
+/* Hero Section Dark Mode */
+body.dark-mode .hero {
+    background: #1e1e1e; /* Darker background for hero section */
+}
+
+body.dark-mode .intro-text {
+    color: #f5f5f5; /* Very light gray for paragraph text */
+    background: rgba(0, 0, 0, 0.8); /* Semi-transparent dark background */
+    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.1); /* Subtle white shadow */
+}
+
+body.dark-mode .hero h1 {
+    color: #ffffff; /* White for heading */
+}
+
+body.dark-mode .profile-name {
+    color: #ffffff; /* White for name */
+    text-shadow: 4px 0 8px rgba(79, 73, 73, 0.3); /* Light shadow effect */
+}
+
+body.dark-mode .profile-photo {
+    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1); /* Light shadow for profile photo */
+}
+
+body.dark-mode .hero .btn {
+    background: #f4a261;
+    color: #ffffff;
+}
+
+body.dark-mode .hero .btn:hover {
+    background: #e76f51;
+}
+
+/* Social Icons Dark Mode */
+body.dark-mode .social-icon i {
+    color: #ffffff; /* White for social icons */
+}
+
+body.dark-mode .name-line {
+    background-color: #ffffff; /* White for the invisible line */
+}
+
+/* Name Styling */
+body.dark-mode .hero.in-view .profile-name {
+    color: #ebd5d5; /* Black text color */
+    text-shadow: 4px 0 8px rgba(203, 166, 166, 0.323); /* Shadow effect to create a subtle depth */
+}
+
+body.dark-mode .name-line {
+    background-color:#121212
+}
+
+body.dark-mode .side-nav {
+    background-color: #333; /* Dark background for the side navigation bar */
+}
+
+body.dark-mode .side-nav ul li a {
+    color: #ffffff; /* White text color for all links inside the side navigation bar */
+}
+
+body.dark-mode .side-nav ul li a:hover {
+    color: #f4a261; /* Optional: Highlight color on hover */
+}
+
+/* Active Section Indicator */
+body.dark-mode .side-nav ul li a.active {
+    color: #74d77afd; /* Active section color */
+}
+
+/* Hero Section Dark Mode */
+body.dark-mode .skills {
+    background: #1e1e1e; /* Darker background for hero section */
+}
+
+body.dark-mode .skills h2{
+    color: #ffffff; 
+}
+
+/* Adjusted Category Title */
+body.dark-mode .category-title {
+    color: #e9bcbc;
+}
+
+/* Experience Section */
+body.dark-mode .experience {
+    background-color:#1e1e1e;
+}
+
+body.dark-mode .experience h2{
+    color: #ffffff; 
+}
+
+/* Experience Item */
+body.dark-mode .experience-item {
+    background-color: #0000008f;
+}
+
+body.dark-mode .experience-duration {
+    color: #e9bcbc;
+}
+
+body.dark-mode .experience-description {
+    color: #e9bcbc;
+}
+
+/* Highlighted Company Name */
+body.dark-mode .company-name {
+    color: #0072ff; /* Strong color for emphasis */
+    background-color: #2e2e2f; /* Light background color for contrast */
+}
+
+/* Company Name Hover Effect */
+body.dark-mode .company-name:hover {
+    background-color: #0072ff; /* Inverted hover effect */
+    color: #4c0f0fa7;
+}
+
+
+body.dark-mode .projects {
+    background-color: #121212; /* Dark background */
+    color: #e0e0e0; /* Light text */
+}
+
+body.dark-mode .projects h2 {
+    color: #ffffff; /* White title */
+}
+
+body.dark-mode .projects.in-view h2 {
+    color: #f0f0f0; /* Slightly softer white for the in-view title */
+}
+
+body.dark-mode .projects.in-view .project-card {
+    background-color: #1e1e1e; /* Darker card background */
+    color: #d0d0d0; /* Lighter text inside the card */
+    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.05); /* Softer shadow */
+}
+
+body.dark-mode .project-card h3 {
+    color: #80bfff; /* Light blue for project titles */
+}
+
+body.dark-mode .project-card p {
+    color: #cccccc; /* Lighter grey for paragraph text */
+}
+
+body.dark-mode .project-card ul li {
+    color: #bbbbbb; /* Slightly lighter grey for list items */
+}
+
+body.dark-mode .project-link {
+    background-color: #1a73e8; /* Light blue background for the link */
+    color: #ffffff; /* White link text */
+}
+
+body.dark-mode .project-link:hover {
+    background-color: #005bb5; /* Darker blue for hover effect */
+}
+
+
+/* Contact Section */
+body.dark-mode .contact.in-view {
+    background-color: #1a1a1a; /* Dark background */
+    color: #e0e0e0; /* Light text for readability */
+}
+
+/* Contact Box */
+body.dark-mode .contact.in-view .contact-box {
+    background-color: rgba(33, 33, 33, 0.9); /* Semi-transparent dark background */
+    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1); /* Softer shadow in light colors */
+}
+
+/* Contact Content */
+body.dark-mode .contact-content {
+    color: #f0f0f0; /* Lighter text for contrast */
+}
+
+/* Contact Section Title */
+body.dark-mode .contact-content h2 {
+    color: #ffffff; /* Bright white for the title */
+}
+
+/* Form Elements in Dark Mode */
+body.dark-mode input[type="text"],
+body.dark-mode input[type="email"],
+body.dark-mode textarea {
+    background-color: rgba(50, 50, 50, 0.9); /* Darker input background */
+    color: #ffffff; /* White text */
+    border: 2px solid #26a69a; /* Dark teal border for input */
+    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.05); /* Light shadow */
+}
+
+/* Input & Textarea Focus Effect in Dark Mode */
+body.dark-mode input[type="text"]:focus,
+body.dark-mode input[type="email"]:focus,
+body.dark-mode textarea:focus {
+    background-color: #2c2c2c; /* Slightly lighter dark background on focus */
+    border-color: #004d40; /* Darker teal border on focus */
+    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2); /* Lighter shadow on focus */
+}
+
+
+/* Submit Button Styling */
+body.dark-mode button {
+    background-color: #26a69a; /* Dark teal button background */
+    color: #ffffff; /* White button text */
+    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1); /* Light shadow */
+}
+
+body.dark-mode button:hover {
+    background-color: #004d40; /* Darker teal on hover */
+    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2); /* More intense shadow on hover */
+}
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
     <title>Portfolio</title>
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="mobileStyles.css">
+    <link rel="stylesheet" href="DarkMode.css">
     <script src="script.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
@@ -35,6 +36,14 @@
                 <li><a href="#projects">Projects</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
+                    <!-- Dark/Light Mode Toggle -->
+            <div class="theme-toggle">
+                <input type="checkbox" id="theme-toggle" />
+                <label for="theme-toggle" class="toggle">
+                    <i class="sun-icon fas fa-sun"></i>
+                    <i class="moon-icon fas fa-moon"></i>
+                </label>
+            </div>
         </nav>
     </header>
 

diff --git a/script.js b/script.js
@@ -151,4 +151,17 @@ document.addEventListener('DOMContentLoaded', function () {
         clearTimeout(timeout);
         timeout = setTimeout(hideSideNav, 2000);
     });
+
+
+    // Theme toggle functionality
+    document.getElementById('theme-toggle').addEventListener('change', function () {
+        document.body.classList.toggle('dark-mode');
+    });
+
+    // const toggleDarkMode = document.querySelector('#dark-mode-toggle');
+
+    // toggleDarkMode.addEventListener('click', () => {
+    //     document.body.classList.toggle('dark-mode');
+    //     document.querySelector('.hero').classList.toggle('dark-mode');
+    // });
 });
diff --git a/styles.css b/styles.css
@@ -242,7 +242,7 @@ header nav ul li a:hover {
 
 
 
-.projects h2 {
+/* .projects h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
 }
@@ -257,7 +257,7 @@ header nav ul li a:hover {
 
 .project-card:hover {
     transform: translateY(-5px);
-}
+} */
 
 /* About Section */
 /* .about {
@@ -926,4 +926,4 @@ footer {
 .popup.show {
     visibility: visible;
     opacity: 1;
-}
+}