Skip to content

[FIX] Dropdown visibility in the dark mode #1051

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

Merged
Akashshelke07 merged 4 commits into from
Oct 20, 2025
Merged

[FIX] Dropdown visibility in the dark mode #1051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
18d38c6
[FIX] Fixed the multiple upward arrorw
Oct 20, 2025
8af8691
[FIX] Logo visibility in the dark mode
Oct 20, 2025
a82ac48
[FIX] Dropdown menu dark mode visibility
Oct 20, 2025
36354fc
Merge branch 'main' into branch6
Rajitha-20050412 Oct 20, 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
219 changes: 140 additions & 79 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,6 +635,64 @@
color: var(--subtext-color);
}

/* Logo */
.logo img {
height: 36px;
transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Dark mode logo styling if using same logo */
.dark-theme .logo img {
filter: brightness(0) invert(1);
}

/* Optional: theme button styling */
.theme-switch {
cursor: pointer;
border: 1px solid var(--vehigo-border);
background: var(--vehigo-card);
padding: 6px 12px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: var(--shadow-1);
transition: background 0.3s ease, transform 0.2s ease;
}

.theme-switch:hover {
transform: scale(1.05);
}

.dark-theme #logo {
filter: brightness(0) invert(1);
transition: filter 0.3s ease;
}

/* Dark mode logo visibility */
.dark-theme .navbar-brand img {
filter: brightness(0) invert(1);
opacity: 1;
transition: opacity 0.3s ease;
}

.dark-theme .navbar-brand:hover img {
opacity: 0.8;
}

.navbar-nav {
flex-wrap: nowrap;
gap: 4px;
align-items: center;
}

.navbar .btn,
.theme-switch {
white-space: nowrap;
}


</style>
<!--
- favicon
Expand All @@ -661,69 +719,50 @@
- #HEADER
-->

<header class="header" data-header>
<div class="container">

<div class="overlay" data-overlay></div>

<a href="/src/index.html" class="logo" onclick="event.preventDefault();window.scrollTo({top:0,behavior:'smooth'});">
<img src="./assets/images/vehigologo.png" alt="VehiGo logo">
</a>

<nav class="navbar" data-navbar>
<ul class="navbar-list">

<li>
<a href="/src/index.html" class="navbar-link" data-nav-link>Home</a>
</li>

<li>
<a href="index.html#featured-car" class="navbar-link" data-nav-link>Explore cars</a>
</li>

<li>
<a href="pages/about.html" class="navbar-link" data-nav-link>About us</a>
</li>

<li>
<a href="index.html#blog" class="navbar-link" data-nav-link>Blog</a>
</li>

<li>
<a href="./pages/bill.html" class="navbar-link" data-nav-link>Fare Calculator</a>
</li>

</ul>
</nav>


<div class="header-actions">

<div class="header-contact">
<a href="tel:1800100100" class="contact-link">1800-100-100</a>

<span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
</div>

<a href="./pages/login.html" class="btn user-btn" aria-label="Profile">
<ion-icon name="person-outline"></ion-icon>
</a>

<button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme" style="min-width:71px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
<ion-icon id="theme-toggle-icon" name="moon-outline"></ion-icon>
<span id="theme-toggle-text">Dark</span>
</button>
<header class="header" data-header>
<div class="container">
<div class="overlay" data-overlay></div>

<a class="navbar-brand d-flex align-items-center" href="/src/index.html" aria-label="Vehigo Home">
<img src="./assets/images/vehigologo.png" alt="Vehigo" />
</a>

<nav class="navbar" data-navbar>
<ul class="navbar-list">
<li><a href="/src/index.html" class="navbar-link" data-nav-link>Home</a></li>
<li><a href="index.html#featured-car" class="navbar-link" data-nav-link>Explore cars</a></li>
<li><a href="pages/about.html" class="navbar-link" data-nav-link>About us</a></li>
<li><a href="index.html#blog" class="navbar-link" data-nav-link>Blog</a></li>
<li><a href="./pages/bill.html" class="navbar-link" data-nav-link>Fare Calculator</a></li>
</ul>
</nav>

