diff --git a/photon-client/src/components/app/photon-3d-visualizer.vue b/photon-client/src/components/app/photon-3d-visualizer.vue
index 10cce9366..9f457ded7 100644
--- a/photon-client/src/components/app/photon-3d-visualizer.vue
+++ b/photon-client/src/components/app/photon-3d-visualizer.vue
@@ -50,8 +50,8 @@ const drawTargets = async (targets: PhotonTarget[]) => {
     return;
   }
 
-  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
-  else scene.background = new Color(0x000000);
+  if (theme.global.current.value.dark) scene.background = new Color(0x000000);
+  else scene.background = new Color(0xa9a9a9);
 
   scene.remove(...previousTargets);
   previousTargets = [];
@@ -158,8 +158,8 @@ onMounted(async () => {
   if (!canvas) return;
   renderer = new WebGLRenderer({ canvas: canvas });
 
-  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
-  else scene.background = new Color(0x000000);
+  if (theme.global.current.value.dark) scene.background = new Color(0x000000);
+  else scene.background = new Color(0xa9a9a9);
 
   onWindowResize();
   window.addEventListener("resize", onWindowResize);
@@ -234,7 +234,7 @@ watchEffect(() => {
         <v-btn
           style="width: 100%"
           color="buttonActive"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="resetCamFirstPerson"
         >
           First Person
@@ -244,7 +244,7 @@ watchEffect(() => {
         <v-btn
           style="width: 100%"
           color="buttonActive"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="resetCamThirdPerson"
         >
           Third Person
diff --git a/photon-client/src/components/app/photon-calibration-visualizer.vue b/photon-client/src/components/app/photon-calibration-visualizer.vue
index 4dad72020..31910269c 100644
--- a/photon-client/src/components/app/photon-calibration-visualizer.vue
+++ b/photon-client/src/components/app/photon-calibration-visualizer.vue
@@ -208,8 +208,8 @@ onMounted(async () => {
   const ambientLight = new AmbientLight(0xffffff, 0.6);
   scene.add(ambientLight);
 
-  if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9);
-  else scene.background = new Color(0x000000);
+  if (theme.global.current.value.dark) scene.background = new Color(0x000000);
+  else scene.background = new Color(0xa9a9a9);
 
   // Initialize a stable aspect ratio so subsequent resize events derive
   // height from width, avoiding layout feedback during continuous resizing
@@ -347,7 +347,7 @@ watch(
         <v-btn
           style="width: 100%"
           color="buttonActive"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="resetCamFirstPerson"
         >
           First Person
@@ -357,7 +357,7 @@ watch(
         <v-btn
           style="width: 100%"
           color="buttonActive"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="resetCamThirdPerson"
         >
           Third Person
diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue
index 86c4fa62d..deb43d6b0 100644
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -73,7 +73,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
         </v-list-item>
         <v-list-item
           link
-          :prepend-icon="theme.global.name.value === 'LightTheme' ? 'mdi-white-balance-sunny' : 'mdi-weather-night'"
+          :prepend-icon="theme.global.current.value.dark ? 'mdi-weather-night' : 'mdi-white-balance-sunny'"
           @click="() => toggleTheme(theme)"
         >
           <v-list-item-title>Theme</v-list-item-title>
diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index 423eb3ca1..97e3c138b 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -470,7 +470,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
           closable
           density="compact"
           class="mb-5"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
           :color="useSettingsStore().general.mrCalWorking ? 'buttonPassive' : 'error'"
           :icon="useSettingsStore().general.mrCalWorking ? 'mdi-check' : 'mdi-close'"
           :text="
@@ -481,7 +481,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
         />
         <div v-if="isCalibrating" class="d-flex justify-center align-center pb-5">
           <v-chip
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+            :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
             label
             :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonPassive' : 'light-grey'"
           >
@@ -494,7 +494,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             color="buttonPassive"
             size="small"
             block
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             :disabled="!settingsValid"
             @click="downloadCalibBoard"
           >
@@ -509,7 +509,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
           density="compact"
           text="Too many corners. Finish calibration now!"
           icon="mdi-alert-circle-outline"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
         />
         <div class="d-flex pt-5">
           <v-col cols="6" class="pa-0 pr-2">
@@ -517,7 +517,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
               size="small"
               block
               color="buttonActive"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               :disabled="!settingsValid || tooManyPoints"
               @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
             >
@@ -531,7 +531,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
             <v-btn
               size="small"
               block
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonActive' : 'error'"
               :disabled="!isCalibrating || !settingsValid"
               @click="endCalibration"
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
index f10e94bb7..7f7af18c3 100644
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -121,7 +121,7 @@ const viewingImg = ref(0);
           <v-btn
             color="buttonPassive"
             style="width: 100%"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="openUploadPhotonCalibJsonPrompt"
           >
             <v-icon start size="large"> mdi-import</v-icon>
@@ -140,7 +140,7 @@ const viewingImg = ref(0);
             color="buttonPassive"
             :disabled="!currentCalibrationCoeffs"
             style="width: 100%"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="openExportCalibrationPrompt"
           >
             <v-icon start size="large">mdi-export</v-icon>
@@ -318,7 +318,7 @@ const viewingImg = ref(0);
               color="primary"
               text="The selected video format has not been calibrated."
               icon="mdi-alert-circle-outline"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+              :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
             />
           </div>
           <Suspense v-else-if="tab === 'details'">
diff --git a/photon-client/src/components/cameras/CameraControlCard.vue b/photon-client/src/components/cameras/CameraControlCard.vue
index 98b4fb351..7498c7af3 100644
--- a/photon-client/src/components/cameras/CameraControlCard.vue
+++ b/photon-client/src/components/cameras/CameraControlCard.vue
@@ -99,7 +99,7 @@ const expanded = ref([]);
     <v-card-text class="pt-0">
       <v-btn
         color="buttonPassive"
-        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        :variant="theme.global.current.value.dark ? 'outlined' : 'tonal'"
         @click="fetchSnapshots"
       >
         <v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
@@ -115,7 +115,7 @@ const expanded = ref([]);
             density="compact"
             text="There are currently no saved snapshots."
             icon="mdi-information-outline"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+            :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
           />
         </v-card-text>
         <v-card-text v-else class="pt-0">
@@ -125,7 +125,7 @@ const expanded = ref([]);
             density="compact"
             text="Snapshot timestamps depend on when the coprocessor was last connected to the internet."
             icon="mdi-information-outline"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+            :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
           />
           <v-data-table
             v-model:expanded="expanded"
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
index 69a3955c6..03a6bb71f 100644
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -179,7 +179,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           size="small"
           color="buttonActive"
           :disabled="!settingsHaveChanged()"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="saveCameraSettings"
         >
           <v-icon start size="large"> mdi-content-save </v-icon>
@@ -191,7 +191,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           block
           size="small"
           color="error"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="() => (showDeleteCamera = true)"
         >
           <v-icon start size="large"> mdi-trash-can-outline </v-icon>
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index 6510bae02..874e7aa5a 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -103,7 +103,7 @@ const fpsTooLow = computed<boolean>(() => {
         <v-btn
           color="buttonPassive"
           class="fill"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           :disabled="
             useCameraSettingsStore().isDriverMode ||
             useCameraSettingsStore().isCalibrationMode ||
@@ -116,7 +116,7 @@ const fpsTooLow = computed<boolean>(() => {
         <v-btn
           color="buttonPassive"
           class="fill"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           :disabled="
             useCameraSettingsStore().isDriverMode ||
             useCameraSettingsStore().isCalibrationMode ||
diff --git a/photon-client/src/components/common/pv-delete-modal.vue b/photon-client/src/components/common/pv-delete-modal.vue
index 05a0b898f..3d4805d4c 100644
--- a/photon-client/src/components/common/pv-delete-modal.vue
+++ b/photon-client/src/components/common/pv-delete-modal.vue
@@ -49,7 +49,7 @@ const confirmationText = ref("");
               color="buttonActive"
               style="float: right"
               width="100%"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="onBackup"
             >
               <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
@@ -65,7 +65,7 @@ const confirmationText = ref("");
                   ? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase()
                   : false
               "
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="
                 onConfirm();
                 confirmationText = '';
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index 84df7cd47..71bc543e2 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -407,14 +407,14 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         <v-card-actions class="pr-5 pt-10px pb-5">
           <v-btn
             color="buttonPassive"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="cancelPipelineCreation"
           >
             Cancel
           </v-btn>
           <v-btn
             color="buttonActive"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             :disabled="checkPipelineName(newPipelineName) !== true"
             @click="createNewPipeline"
           >
@@ -441,7 +441,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
         <v-card-actions class="pa-5 pt-0">
           <v-btn
             color="buttonPassive"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             class="text-black"
             @click="cancelChangePipelineType"
           >
@@ -449,7 +449,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
           </v-btn>
           <v-btn
             color="buttonActive"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="confirmChangePipelineType"
           >
             Confirm
diff --git a/photon-client/src/components/dashboard/ConfigOptions.vue b/photon-client/src/components/dashboard/ConfigOptions.vue
index 7350bd14d..1ef988784 100644
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -122,7 +122,7 @@ const onBeforeTabUpdate = () => {
         density="compact"
         text="Camera is not connected. Please check your connection and try again."
         icon="mdi-alert-circle-outline"
-        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+        :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
       />
     </template>
     <template v-else>
diff --git a/photon-client/src/components/dashboard/StreamConfigCard.vue b/photon-client/src/components/dashboard/StreamConfigCard.vue
index 321241238..3258fb385 100644
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -35,7 +35,7 @@ const processingMode = computed<number>({
           <v-btn
             color="buttonPassive"
             :disabled="!useCameraSettingsStore().hasConnected"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             class="w-50"
           >
             <template #prepend>
@@ -51,7 +51,7 @@ const processingMode = computed<number>({
               useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ObjectDetection ||
               useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ColoredShape
             "
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             class="w-50"
           >
             <template #prepend>
@@ -69,7 +69,7 @@ const processingMode = computed<number>({
           <v-btn
             color="buttonPassive"
             class="fill w-50"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           >
             <v-icon start class="mode-btn-icon" size="large">mdi-import</v-icon>
             <span class="mode-btn-label">Raw</span>
@@ -77,7 +77,7 @@ const processingMode = computed<number>({
           <v-btn
             color="buttonPassive"
             class="fill w-50"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           >
             <v-icon start class="mode-btn-icon" size="large">mdi-export</v-icon>
             <span class="mode-btn-label">Processed</span>
diff --git a/photon-client/src/components/dashboard/tabs/OutputTab.vue b/photon-client/src/components/dashboard/tabs/OutputTab.vue
index 22033ead3..08d2c0e19 100644
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -168,7 +168,7 @@ const interactiveCols = computed(() =>
             block
             color="primary"
             class="text-black"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
           >
             Take Point
@@ -179,7 +179,7 @@ const interactiveCols = computed(() =>
             size="small"
             block
             color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points
@@ -196,7 +196,7 @@ const interactiveCols = computed(() =>
             block
             color="primary"
             class="text-black"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
           >
             Take First Point
@@ -208,7 +208,7 @@ const interactiveCols = computed(() =>
             block
             color="primary"
             class="text-black"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
           >
             Take Second Point
@@ -219,7 +219,7 @@ const interactiveCols = computed(() =>
             size="small"
             block
             color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
           >
             Clear All Points
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index fc2c2b59a..ef22422c4 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -207,7 +207,7 @@ const resetCurrentBuffer = () => {
           color="buttonActive"
           class="mb-4 mt-1"
           style="width: min-content"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
           @click="resetCurrentBuffer"
           >Reset Samples</v-btn
         >
diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
index e59c78f1b..23d009597 100644
--- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
+++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue
@@ -191,7 +191,7 @@ const interactiveCols = computed(() =>
               block
               color="primary"
               class="text-black"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
             >
               <v-icon start size="large"> mdi-minus </v-icon>
@@ -204,7 +204,7 @@ const interactiveCols = computed(() =>
               class="text-black"
               size="small"
               block
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="enableColorPicking(1)"
             >
               <v-icon start size="large"> mdi-plus-minus </v-icon>
@@ -217,7 +217,7 @@ const interactiveCols = computed(() =>
               block
               color="primary"
               class="text-black"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
             >
               <v-icon start size="large"> mdi-plus </v-icon>
@@ -232,7 +232,7 @@ const interactiveCols = computed(() =>
               color="primary"
               class="text-black"
               size="small"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="disableColorPicking"
             >
               Cancel
diff --git a/photon-client/src/components/settings/DeviceCard.vue b/photon-client/src/components/settings/DeviceCard.vue
index ce1c66f41..89260bdb0 100644
--- a/photon-client/src/components/settings/DeviceCard.vue
+++ b/photon-client/src/components/settings/DeviceCard.vue
@@ -312,7 +312,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col>
               <v-btn
                 color="buttonPassive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="useStateStore().showLogModal = true"
               >
                 <v-icon start class="open-icon" size="large"> mdi-eye </v-icon>
@@ -322,7 +322,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col>
               <v-btn
                 color="buttonPassive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="openExportLogsPrompt"
               >
                 <v-icon start class="open-icon" size="large"> mdi-download </v-icon>
@@ -345,7 +345,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col>
               <v-btn
                 color="buttonPassive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="() => (showImportDialog = true)"
               >
                 <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
@@ -355,7 +355,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col>
               <v-btn
                 color="buttonPassive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="openExportSettingsPrompt"
               >
                 <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
@@ -369,7 +369,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col cols="12" sm="6"
               ><v-btn
                 color="buttonActive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="restartProgram"
               >
                 <v-icon start class="open-icon" size="large"> mdi-restart </v-icon>
@@ -379,7 +379,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col cols="12" sm="6">
               <v-btn
                 color="buttonPassive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="openOfflineUpdatePrompt"
               >
                 <v-icon start class="open-icon" size="large"> mdi-upload </v-icon>
@@ -400,7 +400,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col cols="12" sm="6">
               <v-btn
                 color="buttonActive"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="restartDevice"
               >
                 <v-icon start class="open-icon" size="large"> mdi-restart-alert </v-icon>
@@ -410,7 +410,7 @@ watch(metricsHistorySnapshot, () => {
             <v-col cols="12" sm="6">
               <v-btn
                 color="error"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                 @click="() => (showFactoryReset = true)"
               >
                 <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
@@ -532,7 +532,7 @@ watch(metricsHistorySnapshot, () => {
           <v-btn
             color="primary"
             :disabled="importFile === null"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="handleSettingsImport"
           >
             <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -555,7 +555,7 @@ watch(metricsHistorySnapshot, () => {
             <v-btn
               color="buttonActive"
               width="100%"
-              :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+              :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
               @click="
                 offlineUpdateDialog.show = false;
                 handleOfflineUpdate(offlineUpdate.files[0]);
diff --git a/photon-client/src/components/settings/GlobalSettingsCard.vue b/photon-client/src/components/settings/GlobalSettingsCard.vue
index 194ce6e0e..27cfbb470 100644
--- a/photon-client/src/components/settings/GlobalSettingsCard.vue
+++ b/photon-client/src/components/settings/GlobalSettingsCard.vue
@@ -205,7 +205,7 @@ watchEffect(() => {
           density="compact"
           text="The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect."
           icon="mdi-alert-circle-outline"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
         />
         <pv-radio
           v-show="!useSettingsStore().network.networkingDisabled"
@@ -279,7 +279,7 @@ watchEffect(() => {
           density="compact"
           text="Cannot detect any wired connections! Send program logs to the developers for help."
           icon="mdi-alert-circle-outline"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
         />
         <pv-switch
           v-model="tempSettingsStruct.runNTServer"
@@ -293,7 +293,7 @@ watchEffect(() => {
           density="compact"
           text="This mode is intended for debugging and should be off for proper usage. PhotonLib will NOT work!"
           icon="mdi-information-outline"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
         />
         <v-card-title class="pl-0 pt-3 pb-10px">Miscellaneous</v-card-title>
         <pv-switch
@@ -308,13 +308,13 @@ watchEffect(() => {
           density="compact"
           text="This mode is intended for debugging and may reduce performance; it should be off for field use."
           icon="mdi-information-outline"
-          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+          :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
         />
       </v-form>
       <v-btn
         color="primary"
         class="mt-3"
-        :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+        :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
         style="color: black; width: 100%"
         :disabled="!settingsValid || !settingsHaveChanged()"
         @click="saveGeneralSettings"
@@ -377,7 +377,7 @@ watchEffect(() => {
         </v-card-text>
         <v-card-actions class="pa-5 pt-0">
           <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             color="buttonPassive"
             class="text-black"
             @click="showThemeConfig = false"
@@ -385,7 +385,7 @@ watchEffect(() => {
             Close
           </v-btn>
           <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             color="buttonActive"
             class="text-black"
             @click="
diff --git a/photon-client/src/components/settings/MetricsChart.vue b/photon-client/src/components/settings/MetricsChart.vue
index a3c3a00b0..25bb30bb4 100644
--- a/photon-client/src/components/settings/MetricsChart.vue
+++ b/photon-client/src/components/settings/MetricsChart.vue
@@ -53,9 +53,9 @@ const getOptions = (data: ChartData[] = []) => {
 
         return `${tooltip}</div>`;
       },
-      backgroundColor: theme.themes.value[theme.global.name.value].colors.background,
+      backgroundColor: theme.global.current.value.colors.background,
       textStyle: {
-        color: theme.themes.value[theme.global.name.value].colors.onBackground
+        color: theme.global.current.value.colors.onBackground
       },
       axisPointer: {
         animation: false
@@ -149,10 +149,9 @@ const getSeries = (data: ChartData[] = []) => {
           : null,
       lineStyle: {
         width: 1.5,
-        color:
-          theme.global.name.value === "LightTheme"
-            ? theme.themes.value[theme.global.name.value].colors.primary
-            : `rgb(${color.r}, ${color.g}, ${color.b})`
+        color: theme.global.current.value.dark
+          ? `rgb(${color.r}, ${color.g}, ${color.b})`
+          : theme.global.current.value.colors.primary
       },
       areaStyle: {
         color: {
@@ -164,17 +163,15 @@ const getSeries = (data: ChartData[] = []) => {
           colorStops: [
             {
               offset: 0,
-              color:
-                theme.global.name.value === "LightTheme"
-                  ? `${theme.themes.value[theme.global.name.value].colors.primary}40`
-                  : `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
+              color: theme.global.current.value.dark
+                ? `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
+                : `${theme.global.current.value.colors.primary}40`
             },
             {
               offset: 1,
-              color:
-                theme.global.name.value === "LightTheme"
-                  ? `${theme.themes.value[theme.global.name.value].colors.primary}40`
-                  : `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
+              color: theme.global.current.value.dark
+                ? `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
+                : `${theme.global.current.value.colors.primary}40`
             }
           ]
         }
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
index 7d18b3418..384f42dac 100644
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -166,7 +166,7 @@ const handleBulkImport = async () => {
           <v-btn
             color="buttonActive"
             class="justify-center"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="() => (showImportDialog = true)"
           >
             <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -245,7 +245,7 @@ const handleBulkImport = async () => {
                       importHeight === null ||
                       importVersion === null
                     "
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     @click="handleImport()"
                   >
                     <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
@@ -260,7 +260,7 @@ const handleBulkImport = async () => {
           <v-btn
             color="buttonActive"
             class="justify-center"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="() => (showBulkImportDialog = true)"
           >
             <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -278,7 +278,7 @@ const handleBulkImport = async () => {
                     color="buttonActive"
                     width="100%"
                     :disabled="importFile === null"
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     @click="handleBulkImport()"
                   >
                     <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
@@ -292,7 +292,7 @@ const handleBulkImport = async () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="buttonPassive"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="openExportPrompt"
           >
             <v-icon start class="open-icon"> mdi-export </v-icon>
@@ -309,7 +309,7 @@ const handleBulkImport = async () => {
         <v-col cols="12" sm="6">
           <v-btn
             color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+            :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
             @click="() => (showNukeDialog = true)"
           >
             <v-icon left class="open-icon"> mdi-trash </v-icon>
@@ -339,7 +339,7 @@ const handleBulkImport = async () => {
                     small
                     color="error"
                     title="Delete Model"
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     @click="() => (confirmDeleteDialog = { show: true, model })"
                   >
                     <v-icon size="large">mdi-trash-can-outline</v-icon>
@@ -351,7 +351,7 @@ const handleBulkImport = async () => {
                     small
                     color="buttonActive"
                     title="Rename Model"
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     @click="() => (showRenameDialog = { show: true, model, newName: '' })"
                   >
                     <v-icon size="large">mdi-pencil</v-icon>
@@ -362,7 +362,7 @@ const handleBulkImport = async () => {
                     icon
                     small
                     color="buttonPassive"
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     @click="() => (showInfo = { show: true, model })"
                   >
                     <v-icon size="large">mdi-information</v-icon>
@@ -391,13 +391,13 @@ const handleBulkImport = async () => {
                 </div>
                 <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
                   <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     color="error"
                     @click="showRenameDialog.show = false"
                     >Cancel</v-btn
                   >
                   <v-btn
-                    :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                    :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                     color="buttonActive"
                     @click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
                     >Rename</v-btn
@@ -413,7 +413,7 @@ const handleBulkImport = async () => {
                 <v-btn
                   color="buttonPassive"
                   width="100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="openExportIndividualModelPrompt"
                 >
                   <v-icon left class="open-icon" size="large"> mdi-export </v-icon>
diff --git a/photon-client/src/lib/ThemeManager.ts b/photon-client/src/lib/ThemeManager.ts
index 110257b06..038ac5a0b 100644
--- a/photon-client/src/lib/ThemeManager.ts
+++ b/photon-client/src/lib/ThemeManager.ts
@@ -2,7 +2,7 @@ import { type ThemeInstance } from "vuetify";
 import { LightTheme, DarkTheme } from "@/plugins/vuetify";
 
 export const resetTheme = (theme: ThemeInstance) => {
-  const themeType = theme.global.name.value === "LightTheme" ? "light" : "dark";
+  const themeType = theme.global.current.value.dark ? "dark" : "light";
   localStorage.removeItem(`${themeType}-background`);
   localStorage.removeItem(`${themeType}-primary`);
   localStorage.removeItem(`${themeType}-secondary`);
@@ -12,13 +12,13 @@ export const resetTheme = (theme: ThemeInstance) => {
 };
 
 export const getThemeColor = (theme: ThemeInstance, color: string): string => {
-  const themeType = theme.global.name.value === "LightTheme" ? "light" : "dark";
-  const defaultTheme = theme.global.name.value === "LightTheme" ? LightTheme : DarkTheme;
+  const themeType = theme.global.current.value.dark ? "dark" : "light";
+  const defaultTheme = theme.global.current.value.dark ? DarkTheme : LightTheme;
   return localStorage.getItem(`${themeType}-${color}`) ?? defaultTheme.colors![color]!;
 };
 
 export const setThemeColor = (theme: ThemeInstance, color: string, value: string | null) => {
-  const themeType = theme.global.name.value === "LightTheme" ? "light" : "dark";
+  const themeType = theme.global.current.value.dark ? "dark" : "light";
   if (value) localStorage.setItem(`${themeType}-${color}`, value);
   else localStorage.removeItem(`${themeType}-${color}`);
 
@@ -38,7 +38,7 @@ export const restoreThemeConfig = (theme: ThemeInstance) => {
   if (storedTheme) theme.global.name.value = storedTheme;
 
   // Restore custom theme colors
-  const themeType = theme.global.name.value === "LightTheme" ? "light" : "dark";
+  const themeType = theme.global.current.value.dark ? "dark" : "light";
   const defaultTheme = theme.global.name.value === "LightTheme" ? LightTheme : DarkTheme;
 
   const customBackground = localStorage.getItem(`${themeType}-background`);
@@ -47,7 +47,7 @@ export const restoreThemeConfig = (theme: ThemeInstance) => {
   const customSurface = localStorage.getItem(`${themeType}-surface`);
 
   theme.themes.value[theme.global.name.value].colors.background = customBackground ?? defaultTheme.colors!.background!;
-  theme.themes.value[theme.global.name.value].colors.sidebar = theme.themes.value[theme.global.name.value].dark
+  theme.themes.value[theme.global.name.value].colors.sidebar = theme.global.current.value.dark
     ? (customBackground ?? defaultTheme.colors!.sidebar!)
     : (customSurface ?? defaultTheme.colors!.sidebar!);
 
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
index 04eca8bc9..aa73790b0 100644
--- a/photon-client/src/views/CameraMatchingView.vue
+++ b/photon-client/src/views/CameraMatchingView.vue
@@ -232,7 +232,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                 <v-btn
                   color="buttonPassive"
                   style="width: 100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="
                     setCameraView(
                       module.matchedCameraInfo,
@@ -248,7 +248,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="text-black"
                   color="buttonActive"
                   style="width: 100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   :loading="deactivatingModule"
                   @click="deactivateModule(module.uniqueName)"
                 >
@@ -261,7 +261,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   color="error"
                   style="width: 100%"
                   :loading="module.uniqueName === deletingCamera"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="
                     () =>
                       (confirmDeleteDialog = {
@@ -326,7 +326,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                 <v-btn
                   color="buttonPassive"
                   style="width: 100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="
                     setCameraView(
                       module.matchedCameraInfo,
@@ -342,7 +342,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   class="text-black"
                   color="buttonActive"
                   style="width: 100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   :loading="activatingModule"
                   @click="activateModule(module.uniqueName)"
                 >
@@ -355,7 +355,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   color="error"
                   style="width: 100%"
                   :loading="module.uniqueName === deletingCamera"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="
                     () =>
                       (confirmDeleteDialog = {
@@ -393,7 +393,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                 <v-btn
                   color="buttonPassive"
                   style="width: 100%"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="setCameraView(camera, false)"
                 >
                   <span>Details</span>
@@ -405,7 +405,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   color="buttonActive"
                   style="width: 100%"
                   :loading="assigningCamera"
-                  :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+                  :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
                   @click="assignCamera(camera)"
                 >
                   Activate
@@ -457,7 +457,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
             density="compact"
             text="A different camera may have been connected to this device! Compare the following information carefully."
             icon="mdi-information-outline"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+            :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
           />
           <PvCameraMatchCard :saved="viewingCamera[0]" :current="getMatchedDevice(viewingCamera[0])" />
         </v-card-text>
diff --git a/photon-client/src/views/DashboardView.vue b/photon-client/src/views/DashboardView.vue
index ecc412a92..20985a00e 100644
--- a/photon-client/src/views/DashboardView.vue
+++ b/photon-client/src/views/DashboardView.vue
@@ -92,7 +92,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       color="error"
       density="compact"
       icon="mdi-alert-circle-outline"
-      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
     >
       <span>
         Arducam camera detected! Please configure the camera model in the <a href="#/cameras">Camera tab</a>!
@@ -104,7 +104,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       color="error"
       density="compact"
       icon="mdi-alert-circle-outline"
-      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
     >
       <span>
         Conflicting hostname detected! Please change the hostname in the <a href="#/settings">Settings tab</a>!
@@ -116,7 +116,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       color="error"
       density="compact"
       icon="mdi-alert-circle-outline"
-      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
     >
       <span
         >One or more cameras have an FPS limit set! This may cause performance issues. Check your logs for more
@@ -129,7 +129,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
       color="error"
       density="compact"
       icon="mdi-alert-circle-outline"
-      :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'"
+      :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
     >
       <span
         >Conflicting camera name(s) detected! Please change the name(s) of