From ac6558392ca3d1c284740c5e9e426d5181e40cb0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 21 Jun 2025 11:49:15 +0200
Subject: [PATCH] Fixed some more UI with dark mode
---
src/assets/scss/_buttons.scss | 10 +++++-----
src/assets/scss/_card.scss | 1 +
src/assets/scss/_forms.scss | 4 ++--
src/assets/scss/_leaflet.scss | 7 +++++--
src/assets/scss/radix/_dialog.scss | 9 +++++++--
src/components/global/CopyText.astro | 4 ++--
src/components/maps/overlay/LangSwitcherButton.vue | 2 +-
src/components/maps/overlay/MarkerCreator.vue | 1 +
src/components/maps/overlay/SearchMapSwitch.vue | 8 ++++++--
src/components/maps/overlay/SearchMarkers.vue | 2 +-
src/layouts/Layout.astro | 2 +-
11 files changed, 32 insertions(+), 18 deletions(-)
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 44561cfd..60f71070 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -19,7 +19,7 @@
&.btn-secondary {
&:not(:disabled) {
- background-color: var(--slate-200);
+ background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {
@@ -29,14 +29,14 @@
}
&:disabled {
- color: var(--slate-500);
- background-color: var(--slate-100);
+ color: color-mix(in srgb, var(--foreground) 50%, var(--background));
+ background-color: color-mix(in srgb, var(--foreground) 10%, var(--background));
}
}
&.btn-info {
&:not(:disabled) {
- background-color: var(--slate-200);
+ background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {
@@ -48,7 +48,7 @@
&.btn-danger {
&:not(:disabled) {
- background-color: var(--slate-200);
+ background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
&:hover,
&:focus-visible {
diff --git a/src/assets/scss/_card.scss b/src/assets/scss/_card.scss
index 4fdcbbf7..55da2ebe 100644
--- a/src/assets/scss/_card.scss
+++ b/src/assets/scss/_card.scss
@@ -2,6 +2,7 @@
padding-block: 0.75rem;
padding-inline: .75rem;
border-radius: 8px;
+ color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--border);
box-shadow: var(--shadow);
diff --git a/src/assets/scss/_forms.scss b/src/assets/scss/_forms.scss
index b7845e55..3b35fabd 100644
--- a/src/assets/scss/_forms.scss
+++ b/src/assets/scss/_forms.scss
@@ -14,7 +14,7 @@
display: block;
width: 100%;
padding: .4rem .5rem;
- border: 1px solid var(--slate-300);
+ border: 1px solid color-mix(in srgb, var(--foreground) 30%, var(--background));
font-size: .8em;
border-radius: var(--border-radius);
transition-property: box-shadow;
@@ -22,7 +22,7 @@
transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
&:focus-visible {
- box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--slate-300) 20%, transparent);
+ box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent) 20%, transparent);
}
}
}
diff --git a/src/assets/scss/_leaflet.scss b/src/assets/scss/_leaflet.scss
index 40a11a4e..d8b83da6 100644
--- a/src/assets/scss/_leaflet.scss
+++ b/src/assets/scss/_leaflet.scss
@@ -10,6 +10,8 @@
.leaflet-map-pane {
.leaflet-popup-pane {
.leaflet-popup-content-wrapper {
+ color: var(--foreground);
+ background-color: var(--background);
border-radius: var(--border-radius);
overflow: clip;
@@ -22,6 +24,7 @@
.leaflet-popup-tip {
width: .8rem;
height: .8rem;
+ background-color: var(--background);
}
}
@@ -29,7 +32,7 @@
.leaflet-tooltip {
&.capital-name {
padding: .2rem .4rem;
- color: #EEE;
+ color: var(--foreground);
font-weight: bold;
background: none;
border: none;
@@ -37,7 +40,7 @@
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- @include text.stroke(2, #18181b);
+ @include text.stroke(2, color-mix(in srgb, var(--foreground) 10%, var(--background)));
&::before {
display: none;
diff --git a/src/assets/scss/radix/_dialog.scss b/src/assets/scss/radix/_dialog.scss
index 025898be..eeca8e29 100644
--- a/src/assets/scss/radix/_dialog.scss
+++ b/src/assets/scss/radix/_dialog.scss
@@ -1,5 +1,5 @@
.dialog-overlay {
- background-color: color-mix(in srgb, var(--black) 40%, transparent);
+ background-color: color-mix(in srgb, var(--black) 50%, transparent);
position: fixed;
inset: 0;
animation: show-overlay 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -19,6 +19,7 @@
padding: 25px;
display: grid;
grid-template-rows: auto 1fr;
+ color: var(--foreground);
border-radius: var(--border-radius);
background-color: var(--background);
border: 1px solid var(--border);
@@ -46,7 +47,7 @@
}
font-size: 1em;
- color: var(--slate-800);
+ color: color-mix(in srgb, var(--foreground) 80%, var(--background));
line-height: 1.5;
> * + * {
@@ -71,6 +72,10 @@
}
}
+.dark .dialog-description a::after {
+ filter: invert(1);
+}
+
@keyframes show-overlay {
from {
opacity: 0;
diff --git a/src/components/global/CopyText.astro b/src/components/global/CopyText.astro
index 3eebe718..857b6c4c 100644
--- a/src/components/global/CopyText.astro
+++ b/src/components/global/CopyText.astro
@@ -62,7 +62,7 @@ button {
display: inline-flex;
align-items: center;
gap: .5ch;
- color: var(--slate-700);
+ color: color-mix(in srgb, var(--foreground) 70%, var(--background));
cursor: pointer;
text-underline-offset: 2px;
text-decoration: none;
@@ -75,7 +75,7 @@ button {
svg {
width: 1rem;
height: 1rem;
- fill: var(--slate-700);
+ fill: color-mix(in srgb, var(--foreground) 70%, var(--background));
}
}
diff --git a/src/components/maps/overlay/LangSwitcherButton.vue b/src/components/maps/overlay/LangSwitcherButton.vue
index 502f51a4..f9fd3806 100644
--- a/src/components/maps/overlay/LangSwitcherButton.vue
+++ b/src/components/maps/overlay/LangSwitcherButton.vue
@@ -49,7 +49,7 @@ a {
&:hover,
&:focus-visible {
- background-color: var(--slate-200);
+ background-color: color-mix(in srgb, var(--foreground) 20%, var(--background));
}
&[aria-current="page"] {
diff --git a/src/components/maps/overlay/MarkerCreator.vue b/src/components/maps/overlay/MarkerCreator.vue
index c24036f1..abcef28c 100644
--- a/src/components/maps/overlay/MarkerCreator.vue
+++ b/src/components/maps/overlay/MarkerCreator.vue
@@ -318,6 +318,7 @@ dialog {
max-width: calc(100% - 6rem);
padding: 1.5rem 2rem;
z-index: 9999;
+ color: var(--foreground);
background-color: var(--background);
border: 1px solid var(--border);
border-radius: .75rem;
diff --git a/src/components/maps/overlay/SearchMapSwitch.vue b/src/components/maps/overlay/SearchMapSwitch.vue
index 104dc676..5179ad0d 100644
--- a/src/components/maps/overlay/SearchMapSwitch.vue
+++ b/src/components/maps/overlay/SearchMapSwitch.vue
@@ -213,6 +213,10 @@ const menus: Menu[] = [
}
}
+.dark .legal::before {
+ filter: invert(1);
+}
+
.map-menu {
margin-top: .25rem;
margin-bottom: .5rem;
@@ -271,8 +275,8 @@ const menus: Menu[] = [
figcaption {
font-size: .75em;
text-align: center;
- color: var(--slate-500);
+ color: color-mix(in srgb, var(--foreground) 80%, var(--background));
}
}
}
-
\ No newline at end of file
+
diff --git a/src/components/maps/overlay/SearchMarkers.vue b/src/components/maps/overlay/SearchMarkers.vue
index 904ddd1e..23468c9c 100644
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -441,7 +441,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
}
&::-webkit-scrollbar-thumb {
- background-color: var(--slate-300);
+ background-color: color-mix(in srgb, var(--foreground) 30%, var(--background));
}
> * + * {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index d36c1701..30777892 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -58,7 +58,7 @@ const lang = getLangFromUrl(Astro.url) || defaultLang;
-
+