apps/mapix
4
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

feat: move theme toggle to top right

Browse Source
This commit is contained in:
Arne Baeumler
2026-06-13 07:53:53 +02:00
parent d2e77d9dee
commit 99cad2fbaa
1 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/server/request-handler.ts
View File

@@ -367,8 +367,27 @@ function htmlPage(): string {
} }
.theme-toggle { .theme-toggle {
min-width: 112px; position: fixed;
top: 16px;
right: 16px;
z-index: 900;
width: 40px;
height: 40px;
padding: 0;
justify-content: center; justify-content: center;
background: var(--timeline-surface-soft);
color: var(--timeline-text);
border: 1px solid var(--timeline-border);
box-shadow: var(--shadow-soft);
}
.theme-toggle:hover {
background: var(--timeline-surface-strong);
}
.theme-toggle .button-icon {
width: 18px;
height: 18px;
} }
.panel-collapse { .panel-collapse {
@@ -924,6 +943,11 @@ function htmlPage(): string {
overflow: visible; overflow: visible;
} }
.theme-toggle {
top: 12px;
right: 12px;
}
.list { .list {
max-height: min(52vh, 420px); max-height: min(52vh, 420px);
--photo-thumb-size: 64px; --photo-thumb-size: 64px;
@@ -951,6 +975,14 @@ function htmlPage(): string {
</style> </style>
</head> </head>
<body data-theme="light"> <body data-theme="light">
<button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode">
<span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1.8V3.1M8 12.9v1.3M3.1 3.1l.9.9M12 12l.9.9M1.8 8H3.1M12.9 8h1.3M3.1 12.9l.9-.9M12 4l.9-.9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
<circle cx="8" cy="8" r="3.2" stroke="currentColor" stroke-width="1.4"/>
</svg>
</span>
</button>
<main> <main>
<section class="map-panel"> <section class="map-panel">
<div id="map"></div> <div id="map"></div>
@@ -967,14 +999,6 @@ function htmlPage(): string {
</svg> </svg>
</span> </span>
</button> </button>
<button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">
<span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
</svg>
</span>
<span id="theme-toggle-label" class="theme-toggle-label">Light mode</span>
</button>
</div> </div>
<label> <label>
Share URL Share URL
@@ -1153,7 +1177,6 @@ function htmlPage(): string {
const timelineBrush = mustGet("timeline-brush"); const timelineBrush = mustGet("timeline-brush");
const themeToggle = mustGet("theme-toggle"); const themeToggle = mustGet("theme-toggle");
const themeToggleIcon = mustGet("theme-toggle-icon"); const themeToggleIcon = mustGet("theme-toggle-icon");
const themeToggleLabel = mustGet("theme-toggle-label");
const sidebarCollapseButton = mustGet("sidebar-collapse"); const sidebarCollapseButton = mustGet("sidebar-collapse");
const sidebarCollapseIcon = mustGet("sidebar-collapse-icon"); const sidebarCollapseIcon = mustGet("sidebar-collapse-icon");
const timelineCollapseButton = mustGet("timeline-collapse"); const timelineCollapseButton = mustGet("timeline-collapse");
@@ -1277,14 +1300,12 @@ function htmlPage(): string {
setMapTheme(resolvedTheme); setMapTheme(resolvedTheme);
if (resolvedTheme === "dark") { if (resolvedTheme === "dark") {
themeToggleLabel.textContent = "Light mode";
themeToggle.setAttribute("aria-label", "Switch to light mode"); themeToggle.setAttribute("aria-label", "Switch to light mode");
themeToggleIcon.innerHTML = themeToggleIcon.innerHTML =
'<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
'<path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>' + '<path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>' +
"</svg>"; "</svg>";
} else { } else {
themeToggleLabel.textContent = "Dark mode";
themeToggle.setAttribute("aria-label", "Switch to dark mode"); themeToggle.setAttribute("aria-label", "Switch to dark mode");
themeToggleIcon.innerHTML = themeToggleIcon.innerHTML =
'<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' + '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +