💄 style(css): remove light mode overrides
- delete CSS rules for light mode to maintain a single dark mode theme
♻️ refactor(html): enforce dark mode and remove theme toggle
- simplify theme management by permanently enabling dark mode
- remove theme toggle button and related JavaScript logic
This commit is contained in:
parent
79aa77348b
commit
c6a2ed928b
2 changed files with 2 additions and 67 deletions
|
|
@ -3,46 +3,3 @@ body {
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
|
||||||
"Segoe UI", sans-serif;
|
"Segoe UI", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Light-mode overrides for commonly used slate backgrounds/texts */
|
|
||||||
html:not(.dark) body {
|
|
||||||
background-color: #f8fafc;
|
|
||||||
color: #0f172a;
|
|
||||||
}
|
|
||||||
html:not(.dark) .bg-slate-950,
|
|
||||||
html:not(.dark) .bg-slate-900,
|
|
||||||
html:not(.dark) .bg-slate-900\\/80,
|
|
||||||
html:not(.dark) .bg-slate-900\\/70,
|
|
||||||
html:not(.dark) .bg-slate-900\\/60,
|
|
||||||
html:not(.dark) .bg-slate-900\\/40,
|
|
||||||
html:not(.dark) .bg-slate-800 {
|
|
||||||
background-color: #ffffff !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .border-slate-800,
|
|
||||||
html:not(.dark) .border-slate-800\\/80,
|
|
||||||
html:not(.dark) .border-slate-700 {
|
|
||||||
border-color: #e2e8f0 !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .text-slate-100,
|
|
||||||
html:not(.dark) .text-slate-200,
|
|
||||||
html:not(.dark) .text-slate-300 {
|
|
||||||
color: #0f172a !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .text-slate-400 {
|
|
||||||
color: #334155 !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .text-slate-500 {
|
|
||||||
color: #475569 !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .bg-slate-800 {
|
|
||||||
background-color: #f1f5f9 !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .bg-slate-900\\/60 {
|
|
||||||
background-color: rgba(255, 255, 255, 0.85) !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .bg-slate-900\\/70 {
|
|
||||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
|
||||||
}
|
|
||||||
html:not(.dark) .bg-slate-900\\/80 {
|
|
||||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -22,16 +22,8 @@
|
||||||
<link rel="stylesheet" href="/static/style.css" />
|
<link rel="stylesheet" href="/static/style.css" />
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Apply persisted theme preference; default is dark.
|
// Always force dark mode (no toggle).
|
||||||
(function () {
|
document.documentElement.classList.add("dark");
|
||||||
const stored = localStorage.getItem("fleetledger-theme");
|
|
||||||
const html = document.getElementById("html-root");
|
|
||||||
if (stored === "light") {
|
|
||||||
html.classList.remove("dark");
|
|
||||||
} else {
|
|
||||||
html.classList.add("dark");
|
|
||||||
}
|
|
||||||
})();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% block extra_head %}{% endblock %}
|
{% block extra_head %}{% endblock %}
|
||||||
|
|
@ -103,13 +95,6 @@
|
||||||
{% if not loop.last %}<span class="text-slate-700">|</span>{% endif %}
|
{% if not loop.last %}<span class="text-slate-700">|</span>{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
id="theme-toggle"
|
|
||||||
class="rounded-lg border border-slate-700 bg-slate-900/60 px-2.5 py-1 text-slate-300 hover:border-slate-500 hover:text-white"
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
🌓
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
@ -129,13 +114,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Theme toggle button handler
|
|
||||||
document.getElementById("theme-toggle").addEventListener("click", () => {
|
|
||||||
const html = document.getElementById("html-root");
|
|
||||||
const isDark = html.classList.toggle("dark");
|
|
||||||
localStorage.setItem("fleetledger-theme", isDark ? "dark" : "light");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Register service worker for PWA
|
// Register service worker for PWA
|
||||||
if ("serviceWorker" in navigator) {
|
if ("serviceWorker" in navigator) {
|
||||||
navigator.serviceWorker
|
navigator.serviceWorker
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue