Dark mode and minor interface tweaks (#2016)

Co-authored-by: Sam Freund <samf.236@proton.me>

photon-client/src/components/common/pv-input.vue

@@ -38,8 +38,9 @@ const handleKeydown = ({ key }) => {
       break;
   }
 };
-</script>
 
+// TODO: fix error text theming
+</script>
 <template>
   <div class="d-flex">
     <v-col :cols="labelCols || 12 - inputCols" class="d-flex align-center pl-0 pt-10px pb-10px">
@@ -50,13 +51,12 @@ const handleKeydown = ({ key }) => {
       <v-text-field
         v-model="value"
         density="compact"
-        color="accent"
+        color="primary"
         :placeholder="placeholder"
         :disabled="disabled"
         :error-messages="errorMessage"
         :rules="rules"
         hide-details="auto"
-        class="light-error"
         variant="underlined"
         @keydown="handleKeydown"
       />

photon-client/src/components/common/pv-number-input.vue

@@ -38,7 +38,7 @@ const localValue = computed({
         density="compact"
         hide-details
         single-line
-        color="accent"
+        color="primary"
         type="number"
         variant="underlined"
         style="width: 70px"

photon-client/src/components/common/pv-radio.vue

@@ -30,7 +30,7 @@ withDefaults(
           v-for="(radioName, index) in list"
           :key="index"
           :value="index"
-          color="#ffd843"
+          color="rgb(var(--v-theme-primary))"
           :label="radioName"
           :model-value="index"
           :disabled="disabled"

photon-client/src/components/common/pv-range-slider.vue

@@ -67,15 +67,15 @@ const checkNumberRange = (v: string): boolean => {
         :disabled="disabled"
         hide-details
         class="align-center ml-0 mr-0"
-        :color="inverted ? 'rgba(255, 255, 255, 0.2)' : 'accent'"
-        :track-color="inverted ? 'accent' : undefined"
-        thumb-color="accent"
+        color="primary"
+        :track-color="inverted ? 'primary' : undefined"
+        thumb-color="primary"
         :step="step"
       >
         <template #prepend>
           <v-text-field
             :model-value="localValue[0]"
-            color="accent"
+            color="primary"
             class="mt-0 pt-0"
             density="compact"
             hide-details
@@ -93,7 +93,7 @@ const checkNumberRange = (v: string): boolean => {
         <template #append>
           <v-text-field
             :model-value="localValue[1]"
-            color="accent"
+            color="primary"
             class="mt-0 pt-0"
             density="compact"
             hide-details

photon-client/src/components/common/pv-slider.vue

@@ -13,15 +13,9 @@ const props = withDefaults(
     disabled?: boolean;
     sliderCols?: number;
   }>(),
-  {
-    step: 1,
-    disabled: false,
-    sliderCols: 8
-  }
+  { step: 1, disabled: false, sliderCols: 8 }
 );
-const emit = defineEmits<{
-  (e: "update:modelValue", value: number): void;
-}>();
+const emit = defineEmits<{ (e: "update:modelValue", value: number): void }>();
 
 // Debounce function
 function debounce(func: (...args: any[]) => void, wait: number) {
@@ -54,7 +48,7 @@ const localValue = computed({
         :max="max"
         :min="min"
         hide-details
-        color="accent"
+        color="primary"
         :disabled="disabled"
         :step="step"
         append-icon="mdi-menu-right"
@@ -66,7 +60,7 @@ const localValue = computed({
     <v-col :cols="1" class="pr-0 pt-10px pb-10px">
       <v-text-field
         :model-value="localValue"
-        color="accent"
+        color="primary"
         :max="max"
         :min="min"
         :disabled="disabled"

photon-client/src/components/common/pv-switch.vue

@@ -3,18 +3,8 @@ import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
 const value = defineModel<boolean>();
 withDefaults(
-  defineProps<{
-    label?: string;
-    tooltip?: string;
-    disabled?: boolean;
-    labelCols?: number;
-    switchCols?: number;
-  }>(),
-  {
-    disabled: false,
-    labelCols: 2,
-    switchCols: 8
-  }
+  defineProps<{ label?: string; tooltip?: string; disabled?: boolean; labelCols?: number; switchCols?: number }>(),
+  { disabled: false, labelCols: 2, switchCols: 8 }
 );
 </script>
 
@@ -24,7 +14,7 @@ withDefaults(
       <tooltipped-label :tooltip="tooltip" :label="label" />
     </v-col>
     <v-col :cols="switchCols || 12 - labelCols" class="d-flex align-center pr-0">
-      <v-switch v-model="value" :disabled="disabled" color="#ffd843" hide-details density="compact" />
+      <v-switch v-model="value" :disabled="disabled" color="primary" hide-details density="compact" />
     </v-col>
   </div>
 </template>