Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-19 00:41:41 +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;
}
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

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);
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

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
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>

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

@@ -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"

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

@@ -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'">

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

@@ -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"

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

@@ -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>

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

@@ -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 ||

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

@@ -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 = '';

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-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

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

@@ -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>

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

@@ -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>

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

@@ -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

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

@@ -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
>

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

@@ -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

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

@@ -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]);

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

@@ -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="

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

@@ -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`
}
]
}

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

@@ -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>

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

@@ -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!);

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

@@ -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>

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

@@ -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