Skip to content

refactor dark mode checks #2407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samfreund merged 1 commit into from
Mar 24, 2026
Merged

refactor dark mode checks #2407

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions photon-client/src/components/app/photon-3d-visualizer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
8 changes: 4 additions & 4 deletions photon-client/src/components/app/photon-calibration-visualizer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion photon-client/src/components/app/photon-sidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions photon-client/src/components/cameras/CameraCalibrationCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="
Expand All @@ -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'"
>
Expand All @@ -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"
>
Expand All @@ -509,15 +509,15 @@ 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">
<v-btn
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()"
>
Expand All @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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'">
Expand Down
6 changes: 3 additions & 3 deletions photon-client/src/components/cameras/CameraControlCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'"
Copy link
Copy Markdown
Contributor

@Gold856 Gold856 Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we meant to change this.

Copy link
Copy Markdown
Member Author

@samfreund samfreund Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, I'll lump that into #2394

@click="fetchSnapshots"
>
<v-icon start class="open-icon" size="large"> mdi-folder </v-icon>
Expand All @@ -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">
Expand All @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions photon-client/src/components/cameras/CameraSettingsCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions photon-client/src/components/cameras/CamerasView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand All @@ -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 ||
Expand Down
4 changes: 2 additions & 2 deletions photon-client/src/components/common/pv-delete-modal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 = '';
Expand Down
8 changes: 4 additions & 4 deletions photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand All @@ -441,15 +441,15 @@ 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"
>
Cancel
</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
Expand Down
2 changes: 1 addition & 1 deletion photon-client/src/components/dashboard/ConfigOptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions photon-client/src/components/dashboard/StreamConfigCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -69,15 +69,15 @@ 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>
</v-btn>
<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>
Expand Down
10 changes: 5 additions & 5 deletions photon-client/src/components/dashboard/tabs/OutputTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion photon-client/src/components/dashboard/tabs/TargetsTab.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
>
Expand Down
Loading
Loading