<div class="header-actions">
<div class="header-contact">
<a href="tel:1800100100" class="contact-link">1800-100-100</a>
<span class="contact-time">Mon - Sat: 9:00 am - 6:00 pm</span>
</div>

<button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</button>
<a href="./pages/login.html" class="btn user-btn" aria-label="Profile">
<ion-icon name="person-outline"></ion-icon>
</a>

</div>
<!-- ✅ Fixed button IDs -->
<button class="btn" id="theme-toggle" aria-label="Toggle dark mode" title="Toggle theme"
style="min-width:71px;min-height:40px;display:flex;align-items:center;gap:8px;padding-inline:10px;">
<ion-icon id="theme-toggle-icon" name="moon-outline"></ion-icon>
<span id="theme-toggle-text">Dark</span>
</button>

<button class="nav-toggle-btn" data-nav-toggle-btn aria-label="Toggle Menu">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</button>
</div>
</header>
</div>
</header>


<main>
<article>
Expand Down Expand Up @@ -1966,25 +2005,6 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
}
});
</script>
<a href="./index.html" style="
position: fixed;
bottom: 30px;
left: 30px;
background-color: #007BFF;
color: white;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
z-index: 999;
transition: background-color 0.3s;
" onmouseover="this.style.backgroundColor='#0056b3'" onmouseout="this.style.backgroundColor='#007BFF'">
<ion-icon name="chevron-up-outline" style="font-size: 24px;"></ion-icon>
</a>

<!-- Scroll Buttons -->
<button id="scrollTopBtn" style="
Expand Down Expand Up @@ -2074,7 +2094,7 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
</script>


<button id="scrollTop" style="position:fixed;bottom:20px;right:20px;display:none;width:50px;height:50px;border:none;border-radius:50%;background:#007bff;color:#fff;font-size:24px;cursor:pointer;box-shadow:0 4px 6px rgba(0,0,0,0.3);transition:0.3s;">⬆</button>


<script>
const btn = document.getElementById('scrollTop');
Expand Down Expand Up @@ -2119,6 +2139,47 @@ <h2 id="footer-faq-title" class="h2 section-title" style="color:#e2e8f0; text-al
});
});

</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const body = document.body;
const toggleBtn = document.getElementById('theme-toggle');
const toggleIcon = document.getElementById('theme-toggle-icon');
const toggleText = document.getElementById('theme-toggle-text');
const logo = document.getElementById('logo');

const savedTheme = localStorage.getItem('theme');

// Apply saved theme
if (savedTheme === 'dark') {
body.classList.add('dark-theme');
logo.src = logo.dataset.dark;
toggleIcon.setAttribute('name', 'sunny-outline');
toggleText.textContent = 'Light';
} else {
body.classList.remove('dark-theme');
logo.src = './assets/images/vehigologo.png';
toggleIcon.setAttribute('name', 'moon-outline');
toggleText.textContent = 'Dark';
}

// Toggle theme
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-theme');
const isDark = body.classList.contains('dark-theme');
localStorage.setItem('theme', isDark ? 'dark' : 'light');

if (isDark) {
logo.src = logo.dataset.dark;
toggleIcon.setAttribute('name', 'sunny-outline');
toggleText.textContent = 'Light';
} else {
logo.src = './assets/images/vehigologo.png';
toggleIcon.setAttribute('name', 'moon-outline');
toggleText.textContent = 'Dark';
}
});
});
</script>

</body>
Expand Down
19 changes: 19 additions & 0 deletions src/pages/bill.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,25 @@
background: #0f172a;
color: #e6e6f0;
}

.dark-theme #carBrand {
background-color: #1e1e1e; /* dark background */
color: #f1f1f1; /* light text */
border: 2px solid #1e88e5; /* lighter blue border */
box-shadow: 0 0 5px rgba(20, 94, 168, 0.4);
}

.dark-theme #carBrand option {
background-color: #2a2a2a; /* dark dropdown menu */
color: #f1f1f1;
}

/* Optional hover/focus styles */
.dark-theme #carBrand:focus {
outline: none;
border-color: #2196f3;
box-shadow: 0 0 8px rgba(33, 150, 243, 0.6);
}
:root {
--vehigo-primary: #2563eb;
--vehigo-primary-2: #4e7fb4;
Expand Down