From 442e13b7c7e78b91771fe64bb2f2435bf5beedfe Mon Sep 17 00:00:00 2001 From: Christian Beutel <> Date: Thu, 22 Feb 2024 01:00:09 +0100 Subject: [PATCH] adds dark mode --- web/src/{ => css}/app.css | 0 web/src/{ => css}/components.css | 8 +- web/src/css/theme.css | 47 +++++++++++ web/src/lib/components/base/dropdown.svelte | 10 +-- web/src/lib/components/base/modal.svelte | 2 +- .../lib/components/base/radio_group.svelte | 10 +-- web/src/lib/components/base/search.svelte | 8 +- web/src/lib/components/base/select.svelte | 2 +- web/src/lib/components/base/slider.svelte | 3 + web/src/lib/components/base/text_field.svelte | 4 +- web/src/lib/components/base/textarea.svelte | 2 +- web/src/lib/components/base/toggle.svelte | 10 ++- web/src/lib/components/earth.svelte | 75 ++++++++++++++---- web/src/lib/components/footer.svelte | 2 +- web/src/lib/components/nav_bar.svelte | 22 ++++- web/src/lib/components/scene.svelte | 15 +++- .../lib/components/trail/trail_card.svelte | 2 +- .../components/trail/trail_list_item.svelte | 3 +- web/src/lib/meilisearch.ts | 4 +- web/src/lib/stores/theme_store.ts | 14 ++++ web/src/routes/+layout.svelte | 20 +++-- web/src/routes/+page.svelte | 4 +- web/src/routes/trail/edit/[id]/+page.svelte | 10 +-- web/src/routes/trail/view/[id]/+page.svelte | 9 ++- web/src/routes/trails/+page.svelte | 20 ++--- web/static/models/earth2.glb | Bin 0 -> 143888 bytes web/tailwind.config.js | 17 +++- 27 files changed, 240 insertions(+), 83 deletions(-) rename web/src/{ => css}/app.css (100%) rename web/src/{ => css}/components.css (81%) create mode 100644 web/src/css/theme.css create mode 100644 web/src/lib/stores/theme_store.ts create mode 100644 web/static/models/earth2.glb diff --git a/web/src/app.css b/web/src/css/app.css similarity index 100% rename from web/src/app.css rename to web/src/css/app.css diff --git a/web/src/components.css b/web/src/css/components.css similarity index 81% rename from web/src/components.css rename to web/src/css/components.css index b2b0eb78..f8e18032 100644 --- a/web/src/components.css +++ b/web/src/css/components.css @@ -3,7 +3,7 @@ @import 'tailwindcss/components'; .btn-primary { - @apply h-10 text-white rounded-lg px-4 py-2 bg-primary font-semibold transition-all hover:bg-gray-900 focus:ring-4 ring-gray-400 + @apply h-10 text-white rounded-lg px-4 py-2 bg-primary font-semibold transition-all hover:bg-primary-hover focus:ring-4 ring-input-border-focus } .btn-large { @@ -11,7 +11,7 @@ } .btn-secondary { - @apply rounded-lg px-4 py-2 border border-primary font-medium transition-all hover:bg-gray-100 focus:ring-4 ring-gray-200 + @apply rounded-lg px-4 py-2 border border-input-border-focus font-medium transition-all hover:bg-secondary-hover focus:ring-4 ring-input-border-focus } .btn-danger { @@ -22,6 +22,10 @@ @apply bg-gray-500 hover:bg-gray-500 } +.btn-icon { + @apply rounded-full aspect-square h-7 hover:bg-secondary-hover focus:ring-4 ring-input-border-focus transition-colors; +} + .tab { @apply p-4 rounded-t-lg } diff --git a/web/src/css/theme.css b/web/src/css/theme.css new file mode 100644 index 00000000..e6e4e5d0 --- /dev/null +++ b/web/src/css/theme.css @@ -0,0 +1,47 @@ +.light { + --primary: 36, 39, 52; + --primary-hover: 17, 24, 39; + --secondary-hover: 243, 244, 246; + + --background: 255, 255, 255; + --content: 0, 0, 0; + + --input-background: 249, 250, 251; + --input-border: 209, 213, 219; + --input-border-focus: 36, 39, 52; + + --menu-background: 255, 255, 255; + --menu-item-background-hover: 243, 244, 246; + --menu-item-background-focus: 229, 231, 235; + + --footer-background: 36, 39, 52; + + --separator: 17, 24, 39; + + background: rgba(var(--background)); + color: rgba(var(--content)); +} + +.dark { + --primary: 36, 39, 52; + --primary-hover: 44, 48, 64; + --secondary-hover: 36, 39, 52; + + --background: 7, 10, 36; + --content: 255, 255, 255; + + --input-background: 36, 39, 52; + --input-border: 43, 46, 61; + --input-border-focus: 108, 115, 150; + + --menu-background: 33, 36, 54; + --menu-item-background-hover: 43, 46, 69; + --menu-item-background-focus: 25, 26, 41; + + --footer-background: 10, 14, 48; + + --separator: 108, 115, 150; + + background: rgba(var(--background)); + color: rgba(var(--content)); +} \ No newline at end of file diff --git a/web/src/lib/components/base/dropdown.svelte b/web/src/lib/components/base/dropdown.svelte index 1ccf9327..44f9de4a 100644 --- a/web/src/lib/components/base/dropdown.svelte +++ b/web/src/lib/components/base/dropdown.svelte @@ -36,19 +36,17 @@
{#if isOpen}
{/each} diff --git a/web/src/lib/components/base/search.svelte b/web/src/lib/components/base/search.svelte index 00f29051..69830f8a 100644 --- a/web/src/lib/components/base/search.svelte +++ b/web/src/lib/components/base/search.svelte @@ -54,13 +54,13 @@ } -
+
{#if value.length > 0}