aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/ui/src/components/StatusToast.svelte
diff options
context:
space:
mode:
authorHsiangNianian <i@jyunko.cn>2026-01-14 18:40:01 +0800
committerHsiangNianian <i@jyunko.cn>2026-01-14 18:40:01 +0800
commit74849ad2d18586736d9677dfd10af4875f4ef2ca (patch)
tree8b4b4d130a58f45fae209bbcd3c8d57719eb9be4 /ui/src/components/StatusToast.svelte
parent26898fd7c7150b33b2b14af86f734d375483cc1d (diff)
downloadDropOut-74849ad2d18586736d9677dfd10af4875f4ef2ca.tar.gz
DropOut-74849ad2d18586736d9677dfd10af4875f4ef2ca.zip
feat: enhance dark mode support across UI components
- Updated BottomBar, HomeView, LoginModal, ModLoaderSelector, SettingsView, Sidebar, StatusToast, and VersionsView components for improved dark mode styling. - Adjusted color schemes for various elements to ensure better visibility and aesthetics in dark mode. - Added a theme property to settings to enforce dark mode as the default. - Refactored version badges in VersionsView for better color differentiation. - Enhanced button and input styles for consistency in both light and dark themes.
Diffstat (limited to 'ui/src/components/StatusToast.svelte')
-rw-r--r--ui/src/components/StatusToast.svelte10
1 files changed, 5 insertions, 5 deletions
diff --git a/ui/src/components/StatusToast.svelte b/ui/src/components/StatusToast.svelte
index 0d68778..4c981c7 100644
--- a/ui/src/components/StatusToast.svelte
+++ b/ui/src/components/StatusToast.svelte
@@ -5,19 +5,19 @@
{#if uiState.status !== "Ready"}
{#key uiState.status}
<div
- class="absolute top-12 right-12 bg-zinc-800/90 backdrop-blur border border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
+ class="absolute top-12 right-12 bg-white/90 dark:bg-zinc-800/90 backdrop-blur border border-zinc-200 dark:border-zinc-600 p-4 rounded-lg shadow-2xl max-w-sm animate-in fade-in slide-in-from-top-4 duration-300 z-50 group"
>
<div class="flex justify-between items-start mb-1">
- <div class="text-xs text-zinc-400 uppercase font-bold">Status</div>
+ <div class="text-xs text-zinc-500 dark:text-zinc-400 uppercase font-bold">Status</div>
<button
onclick={() => uiState.setStatus("Ready")}
- class="text-zinc-500 hover:text-white transition -mt-1 -mr-1 p-1"
+ class="text-zinc-400 hover:text-black dark:text-zinc-500 dark:hover:text-white transition -mt-1 -mr-1 p-1"
>
</button>
</div>
- <div class="font-mono text-sm whitespace-pre-wrap mb-2">{uiState.status}</div>
- <div class="w-full bg-zinc-700/50 h-1 rounded-full overflow-hidden">
+ <div class="font-mono text-sm whitespace-pre-wrap mb-2 text-gray-900 dark:text-gray-100">{uiState.status}</div>
+ <div class="w-full bg-gray-200 dark:bg-zinc-700/50 h-1 rounded-full overflow-hidden">
<div
class="h-full bg-indigo-500 origin-left w-full progress-bar"
></div>