brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds dark mode

Browse Source
This commit is contained in:
Christian Beutel
2024-02-22 02:53:06 +01:00
parent 442e13b7c7
commit e41649e395
18 changed files with 113 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/base/datepicker.svelte
View File

@@ -14,7 +14,7 @@
<div class="flex items-center gap-2">
<input
{name}
class="bg-gray-50 border rounded-md p-3 transition-colors focus:border-primary focus:outline-none focus:ring-0 w-full"
class="bg-input-background border border-input-border rounded-md p-3 transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0 w-full"
class:border-red-400={error.length > 0}
class:bg-red-50={error.length > 0}
type="date"

10
web/src/lib/components/base/modal.svelte
View File

@@ -15,15 +15,15 @@
{id}
tabindex="-1"
aria-hidden="true"
class="relative w-full max-w-2xl max-h-full rounded-xl"
class="relative w-full max-w-2xl max-h-full rounded-xl text-content"
>
<!-- Modal content -->
<div class="relative bg-white shadow dark:bg-gray-700">
<div class="relative bg-background shadow">
<!-- Modal header -->
<div
class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"
class="flex items-center justify-between p-4 md:p-5 border-b border-separator rounded-t"
>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
<h3 class="text-xl font-semibold">
{title}
</h3>
<button
@@ -41,7 +41,7 @@
</div>
<!-- Modal footer -->
<div
class="p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"
class="p-4 md:p-5 border-t border-separator rounded-b"
>
<slot name="footer" {closeModal} />
</div>

2
web/src/lib/components/base/radio_group.svelte
View File

@@ -29,7 +29,7 @@
type="radio"
checked={i == selected}
value={item.value}
class="w-4 h-4 accent-input-background border-input-border focus:ring-input-border-focus focus:ring-2"
class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
on:change={() => handleRadioChange(i)}
/>
<label for="{name}-radio-{i}" class="ms-2 text-sm">{item.text}</label>

2
web/src/lib/components/base/toggle.svelte
View File

@@ -14,7 +14,7 @@
value="1"
/>
<div
class="w-11 h-6 bg-input-background peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-border-focus rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-input-background"
class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"
></div>
<span class="ms-3 text-sm font-medium">{label}</span>
</label>