Darkmode hinzugefügt
This commit is contained in:
Erik Thiele
@@ -7,6 +7,13 @@
|
||||
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
|
||||
<link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||||
<script>
|
||||
(() => {
|
||||
const storedTheme = window.localStorage.getItem("keyadmin-theme");
|
||||
const theme = storedTheme === "dark" || storedTheme === "light" ? storedTheme : "light";
|
||||
document.documentElement.setAttribute("data-bs-theme", theme);
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
:root {
|
||||
--ccm-bg: #f4f6f8;
|
||||
@@ -78,6 +85,94 @@
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
--ccm-bg: #15181d;
|
||||
--ccm-text: #e5e7eb;
|
||||
--ccm-header: #0f1720;
|
||||
--ccm-surface: #15181d;
|
||||
--ccm-border: #2b3440;
|
||||
--ccm-muted: #9aa4b2;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] body {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card,
|
||||
[data-bs-theme="dark"] .dropdown-menu,
|
||||
[data-bs-theme="dark"] .table,
|
||||
[data-bs-theme="dark"] .table-responsive,
|
||||
[data-bs-theme="dark"] .login-card,
|
||||
[data-bs-theme="dark"] .page-shell,
|
||||
[data-bs-theme="dark"] .form-card {
|
||||
background-color: var(--ccm-bg);
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .page-section-title,
|
||||
[data-bs-theme="dark"] .grid > .card {
|
||||
background-color: var(--ccm-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card-table-shell {
|
||||
background-color: var(--ccm-bg);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .details th,
|
||||
[data-bs-theme="dark"] .details td,
|
||||
[data-bs-theme="dark"] .table > :not(caption) > * > * {
|
||||
border-color: var(--ccm-border);
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control,
|
||||
[data-bs-theme="dark"] .form-select {
|
||||
background-color: #11161d;
|
||||
color: var(--ccm-text);
|
||||
border-color: var(--ccm-border);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-control::placeholder,
|
||||
[data-bs-theme="dark"] .muted,
|
||||
[data-bs-theme="dark"] .page-section-title p,
|
||||
[data-bs-theme="dark"] .app-footer,
|
||||
[data-bs-theme="dark"] .table thead th {
|
||||
color: var(--ccm-muted);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .button-secondary {
|
||||
background: #11161d;
|
||||
color: var(--ccm-text);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .nav-surface .btn-white {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .nav-surface .btn.active {
|
||||
background-color: rgba(255, 255, 255, 0.92);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .theme-toggle {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.navbar-brand-wordmark strong {
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
@@ -260,6 +355,11 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.card-table-shell {
|
||||
border-radius: 0 0 1rem 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-table .btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -500,6 +600,9 @@
|
||||
<div class="navbar-nav flex-row order-md-last top-actions">
|
||||
{% if g.current_staff %}
|
||||
<span class="nav-link disabled">{{ g.current_staff.full_name }} ({{ g.current_staff.role }})</span>
|
||||
<button type="button" class="btn btn-outline-secondary me-2 theme-toggle" id="theme-toggle" aria-label="Darkmode umschalten" title="Darkmode umschalten">
|
||||
<i class="ti ti-moon"></i>
|
||||
</button>
|
||||
<a class="btn btn-outline-secondary" href="{{ url_for('logout') }}"><i class="ti ti-logout me-1"></i>Abmelden</a>
|
||||
{% else %}
|
||||
<a class="btn btn-primary" href="{{ url_for('login') }}"><i class="ti ti-login me-1"></i>Login</a>
|
||||
@@ -550,6 +653,25 @@
|
||||
</div>
|
||||
<script>
|
||||
window.addEventListener("load", () => {
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const root = document.documentElement;
|
||||
|
||||
const syncThemeToggle = () => {
|
||||
const theme = root.getAttribute("data-bs-theme") || "light";
|
||||
if (!themeToggle) return;
|
||||
themeToggle.innerHTML = theme === "dark" ? '<i class="ti ti-sun"></i>' : '<i class="ti ti-moon"></i>';
|
||||
};
|
||||
|
||||
if (themeToggle) {
|
||||
syncThemeToggle();
|
||||
themeToggle.addEventListener("click", () => {
|
||||
const nextTheme = (root.getAttribute("data-bs-theme") || "light") === "dark" ? "light" : "dark";
|
||||
root.setAttribute("data-bs-theme", nextTheme);
|
||||
window.localStorage.setItem("keyadmin-theme", nextTheme);
|
||||
syncThemeToggle();
|
||||
});
|
||||
}
|
||||
|
||||
window.setTimeout(() => {
|
||||
document.querySelectorAll(".flash-stack .alert").forEach((element) => {
|
||||
if (element.classList.contains("alert-error") || element.classList.contains("alert-danger") || element.classList.contains("alert-import-errors")) {
|
||||
|
||||
Reference in New Issue
Block a user