From 5d1ec770c94c9934529f7abd7fb35a923ba97d3a Mon Sep 17 00:00:00 2001
From: Lukas <lukas@slucky.de>
Date: Tue, 29 Nov 2022 00:44:00 +0100
Subject: [PATCH] Improve button and input contrast in dark mode (#1456)

Co-authored-by: Lauris BH <lauris@nix.lv>
---
 web/src/components/atomic/Button.vue   | 6 +++---
 web/src/components/form/Checkbox.vue   | 4 ++--
 web/src/components/form/RadioField.vue | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/src/components/atomic/Button.vue b/web/src/components/atomic/Button.vue
index 4c069c6ff..96d18cffa 100644
--- a/web/src/components/atomic/Button.vue
+++ b/web/src/components/atomic/Button.vue
@@ -5,11 +5,11 @@
     :class="{
       'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-600 dark:border-dark-400 dark:hover:bg-dark-gray-800':
         color === 'gray',
-      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-400 dark:bg-lime-900 dark:hover:bg-lime-800':
+      'bg-lime-600 hover:bg-lime-700 border-lime-800 text-white dark:text-gray-300 dark:bg-lime-900 dark:hover:bg-lime-800':
         color === 'green',
-      'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-400 dark:bg-cyan-900 dark:hover:bg-cyan-800':
+      'bg-cyan-600 hover:bg-cyan-700 border-cyan-800 text-white dark:text-gray-300 dark:bg-cyan-900 dark:hover:bg-cyan-800':
         color === 'blue',
-      'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-400 dark:bg-red-900 dark:hover:bg-red-800':
+      'bg-red-500 hover:bg-red-600 border-red-700 text-white dark:text-gray-300 dark:bg-red-900 dark:hover:bg-red-800':
         color === 'red',
       ...passedClasses,
     }"
diff --git a/web/src/components/form/Checkbox.vue b/web/src/components/form/Checkbox.vue
index 8e236e0b6..47f0e3d07 100644
--- a/web/src/components/form/Checkbox.vue
+++ b/web/src/components/form/Checkbox.vue
@@ -3,7 +3,7 @@
     <input
       :id="`checkbox-${id}`"
       type="checkbox"
-      class="checkbox flex-shrink-0 relative border border-gray-400 dark:border-gray-600 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-800 dark:checked:border-lime-800 focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
+      class="checkbox flex-shrink-0 relative border border-gray-400 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
       :checked="innerValue"
       @click="innerValue = !innerValue"
     />
@@ -82,7 +82,7 @@ export default defineComponent({
   border-width: 0 2px 2px 0;
   transform: translate(-50%, -60%) rotate(45deg);
   opacity: 0;
-  @apply dark:border-gray-400;
+  @apply dark:border-gray-300;
 }
 
 .checkbox:checked::before {
diff --git a/web/src/components/form/RadioField.vue b/web/src/components/form/RadioField.vue
index b609e3076..a3d45b4b9 100644
--- a/web/src/components/form/RadioField.vue
+++ b/web/src/components/form/RadioField.vue
@@ -3,7 +3,7 @@
     <input
       :id="`radio-${id}-${option.value}`"
       type="radio"
-      class="radio relative flex-shrink-0 border border-gray-400 dark:border-gray-600 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-700 dark:checked:border-lime-700 focus-visible:border-gray-600 dark:focus-visible:border-gray-400"
+      class="radio relative flex-shrink-0 border border-gray-400 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 focus-visible:border-gray-600 dark:(border-gray-600 checked:bg-lime-700 checked:border-lime-700 focus-visible:border-gray-300 checked:focus-visible:border-gray-300)"
       :value="option.value"
       :checked="innerValue.includes(option.value)"
       @click="innerValue = option.value"
@@ -81,7 +81,7 @@ export default defineComponent({
   background: white;
   transform: translate(-50%, -50%);
   opacity: 0;
-  @apply dark:bg-gray-400;
+  @apply dark:bg-gray-300;
 }
 
 .radio:checked::before {