Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-07-02 02:51:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor dark mode checks (#2407)

Browse Source 
The current method for checking light vs. dark mode is to compare the
name of the theme against a hardcoded string. This PR uses a dark mode
boolean. This change is for verbosity and so that we're not reliant on
theme name. Additionally, we change some references to colors to the
global theme, instead of indexing the list of themes.
This commit is contained in:
Sam Freund
2026-03-24 17:49:56 -05:00
committed by GitHub
parent 7b240a027a
commit 032deba775
22 changed files with 107 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
photon-client/src/components/app/photon-3d-visualizer.vue
View File

@@ -50,8 +50,8 @@ const drawTargets = async (targets: PhotonTarget[]) => {
return; return;
} }
if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9); if (theme.global.current.value.dark) scene.background = new Color(0x000000);
else scene.background = new Color(0x000000); else scene.background = new Color(0xa9a9a9);
scene.remove(...previousTargets); scene.remove(...previousTargets);
previousTargets = []; previousTargets = [];
@@ -158,8 +158,8 @@ onMounted(async () => {
if (!canvas) return; if (!canvas) return;
renderer = new WebGLRenderer({ canvas: canvas }); renderer = new WebGLRenderer({ canvas: canvas });
if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9); if (theme.global.current.value.dark) scene.background = new Color(0x000000);
else scene.background = new Color(0x000000); else scene.background = new Color(0xa9a9a9);
onWindowResize(); onWindowResize();
window.addEventListener("resize", onWindowResize); window.addEventListener("resize", onWindowResize);
@@ -234,7 +234,7 @@ watchEffect(() => {
<v-btn <v-btn
style="width: 100%" style="width: 100%"
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="resetCamFirstPerson" @click="resetCamFirstPerson"
> >
First Person First Person
@@ -244,7 +244,7 @@ watchEffect(() => {
<v-btn <v-btn
style="width: 100%" style="width: 100%"
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="resetCamThirdPerson" @click="resetCamThirdPerson"
> >
Third Person Third Person

8
photon-client/src/components/app/photon-calibration-visualizer.vue
View File

@@ -208,8 +208,8 @@ onMounted(async () => {
const ambientLight = new AmbientLight(0xffffff, 0.6); const ambientLight = new AmbientLight(0xffffff, 0.6);
scene.add(ambientLight); scene.add(ambientLight);
if (theme.global.name.value === "LightTheme") scene.background = new Color(0xa9a9a9); if (theme.global.current.value.dark) scene.background = new Color(0x000000);
else scene.background = new Color(0x000000); else scene.background = new Color(0xa9a9a9);
// Initialize a stable aspect ratio so subsequent resize events derive // Initialize a stable aspect ratio so subsequent resize events derive
// height from width, avoiding layout feedback during continuous resizing // height from width, avoiding layout feedback during continuous resizing
@@ -347,7 +347,7 @@ watch(
<v-btn <v-btn
style="width: 100%" style="width: 100%"
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="resetCamFirstPerson" @click="resetCamFirstPerson"
> >
First Person First Person
@@ -357,7 +357,7 @@ watch(
<v-btn <v-btn
style="width: 100%" style="width: 100%"
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="resetCamThirdPerson" @click="resetCamThirdPerson"
> >
Third Person Third Person

2
photon-client/src/components/app/photon-sidebar.vue
View File

@@ -73,7 +73,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
</v-list-item> </v-list-item>
<v-list-item <v-list-item
link 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)" @click="() => toggleTheme(theme)"
> >
<v-list-item-title>Theme</v-list-item-title> <v-list-item-title>Theme</v-list-item-title>

12
photon-client/src/components/cameras/CameraCalibrationCard.vue
View File

@@ -470,7 +470,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
closable closable
density="compact" density="compact"
class="mb-5" 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'" :color="useSettingsStore().general.mrCalWorking ? 'buttonPassive' : 'error'"
:icon="useSettingsStore().general.mrCalWorking ? 'mdi-check' : 'mdi-close'" :icon="useSettingsStore().general.mrCalWorking ? 'mdi-check' : 'mdi-close'"
:text=" :text="
@@ -481,7 +481,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
/> />
<div v-if="isCalibrating" class="d-flex justify-center align-center pb-5"> <div v-if="isCalibrating" class="d-flex justify-center align-center pb-5">
<v-chip <v-chip
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
label label
:color="useStateStore().calibrationData.hasEnoughImages ? 'buttonPassive' : 'light-grey'" :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonPassive' : 'light-grey'"
> >
@@ -494,7 +494,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
color="buttonPassive" color="buttonPassive"
size="small" size="small"
block block
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:disabled="!settingsValid" :disabled="!settingsValid"
@click="downloadCalibBoard" @click="downloadCalibBoard"
> >
@@ -509,7 +509,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
density="compact" density="compact"
text="Too many corners. Finish calibration now!" text="Too many corners. Finish calibration now!"
icon="mdi-alert-circle-outline" 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"> <div class="d-flex pt-5">
<v-col cols="6" class="pa-0 pr-2"> <v-col cols="6" class="pa-0 pr-2">
@@ -517,7 +517,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
size="small" size="small"
block block
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:disabled="!settingsValid || tooManyPoints" :disabled="!settingsValid || tooManyPoints"
@click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()" @click="isCalibrating ? useCameraSettingsStore().takeCalibrationSnapshot() : startCalibration()"
> >
@@ -531,7 +531,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
<v-btn <v-btn
size="small" size="small"
block block
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:color="useStateStore().calibrationData.hasEnoughImages ? 'buttonActive' : 'error'" :color="useStateStore().calibrationData.hasEnoughImages ? 'buttonActive' : 'error'"
:disabled="!isCalibrating || !settingsValid" :disabled="!isCalibrating || !settingsValid"
@click="endCalibration" @click="endCalibration"

6
photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
View File

@@ -121,7 +121,7 @@ const viewingImg = ref(0);
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openUploadPhotonCalibJsonPrompt" @click="openUploadPhotonCalibJsonPrompt"
> >
<v-icon start size="large"> mdi-import</v-icon> <v-icon start size="large"> mdi-import</v-icon>
@@ -140,7 +140,7 @@ const viewingImg = ref(0);
color="buttonPassive" color="buttonPassive"
:disabled="!currentCalibrationCoeffs" :disabled="!currentCalibrationCoeffs"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openExportCalibrationPrompt" @click="openExportCalibrationPrompt"
> >
<v-icon start size="large">mdi-export</v-icon> <v-icon start size="large">mdi-export</v-icon>
@@ -318,7 +318,7 @@ const viewingImg = ref(0);
color="primary" color="primary"
text="The selected video format has not been calibrated." text="The selected video format has not been calibrated."
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
</div> </div>
<Suspense v-else-if="tab === 'details'"> <Suspense v-else-if="tab === 'details'">

6
photon-client/src/components/cameras/CameraControlCard.vue
View File

@@ -99,7 +99,7 @@ const expanded = ref([]);
<v-card-text class="pt-0"> <v-card-text class="pt-0">
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'tonal'"
@click="fetchSnapshots" @click="fetchSnapshots"
> >
<v-icon start class="open-icon" size="large"> mdi-folder </v-icon> <v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
@@ -115,7 +115,7 @@ const expanded = ref([]);
density="compact" density="compact"
text="There are currently no saved snapshots." text="There are currently no saved snapshots."
icon="mdi-information-outline" 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-card-text v-else class="pt-0"> <v-card-text v-else class="pt-0">
@@ -125,7 +125,7 @@ const expanded = ref([]);
density="compact" density="compact"
text="Snapshot timestamps depend on when the coprocessor was last connected to the internet." text="Snapshot timestamps depend on when the coprocessor was last connected to the internet."
icon="mdi-information-outline" icon="mdi-information-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
<v-data-table <v-data-table
v-model:expanded="expanded" v-model:expanded="expanded"

4
photon-client/src/components/cameras/CameraSettingsCard.vue
View File

@@ -179,7 +179,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
size="small" size="small"
color="buttonActive" color="buttonActive"
:disabled="!settingsHaveChanged()" :disabled="!settingsHaveChanged()"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="saveCameraSettings" @click="saveCameraSettings"
> >
<v-icon start size="large"> mdi-content-save </v-icon> <v-icon start size="large"> mdi-content-save </v-icon>
@@ -191,7 +191,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
block block
size="small" size="small"
color="error" color="error"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showDeleteCamera = true)" @click="() => (showDeleteCamera = true)"
> >
<v-icon start size="large"> mdi-trash-can-outline </v-icon> <v-icon start size="large"> mdi-trash-can-outline </v-icon>

4
photon-client/src/components/cameras/CamerasView.vue
View File

@@ -103,7 +103,7 @@ const fpsTooLow = computed<boolean>(() => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
class="fill" class="fill"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:disabled=" :disabled="
useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isDriverMode ||
useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().isCalibrationMode ||
@@ -116,7 +116,7 @@ const fpsTooLow = computed<boolean>(() => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
class="fill" class="fill"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:disabled=" :disabled="
useCameraSettingsStore().isDriverMode || useCameraSettingsStore().isDriverMode ||
useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().isCalibrationMode ||

4
photon-client/src/components/common/pv-delete-modal.vue
View File

@@ -49,7 +49,7 @@ const confirmationText = ref("");
color="buttonActive" color="buttonActive"
style="float: right" style="float: right"
width="100%" width="100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="onBackup" @click="onBackup"
> >
<v-icon start class="open-icon" size="large"> mdi-export </v-icon> <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
@@ -65,7 +65,7 @@ const confirmationText = ref("");
? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase() ? confirmationText.toLowerCase() !== expectedConfirmationText.toLowerCase()
: false : false
" "
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
onConfirm(); onConfirm();
confirmationText = ''; confirmationText = '';

8
photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
View File

@@ -407,14 +407,14 @@ const wrappedCameras = computed<SelectItem[]>(() =>
<v-card-actions class="pr-5 pt-10px pb-5"> <v-card-actions class="pr-5 pt-10px pb-5">
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="cancelPipelineCreation" @click="cancelPipelineCreation"
> >
Cancel Cancel
</v-btn> </v-btn>
<v-btn <v-btn
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:disabled="checkPipelineName(newPipelineName) !== true" :disabled="checkPipelineName(newPipelineName) !== true"
@click="createNewPipeline" @click="createNewPipeline"
> >
@@ -441,7 +441,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
<v-card-actions class="pa-5 pt-0"> <v-card-actions class="pa-5 pt-0">
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
class="text-black" class="text-black"
@click="cancelChangePipelineType" @click="cancelChangePipelineType"
> >
@@ -449,7 +449,7 @@ const wrappedCameras = computed<SelectItem[]>(() =>
</v-btn> </v-btn>
<v-btn <v-btn
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="confirmChangePipelineType" @click="confirmChangePipelineType"
> >
Confirm Confirm

2
photon-client/src/components/dashboard/ConfigOptions.vue
View File

@@ -122,7 +122,7 @@ const onBeforeTabUpdate = () => {
density="compact" density="compact"
text="Camera is not connected. Please check your connection and try again." text="Camera is not connected. Please check your connection and try again."
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
</template> </template>
<template v-else> <template v-else>

8
photon-client/src/components/dashboard/StreamConfigCard.vue
View File

@@ -35,7 +35,7 @@ const processingMode = computed<number>({
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:disabled="!useCameraSettingsStore().hasConnected" :disabled="!useCameraSettingsStore().hasConnected"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
class="w-50" class="w-50"
> >
<template #prepend> <template #prepend>
@@ -51,7 +51,7 @@ const processingMode = computed<number>({
useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ObjectDetection || useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ObjectDetection ||
useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ColoredShape useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ColoredShape
" "
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
class="w-50" class="w-50"
> >
<template #prepend> <template #prepend>
@@ -69,7 +69,7 @@ const processingMode = computed<number>({
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
class="fill w-50" 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> <v-icon start class="mode-btn-icon" size="large">mdi-import</v-icon>
<span class="mode-btn-label">Raw</span> <span class="mode-btn-label">Raw</span>
@@ -77,7 +77,7 @@ const processingMode = computed<number>({
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
class="fill w-50" 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> <v-icon start class="mode-btn-icon" size="large">mdi-export</v-icon>
<span class="mode-btn-label">Processed</span> <span class="mode-btn-label">Processed</span>

10
photon-client/src/components/dashboard/tabs/OutputTab.vue
View File

@@ -168,7 +168,7 @@ const interactiveCols = computed(() =>
block block
color="primary" color="primary"
class="text-black" class="text-black"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)" @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Single)"
> >
Take Point Take Point
@@ -179,7 +179,7 @@ const interactiveCols = computed(() =>
size="small" size="small"
block block
color="error" color="error"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)" @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
> >
Clear All Points Clear All Points
@@ -196,7 +196,7 @@ const interactiveCols = computed(() =>
block block
color="primary" color="primary"
class="text-black" class="text-black"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)" @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualFirst)"
> >
Take First Point Take First Point
@@ -208,7 +208,7 @@ const interactiveCols = computed(() =>
block block
color="primary" color="primary"
class="text-black" class="text-black"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)" @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.DualSecond)"
> >
Take Second Point Take Second Point
@@ -219,7 +219,7 @@ const interactiveCols = computed(() =>
size="small" size="small"
block block
color="error" color="error"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)" @click="useCameraSettingsStore().takeRobotOffsetPoint(RobotOffsetType.Clear)"
> >
Clear All Points Clear All Points

2
photon-client/src/components/dashboard/tabs/TargetsTab.vue
View File

@@ -207,7 +207,7 @@ const resetCurrentBuffer = () => {
color="buttonActive" color="buttonActive"
class="mb-4 mt-1" class="mb-4 mt-1"
style="width: min-content" style="width: min-content"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="resetCurrentBuffer" @click="resetCurrentBuffer"
>Reset Samples</v-btn >Reset Samples</v-btn
> >

8
photon-client/src/components/dashboard/tabs/ThresholdTab.vue
View File

@@ -191,7 +191,7 @@ const interactiveCols = computed(() =>
block block
color="primary" color="primary"
class="text-black" 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)" @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 2 : 3)"
> >
<v-icon start size="large"> mdi-minus </v-icon> <v-icon start size="large"> mdi-minus </v-icon>
@@ -204,7 +204,7 @@ const interactiveCols = computed(() =>
class="text-black" class="text-black"
size="small" size="small"
block block
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="enableColorPicking(1)" @click="enableColorPicking(1)"
> >
<v-icon start size="large"> mdi-plus-minus </v-icon> <v-icon start size="large"> mdi-plus-minus </v-icon>
@@ -217,7 +217,7 @@ const interactiveCols = computed(() =>
block block
color="primary" color="primary"
class="text-black" 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)" @click="enableColorPicking(useCameraSettingsStore().currentPipelineSettings.hueInverted ? 3 : 2)"
> >
<v-icon start size="large"> mdi-plus </v-icon> <v-icon start size="large"> mdi-plus </v-icon>
@@ -232,7 +232,7 @@ const interactiveCols = computed(() =>
color="primary" color="primary"
class="text-black" class="text-black"
size="small" size="small"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="disableColorPicking" @click="disableColorPicking"
> >
Cancel Cancel

20
photon-client/src/components/settings/DeviceCard.vue
View File

@@ -312,7 +312,7 @@ watch(metricsHistorySnapshot, () => {
<v-col> <v-col>
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="useStateStore().showLogModal = true" @click="useStateStore().showLogModal = true"
> >
<v-icon start class="open-icon" size="large"> mdi-eye </v-icon> <v-icon start class="open-icon" size="large"> mdi-eye </v-icon>
@@ -322,7 +322,7 @@ watch(metricsHistorySnapshot, () => {
<v-col> <v-col>
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openExportLogsPrompt" @click="openExportLogsPrompt"
> >
<v-icon start class="open-icon" size="large"> mdi-download </v-icon> <v-icon start class="open-icon" size="large"> mdi-download </v-icon>
@@ -345,7 +345,7 @@ watch(metricsHistorySnapshot, () => {
<v-col> <v-col>
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showImportDialog = true)" @click="() => (showImportDialog = true)"
> >
<v-icon start class="open-icon" size="large"> mdi-import </v-icon> <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
@@ -355,7 +355,7 @@ watch(metricsHistorySnapshot, () => {
<v-col> <v-col>
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openExportSettingsPrompt" @click="openExportSettingsPrompt"
> >
<v-icon start class="open-icon" size="large"> mdi-export </v-icon> <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-col cols="12" sm="6"
><v-btn ><v-btn
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="restartProgram" @click="restartProgram"
> >
<v-icon start class="open-icon" size="large"> mdi-restart </v-icon> <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-col cols="12" sm="6">
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openOfflineUpdatePrompt" @click="openOfflineUpdatePrompt"
> >
<v-icon start class="open-icon" size="large"> mdi-upload </v-icon> <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-col cols="12" sm="6">
<v-btn <v-btn
color="buttonActive" color="buttonActive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="restartDevice" @click="restartDevice"
> >
<v-icon start class="open-icon" size="large"> mdi-restart-alert </v-icon> <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-col cols="12" sm="6">
<v-btn <v-btn
color="error" color="error"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showFactoryReset = true)" @click="() => (showFactoryReset = true)"
> >
<v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon> <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
@@ -532,7 +532,7 @@ watch(metricsHistorySnapshot, () => {
<v-btn <v-btn
color="primary" color="primary"
:disabled="importFile === null" :disabled="importFile === null"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="handleSettingsImport" @click="handleSettingsImport"
> >
<v-icon start class="open-icon"> mdi-import </v-icon> <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -555,7 +555,7 @@ watch(metricsHistorySnapshot, () => {
<v-btn <v-btn
color="buttonActive" color="buttonActive"
width="100%" width="100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
offlineUpdateDialog.show = false; offlineUpdateDialog.show = false;
handleOfflineUpdate(offlineUpdate.files[0]); handleOfflineUpdate(offlineUpdate.files[0]);

14
photon-client/src/components/settings/GlobalSettingsCard.vue
View File

@@ -205,7 +205,7 @@ watchEffect(() => {
density="compact" density="compact"
text="The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect." text="The NetworkTables Server Address is not set or is invalid. NetworkTables is unable to connect."
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
<pv-radio <pv-radio
v-show="!useSettingsStore().network.networkingDisabled" v-show="!useSettingsStore().network.networkingDisabled"
@@ -279,7 +279,7 @@ watchEffect(() => {
density="compact" density="compact"
text="Cannot detect any wired connections! Send program logs to the developers for help." text="Cannot detect any wired connections! Send program logs to the developers for help."
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
<pv-switch <pv-switch
v-model="tempSettingsStruct.runNTServer" v-model="tempSettingsStruct.runNTServer"
@@ -293,7 +293,7 @@ watchEffect(() => {
density="compact" density="compact"
text="This mode is intended for debugging and should be off for proper usage. PhotonLib will NOT work!" text="This mode is intended for debugging and should be off for proper usage. PhotonLib will NOT work!"
icon="mdi-information-outline" 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> <v-card-title class="pl-0 pt-3 pb-10px">Miscellaneous</v-card-title>
<pv-switch <pv-switch
@@ -308,13 +308,13 @@ watchEffect(() => {
density="compact" density="compact"
text="This mode is intended for debugging and may reduce performance; it should be off for field use." text="This mode is intended for debugging and may reduce performance; it should be off for field use."
icon="mdi-information-outline" icon="mdi-information-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
/> />
</v-form> </v-form>
<v-btn <v-btn
color="primary" color="primary"
class="mt-3" class="mt-3"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
style="color: black; width: 100%" style="color: black; width: 100%"
:disabled="!settingsValid || !settingsHaveChanged()" :disabled="!settingsValid || !settingsHaveChanged()"
@click="saveGeneralSettings" @click="saveGeneralSettings"
@@ -377,7 +377,7 @@ watchEffect(() => {
</v-card-text> </v-card-text>
<v-card-actions class="pa-5 pt-0"> <v-card-actions class="pa-5 pt-0">
<v-btn <v-btn
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
color="buttonPassive" color="buttonPassive"
class="text-black" class="text-black"
@click="showThemeConfig = false" @click="showThemeConfig = false"
@@ -385,7 +385,7 @@ watchEffect(() => {
Close Close
</v-btn> </v-btn>
<v-btn <v-btn
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
color="buttonActive" color="buttonActive"
class="text-black" class="text-black"
@click=" @click="

25
photon-client/src/components/settings/MetricsChart.vue
View File

@@ -53,9 +53,9 @@ const getOptions = (data: ChartData[] = []) => {
return `${tooltip}</div>`; return `${tooltip}</div>`;
}, },
backgroundColor: theme.themes.value[theme.global.name.value].colors.background, backgroundColor: theme.global.current.value.colors.background,
textStyle: { textStyle: {
color: theme.themes.value[theme.global.name.value].colors.onBackground color: theme.global.current.value.colors.onBackground
}, },
axisPointer: { axisPointer: {
animation: false animation: false
@@ -149,10 +149,9 @@ const getSeries = (data: ChartData[] = []) => {
: null, : null,
lineStyle: { lineStyle: {
width: 1.5, width: 1.5,
color: color: theme.global.current.value.dark
theme.global.name.value === "LightTheme" ? `rgb(${color.r}, ${color.g}, ${color.b})`
? theme.themes.value[theme.global.name.value].colors.primary : theme.global.current.value.colors.primary
: `rgb(${color.r}, ${color.g}, ${color.b})`
}, },
areaStyle: { areaStyle: {
color: { color: {
@@ -164,17 +163,15 @@ const getSeries = (data: ChartData[] = []) => {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: color: theme.global.current.value.dark
theme.global.name.value === "LightTheme" ? `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
? `${theme.themes.value[theme.global.name.value].colors.primary}40` : `${theme.global.current.value.colors.primary}40`
: `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
}, },
{ {
offset: 1, offset: 1,
color: color: theme.global.current.value.dark
theme.global.name.value === "LightTheme" ? `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
? `${theme.themes.value[theme.global.name.value].colors.primary}40` : `${theme.global.current.value.colors.primary}40`
: `rgba(${color.r}, ${color.g}, ${color.b}, 0.15)`
} }
] ]
} }

24
photon-client/src/components/settings/ObjectDetectionCard.vue
View File

@@ -166,7 +166,7 @@ const handleBulkImport = async () => {
<v-btn <v-btn
color="buttonActive" color="buttonActive"
class="justify-center" class="justify-center"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showImportDialog = true)" @click="() => (showImportDialog = true)"
> >
<v-icon start class="open-icon"> mdi-import </v-icon> <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -245,7 +245,7 @@ const handleBulkImport = async () => {
importHeight === null || importHeight === null ||
importVersion === null importVersion === null
" "
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="handleImport()" @click="handleImport()"
> >
<v-icon start class="open-icon" size="large"> mdi-import </v-icon> <v-icon start class="open-icon" size="large"> mdi-import </v-icon>
@@ -260,7 +260,7 @@ const handleBulkImport = async () => {
<v-btn <v-btn
color="buttonActive" color="buttonActive"
class="justify-center" class="justify-center"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showBulkImportDialog = true)" @click="() => (showBulkImportDialog = true)"
> >
<v-icon start class="open-icon"> mdi-import </v-icon> <v-icon start class="open-icon"> mdi-import </v-icon>
@@ -278,7 +278,7 @@ const handleBulkImport = async () => {
color="buttonActive" color="buttonActive"
width="100%" width="100%"
:disabled="importFile === null" :disabled="importFile === null"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="handleBulkImport()" @click="handleBulkImport()"
> >
<v-icon start class="open-icon" size="large"> mdi-import </v-icon> <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-col cols="12" sm="6">
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openExportPrompt" @click="openExportPrompt"
> >
<v-icon start class="open-icon"> mdi-export </v-icon> <v-icon start class="open-icon"> mdi-export </v-icon>
@@ -309,7 +309,7 @@ const handleBulkImport = async () => {
<v-col cols="12" sm="6"> <v-col cols="12" sm="6">
<v-btn <v-btn
color="error" color="error"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showNukeDialog = true)" @click="() => (showNukeDialog = true)"
> >
<v-icon left class="open-icon"> mdi-trash </v-icon> <v-icon left class="open-icon"> mdi-trash </v-icon>
@@ -339,7 +339,7 @@ const handleBulkImport = async () => {
small small
color="error" color="error"
title="Delete Model" title="Delete Model"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (confirmDeleteDialog = { show: true, model })" @click="() => (confirmDeleteDialog = { show: true, model })"
> >
<v-icon size="large">mdi-trash-can-outline</v-icon> <v-icon size="large">mdi-trash-can-outline</v-icon>
@@ -351,7 +351,7 @@ const handleBulkImport = async () => {
small small
color="buttonActive" color="buttonActive"
title="Rename Model" 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: '' })" @click="() => (showRenameDialog = { show: true, model, newName: '' })"
> >
<v-icon size="large">mdi-pencil</v-icon> <v-icon size="large">mdi-pencil</v-icon>
@@ -362,7 +362,7 @@ const handleBulkImport = async () => {
icon icon
small small
color="buttonPassive" color="buttonPassive"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="() => (showInfo = { show: true, model })" @click="() => (showInfo = { show: true, model })"
> >
<v-icon size="large">mdi-information</v-icon> <v-icon size="large">mdi-information</v-icon>
@@ -391,13 +391,13 @@ const handleBulkImport = async () => {
</div> </div>
<v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end"> <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
<v-btn <v-btn
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
color="error" color="error"
@click="showRenameDialog.show = false" @click="showRenameDialog.show = false"
>Cancel</v-btn >Cancel</v-btn
> >
<v-btn <v-btn
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
color="buttonActive" color="buttonActive"
@click="renameModel(showRenameDialog.model, showRenameDialog.newName)" @click="renameModel(showRenameDialog.model, showRenameDialog.newName)"
>Rename</v-btn >Rename</v-btn
@@ -413,7 +413,7 @@ const handleBulkImport = async () => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
width="100%" width="100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="openExportIndividualModelPrompt" @click="openExportIndividualModelPrompt"
> >
<v-icon left class="open-icon" size="large"> mdi-export </v-icon> <v-icon left class="open-icon" size="large"> mdi-export </v-icon>

12
photon-client/src/lib/ThemeManager.ts
View File

@@ -2,7 +2,7 @@ import { type ThemeInstance } from "vuetify";
import { LightTheme, DarkTheme } from "@/plugins/vuetify"; import { LightTheme, DarkTheme } from "@/plugins/vuetify";
export const resetTheme = (theme: ThemeInstance) => { 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}-background`);
localStorage.removeItem(`${themeType}-primary`); localStorage.removeItem(`${themeType}-primary`);
localStorage.removeItem(`${themeType}-secondary`); localStorage.removeItem(`${themeType}-secondary`);
@@ -12,13 +12,13 @@ export const resetTheme = (theme: ThemeInstance) => {
}; };
export const getThemeColor = (theme: ThemeInstance, color: string): string => { export const getThemeColor = (theme: ThemeInstance, color: string): string => {
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 defaultTheme = theme.global.current.value.dark ? DarkTheme : LightTheme;
return localStorage.getItem(`${themeType}-${color}`) ?? defaultTheme.colors![color]!; return localStorage.getItem(`${themeType}-${color}`) ?? defaultTheme.colors![color]!;
}; };
export const setThemeColor = (theme: ThemeInstance, color: string, value: string | null) => { 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); if (value) localStorage.setItem(`${themeType}-${color}`, value);
else localStorage.removeItem(`${themeType}-${color}`); else localStorage.removeItem(`${themeType}-${color}`);
@@ -38,7 +38,7 @@ export const restoreThemeConfig = (theme: ThemeInstance) => {
if (storedTheme) theme.global.name.value = storedTheme; if (storedTheme) theme.global.name.value = storedTheme;
// Restore custom theme colors // 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 defaultTheme = theme.global.name.value === "LightTheme" ? LightTheme : DarkTheme;
const customBackground = localStorage.getItem(`${themeType}-background`); const customBackground = localStorage.getItem(`${themeType}-background`);
@@ -47,7 +47,7 @@ export const restoreThemeConfig = (theme: ThemeInstance) => {
const customSurface = localStorage.getItem(`${themeType}-surface`); 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.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!) ? (customBackground ?? defaultTheme.colors!.sidebar!)
: (customSurface ?? defaultTheme.colors!.sidebar!); : (customSurface ?? defaultTheme.colors!.sidebar!);

18
photon-client/src/views/CameraMatchingView.vue
View File

@@ -232,7 +232,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
setCameraView( setCameraView(
module.matchedCameraInfo, module.matchedCameraInfo,
@@ -248,7 +248,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
class="text-black" class="text-black"
color="buttonActive" color="buttonActive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:loading="deactivatingModule" :loading="deactivatingModule"
@click="deactivateModule(module.uniqueName)" @click="deactivateModule(module.uniqueName)"
> >
@@ -261,7 +261,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
color="error" color="error"
style="width: 100%" style="width: 100%"
:loading="module.uniqueName === deletingCamera" :loading="module.uniqueName === deletingCamera"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
() => () =>
(confirmDeleteDialog = { (confirmDeleteDialog = {
@@ -326,7 +326,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
setCameraView( setCameraView(
module.matchedCameraInfo, module.matchedCameraInfo,
@@ -342,7 +342,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
class="text-black" class="text-black"
color="buttonActive" color="buttonActive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
:loading="activatingModule" :loading="activatingModule"
@click="activateModule(module.uniqueName)" @click="activateModule(module.uniqueName)"
> >
@@ -355,7 +355,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
color="error" color="error"
style="width: 100%" style="width: 100%"
:loading="module.uniqueName === deletingCamera" :loading="module.uniqueName === deletingCamera"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click=" @click="
() => () =>
(confirmDeleteDialog = { (confirmDeleteDialog = {
@@ -393,7 +393,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
<v-btn <v-btn
color="buttonPassive" color="buttonPassive"
style="width: 100%" style="width: 100%"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="setCameraView(camera, false)" @click="setCameraView(camera, false)"
> >
<span>Details</span> <span>Details</span>
@@ -405,7 +405,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
color="buttonActive" color="buttonActive"
style="width: 100%" style="width: 100%"
:loading="assigningCamera" :loading="assigningCamera"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'" :variant="theme.global.current.value.dark ? 'outlined' : 'elevated'"
@click="assignCamera(camera)" @click="assignCamera(camera)"
> >
Activate Activate
@@ -457,7 +457,7 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
density="compact" density="compact"
text="A different camera may have been connected to this device! Compare the following information carefully." text="A different camera may have been connected to this device! Compare the following information carefully."
icon="mdi-information-outline" 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])" /> <PvCameraMatchCard :saved="viewingCamera[0]" :current="getMatchedDevice(viewingCamera[0])" />
</v-card-text> </v-card-text>

8
photon-client/src/views/DashboardView.vue
View File

@@ -92,7 +92,7 @@ const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfigurat
color="error" color="error"
density="compact" density="compact"
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
> >
<span> <span>
Arducam camera detected! Please configure the camera model in the <a href="#/cameras">Camera tab</a>! 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" color="error"
density="compact" density="compact"
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
> >
<span> <span>
Conflicting hostname detected! Please change the hostname in the <a href="#/settings">Settings tab</a>! 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" color="error"
density="compact" density="compact"
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
> >
<span <span
>One or more cameras have an FPS limit set! This may cause performance issues. Check your logs for more >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" color="error"
density="compact" density="compact"
icon="mdi-alert-circle-outline" icon="mdi-alert-circle-outline"
:variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'tonal'" :variant="theme.global.current.value.dark ? 'tonal' : 'elevated'"
> >
<span <span
>Conflicting camera name(s) detected! Please change the name(s) of >Conflicting camera name(s) detected! Please change the name(s) of