Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

android: fix duplicate plus icon and button contrast in dark mode

Browse Source 
Remove Plus icon from Add Exercise button (translation already includes +).
Use --primary-contrast instead of hardcoded white for button text so it's
legible in dark mode (nord0 on dark, white on light).
This commit is contained in:
Alexander Bocken
2026-03-23 17:13:01 +01:00
parent 4ba3960607
commit b9c68b48c3
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/routes/fitness/[workout=fitnessWorkout]/[active=fitnessActive]/+page.svelte
View File

@@ -1,7 +1,7 @@
<script> <script>
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { Plus, Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check, ChevronUp, ChevronDown, Flame, MapPin } from 'lucide-svelte'; import { Trash2, Play, Pause, Trophy, Clock, Dumbbell, Route, RefreshCw, Check, ChevronUp, ChevronDown, Flame, MapPin } from 'lucide-svelte';
import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n'; import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
const lang = $derived(detectFitnessLang($page.url.pathname)); const lang = $derived(detectFitnessLang($page.url.pathname));
@@ -742,7 +742,7 @@
<div class="workout-actions"> <div class="workout-actions">
<button class="add-exercise-btn" onclick={() => showPicker = true}> <button class="add-exercise-btn" onclick={() => showPicker = true}>
<Plus size={18} /> {t('add_exercise', lang)} {t('add_exercise', lang)}
</button> </button>
<button class="cancel-btn" onclick={async () => { workout.cancel(); await sync.onWorkoutEnd(); await goto(`/fitness/${sl.workout}`); }}> <button class="cancel-btn" onclick={async () => { workout.cancel(); await sync.onWorkoutEnd(); await goto(`/fitness/${sl.workout}`); }}>
{t('cancel_workout', lang)} {t('cancel_workout', lang)}
@@ -770,6 +770,11 @@
{/if} {/if}
<style> <style>
:global(:root) { --primary-contrast: white; }
@media (prefers-color-scheme: dark) {
:global(:root:not([data-theme="light"])) { --primary-contrast: var(--nord0); }
}
:global(:root[data-theme="dark"]) { --primary-contrast: var(--nord0); }
/* Completion screen */ /* Completion screen */
.completion { .completion {
display: flex; display: flex;
@@ -975,7 +980,7 @@
width: 100%; width: 100%;
padding: 0.85rem; padding: 0.85rem;
background: var(--color-primary); background: var(--color-primary);
color: white; color: var(--primary-contrast);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-weight: 700; font-weight: 700;
@@ -1031,7 +1036,7 @@
} }
.finish-btn { .finish-btn {
background: var(--color-primary); background: var(--color-primary);
color: white; color: var(--primary-contrast);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
@@ -1131,7 +1136,7 @@
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: var(--color-primary); background: var(--color-primary);
color: white; color: var(--primary-contrast);
border: none; border: none;
border-radius: 10px; border-radius: 10px;
font-weight: 700; font-weight: 700;