Skip to content

#201 Dark mode v3 #815

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

Open
coredoesdev wants to merge 10 commits into
base: main
Choose a base branch
from
Open

#201 Dark mode v3 #815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2c5fa21
feat: start implementing dark mode
coredoesdev Oct 29, 2025
c18b770
feat(darkmode): fix text colors across site
coredoesdev Oct 30, 2025
19782e7
feat(darkmode): remove clocks from dashboard
coredoesdev Oct 30, 2025
0bd66fd
feat(darkmode): misc improvements/fixes
coredoesdev Oct 30, 2025
5c5785b
feat(darkmode): fix tab headers
coredoesdev Oct 30, 2025
8ee80d8
chore: merge
coredoesdev Apr 5, 2026
13d80cb
chore: merge 2
coredoesdev Apr 5, 2026
d982bff
chore(darkmode): clean up hardcoded colors
coredoesdev Apr 5, 2026
d6d7570
feat: darkmode v3
coredoesdev Apr 5, 2026
cf32030
chore(darkmode): format and code cleanup
coredoesdev Apr 5, 2026
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
1,564 changes: 115 additions & 1,449 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions resources/assets/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
import "./ckeditor.js";
import "./bootstrap.js";
import "./helpers.js";
import "./theme.js";
import.meta.glob(["../img/**"]);
92 changes: 92 additions & 0 deletions resources/assets/js/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*!
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors
* Licensed under the Creative Commons Attribution 3.0 Unported License.
*/

(() => {
"use strict";

const getStoredTheme = () => localStorage.getItem("theme");
const setStoredTheme = (theme) => localStorage.setItem("theme", theme);

const getPreferredTheme = () => {
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}

return window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
};

const setTheme = (theme) => {
if (theme === "auto") {
document.documentElement.setAttribute(
"data-bs-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light"
);
} else {
document.documentElement.setAttribute("data-bs-theme", theme);
}
};

setTheme(getPreferredTheme());

const showActiveTheme = (theme, focus = false) => {
const themeSwitcher = document.querySelector("#bd-theme");

if (!themeSwitcher) {
return;
}

const themeSwitcherText = document.querySelector("#bd-theme-text");
const activeThemeIcon = document.querySelector(".theme-icon-active use");
const btnToActive = document.querySelector(
`[data-bs-theme-value="${theme}"]`
);
const svgOfActiveBtn = btnToActive
.querySelector("svg use")
.getAttribute("href");

document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
element.classList.remove("active");
element.setAttribute("aria-pressed", "false");
});

btnToActive.classList.add("active");
btnToActive.setAttribute("aria-pressed", "true");
activeThemeIcon.setAttribute("href", svgOfActiveBtn);
const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);

if (focus) {
themeSwitcher.focus();
}
};

window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", () => {
const storedTheme = getStoredTheme();
if (storedTheme !== "light" && storedTheme !== "dark") {
setTheme(getPreferredTheme());
}
});

window.addEventListener("DOMContentLoaded", () => {
showActiveTheme(getPreferredTheme());

document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
toggle.addEventListener("click", () => {
const theme = toggle.getAttribute("data-bs-theme-value");
setStoredTheme(theme);
setTheme(theme);
showActiveTheme(theme, true);
});
});
});
})();
2 changes: 2 additions & 0 deletions resources/assets/sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
$color-mode-type: media-query;
// Body

$body-bg: #f5f8fa;

// Typography
Expand Down
31 changes: 21 additions & 10 deletions resources/assets/sass/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ $font-family-base: "Hind Siliguri", sans-serif;

html,
body {
background-color: #fff;
color: black;
--bs-body-font-family: "Hind Siliguri", sans-serif;
--bs-body-font-size: 1rem;
--bs-body-font-weight: 100;
Expand Down Expand Up @@ -151,15 +149,11 @@ body {
}

.view-header {
background-color: #f0f0f0;
}

.tab-link {
color: black;
background-color: var(--bs-secondary-bg);
}

.item-black {
color: black;
color: var(--bs-body-color);
}

.bronze {
Expand All @@ -168,6 +162,7 @@ body {

div.bronze-bg {
background-color: #c9ae5d;
color: rgb(33, 37, 41);
}

.pyrite {
Expand All @@ -176,18 +171,19 @@ div.bronze-bg {

div.pyrite-bg {
background-color: #ffdf00;
color: rgb(33, 37, 41);
}

div.hours-danger,
li.hours-danger,
td.hours-danger {
background-color: #e6b0aa;
background-color: var(--bs-danger);
}

div.hours-success,
li.hours-success,
td.hours-success {
background-color: #a9dfbf;
background-color: var(--bs-success);
}

.navbar-brand img {
Expand Down Expand Up @@ -220,6 +216,21 @@ a {
text-decoration: none;
}

@include color-mode(dark) {
.logo-light {
display: none;
}
}
@include color-mode(light) {
.logo-dark {
display: none;
}
}

.tab-link {
color: var(--bs-secondary-color);
}

.ck-content strong {
font-weight: bold !important;
}
2 changes: 1 addition & 1 deletion resources/assets/sass/dashboard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ input:checked + .slider:before {

div.clocks div.card-body {
text-align: center;
background-color: lightgrey;
background-color: var(--bs-tertiary-bg);
}

div.clocks iframe {
Expand Down
5 changes: 2 additions & 3 deletions resources/assets/sass/footer_white.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
#myFooter .footer-copyright {
margin-bottom: 35px;
text-align: center;
color: #777;
}

#myFooter ul {
Expand All @@ -19,8 +18,8 @@
}

#myFooter a {
color: #282b2d;
font-size: 18px;
color: var(--bs-secondary);
}

table.availability td {
Expand All @@ -46,7 +45,7 @@ table.availability td.available {
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
background-color: #eee;
background-color: var(--bs-secondary-bg);
}

#myFooter .fa {
Expand Down
18 changes: 14 additions & 4 deletions resources/assets/sass/profile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,20 @@
color: inherit;
}

.tng-received {
background-color: aqua;
@media (prefers-color-scheme: light) {
.tng-received {
background-color: aqua;
}
.tng-given {
background-color: lightgray;
}
}

.tng-given {
background-color: lightgray;
@media (prefers-color-scheme: dark) {
.tng-received {
background-color: darken(aqua, 20%);
}
.tng-given {
background-color: darken(lightgray, 40%);
}
}
2 changes: 1 addition & 1 deletion resources/assets/sass/roster.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
thead.sticky th {
background: white;
background: var(--bs-secondary-bg);
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
Expand Down
4 changes: 2 additions & 2 deletions resources/assets/sass/sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
}

#pill-sidebar button {
color: #606060;
color: var(--bs-secondary-color);
font-weight: bold;
font-size: 12px;
}
#pill-sidebar a.nav-link {
color: black;
color: var(--bs-body-color);
font-size: 14px;
}

Expand Down
4 changes: 2 additions & 2 deletions resources/views/dashboard/admin/incident_reports/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#new" role="tab" data-bs-toggle="tab" style="color:black">New Reports</a>
<a class="nav-link active" href="#new" role="tab" data-bs-toggle="tab" >New Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#archive" role="tab" data-bs-toggle="tab" style="color:black">Archived Reports</a>
<a class="nav-link" href="#archive" role="tab" data-bs-toggle="tab" >Archived Reports</a>
</li>
</ul>
<div class="tab-content">
Expand Down
6 changes: 3 additions & 3 deletions resources/views/dashboard/admin/roster/edit.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@
<div class="container">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#profile" role="tab" data-bs-toggle="tab" style="color:black"><i class="fas fa-id-card"></i>&nbsp;Member Profile</a>
<a class="nav-link active" href="#profile" role="tab" data-bs-toggle="tab" ><i class="fas fa-id-card"></i>&nbsp;Member Profile</a>
</li>
@if(Auth::user()->isAbleTo('roster') || Auth::user()->isAbleTo('train') || Auth::user()->hasRole('ec'))
<li class="nav-item">
<a class="nav-link" href="#certifications" role="tab" data-bs-toggle="tab" style="color:black"><i class="fas fa-graduation-cap"></i>&nbsp;Controller Certifications</a>
<a class="nav-link" href="#certifications" role="tab" data-bs-toggle="tab" ><i class="fas fa-graduation-cap"></i>&nbsp;Controller Certifications</a>
</li>
@endif
@if(Auth::user()->isAbleTo('roster') || Auth::user()->isAbleTo('events'))
<li class="nav-item">
<a class="nav-link" href="#events" role="tab" data-bs-toggle="tab" style="color:black"><i class="fa-solid fa-chart-line"></i>&nbsp;Event Participation</a>
<a class="nav-link" href="#events" role="tab" data-bs-toggle="tab" ><i class="fa-solid fa-chart-line"></i>&nbsp;Event Participation</a>
</li>
@endif
</ul>
Expand Down
8 changes: 4 additions & 4 deletions resources/views/dashboard/admin/roster/new_vis.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,15 +129,15 @@
@elseif($c->app == 2)
<td><center><i class="fas fa-check" style="color:green"></i></center></td>
@elseif($c->app == 90)
<td><center><b style="color:blue;">A80 SAT</b></center></td>
<td><center><b>A80 SAT</b></center></td>
@elseif($c->app == 91)
<td><center><b style="color:blue;">A80 DR</b></center></td>
<td><center><b>A80 DR</b></center></td>
@elseif($c->app == 92)
<td><center><b style="color:blue;">A80 TAR</b></center></td>
<td><center><b>A80 TAR</b></center></td>
@elseif($c->app == 99)
<td><center><i class="fab fa-stripe-s" data-bs-toggle="tooltip" style="color:#c1ad13" title="Expires: {{ $c->solo }}"></i></center></td>
@elseif($c->app == 89)
<td><center style="color:#c1ad13">M</center></td>
<td><center>M</center></td>
@endif
@if($c->ctr == 0)
<td><center><i class="fas fa-times" style="color:red"></i></center></td>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/dashboard/admin/roster/purge.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
@php ($active = ' active')
@endif
<li class="nav-item">
<a class="nav-link{{ $active }}" href="#{{ $statCategory }}" role="tab" data-bs-toggle="tab" style="color:black">{{ ucfirst($statCategory) }} Controllers</a>
<a class="nav-link{{ $active }}" href="#{{ $statCategory }}" role="tab" data-bs-toggle="tab" >{{ ucfirst($statCategory) }} Controllers</a>
</li>
@endforeach
<li class="nav-item">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/dashboard/admin/scenery/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
@php ($active = ' active')
@endif
<li class="nav-item">
<a class="nav-link tab-link{{ $active }}" href="#{{ $sceneryCategory }}" role="tab" data-bs-toggle="tab" style="color:black">{{ $sceneryDescription }}</a>
<a class="nav-link tab-link{{ $active }}" href="#{{ $sceneryCategory }}" role="tab" data-bs-toggle="tab" >{{ $sceneryDescription }}</a>
</li>
@endforeach
</ul>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/dashboard/controllers/events/index.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<td>{{ $e->date }}</td>
<td>
{{ $e->start_time }} to {{ $e->end_time }} Zulu
({{ timeToLocal($e->start_time, Auth::user()->timezone) }} to {{ timeToLocal($e->end_time, Auth::user()->timezone) }} <a style="color:inherit" href="#" data-bs-toggle="tooltip"
({{ timeToLocal($e->start_time, Auth::user()->timezone) }} to {{ timeToLocal($e->end_time, Auth::user()->timezone) }} <a href="#" data-bs-toggle="tooltip"
title="Showing times in {{ Auth::user()->timezone }}. You can change this on your profile."><i
class="fas fa-info-circle"></i></a>)
</td>
Expand Down
10 changes: 5 additions & 5 deletions resources/views/dashboard/controllers/events/view.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<h5><b>Date:</b> {{ $event->date }}</h5>
<h5><b>Time:</b>
{{ $event->start_time }} to {{ $event->end_time }} Zulu
({{ $local_start_time }} to {{ $local_end_time }} local <a style="color:inherit" href="#"
({{ $local_start_time }} to {{ $local_end_time }} local <a href="#"
data-bs-toggle="tooltip"
title="Showing times in {{ $timezone }}. You can change this on your profile."><i
class="fas fa-info-circle"></i></a>)
Expand All @@ -47,7 +47,7 @@ class="fas fa-info-circle"></i></a>)
Support Event
@else
Unverified Support Event
<a style="color:inherit" href="#" data-bs-toggle="tooltip" title="Verify by setting the Event Type to 'Support Event' on the Edit Event page."><i class="fas fa-info-circle"></i></a>
<a href="#" data-bs-toggle="tooltip" title="Verify by setting the Event Type to 'Support Event' on the Edit Event page."><i class="fas fa-info-circle"></i></a>
@endif
@else
@if($event->type == App\Event::$TYPES["LOCAL"])
Expand Down Expand Up @@ -100,7 +100,7 @@ class="fas fa-info-circle"></i></a>)
</td>
<td>

<a style="color:inherit" href="#" data-bs-toggle="tooltip" title="
<a href="#" data-bs-toggle="tooltip" title="
@if($r->start_time != null)
{{ timeToLocal($r->start_time, Auth::user()->timezone) }}
@else
Expand Down Expand Up @@ -279,7 +279,7 @@ class="fas fa-info-circle"></i></a>)
<p>
@if(Auth::user()->isAbleTo('events'))
<a href="/dashboard/admin/events/positions/unassign/{{ $c->id }}"
style="color:inherit" data-bs-toggle="tooltip"
data-bs-toggle="tooltip"
title="Unassign Controller"><i class="fas fa-times"></i></a>
&nbsp;
@endif
Expand Down Expand Up @@ -311,7 +311,7 @@ class="text-success" data-bs-toggle="tooltip"
{{ $event->end_time }}z)
@endif

<a style="color:inherit" href="#" data-bs-toggle="tooltip" title="
<a href="#" data-bs-toggle="tooltip" title="
@if($c->start_time != null)
{{ timeToLocal($c->start_time, Auth::user()->timezone) }}
@else
Expand Down
Loading
Loading