Add CSS variable for borders

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -51,7 +51,7 @@ const colorSchemeIconMapper = {
 <style scoped>
 .color-scheme-button {
     background: none;
-    border: 1.5px solid var(--dark-l-8);
+    border: 1.5px solid var(--border);
     border-radius: 50%;
     width: 36px;
     height: 36px;

src/features/search/components/Searchbar.vue

@@ -54,7 +54,7 @@ const submitSearch = function () {
     --padding-left: calc(var(--content-height) + var(--padding));
     display: flex;
     align-items: center;
-    border: 1.5px solid var(--light-d-3);
+    border: 1.5px solid var(--border);
     box-shadow: 0 0px 32px rgba(69, 98, 190, 0.25);
     border-radius: calc(var(--content-height) * 0.5 + var(--submit-button-padding-y) + var(--padding));
     padding: var(--padding);

src/features/search/views/SearchResultsView.vue

@@ -73,7 +73,7 @@ searchQueryModel.value = props.searchQuery;
     display: flex;
     justify-content: center;
     flex-direction: column;
-    outline: 1px solid var(--light-d-2);
+    outline: 1px solid var(--border);
 }
 
 @media (max-width: 48rem) {

src/styles/variables/colors.css

@@ -75,6 +75,8 @@ limitations under the License.
 
     --dark-bg:              var(--black-l-2);
     --light-bg:             var(--white);
+
+    --border:               var(--white-d-3);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -101,6 +103,8 @@ limitations under the License.
 
         --dark-bg:              var(--white);
         --light-bg:             oklch(0.18 0 0);
+
+        --border:               var(--black-l-6);
     }
 }
 
@@ -127,4 +131,6 @@ limitations under the License.
 
     --dark-bg:              var(--white);
     --light-bg:             oklch(0.18 0 0);
+
+    --border:               var(--black-l-6);
 }