diff --git a/.gitignore b/.gitignore index dda0d4712..6416c2fba 100644 --- a/.gitignore +++ b/.gitignore @@ -147,3 +147,4 @@ photon-server/src/main/resources/web/* node_modules dist components.d.ts +photon-server/src/main/resources/web/index.html diff --git a/photon-client/src/App.vue b/photon-client/src/App.vue index b23e2c756..07b145a00 100644 --- a/photon-client/src/App.vue +++ b/photon-client/src/App.vue @@ -87,30 +87,26 @@ if (!is_demo) { } ::-webkit-scrollbar-track { - background: #232c37; + background: rgb(var(--v-theme-background)); } ::-webkit-scrollbar-thumb { - background-color: #ffd843; + background-color: rgb(var(--v-theme-accent)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { - background-color: #e4c33c; + background-color: rgb(var(--v-theme-primary)); } .main-container { - background-color: #232c37; padding: 0 !important; } .v-overlay__scrim { - background-color: #202020; + background-color: #111111; } -#title { - color: #ffd843; -} div.v-layout { overflow: unset !important; } diff --git a/photon-client/src/assets/images/loading-transparent.svg b/photon-client/src/assets/images/loading-transparent.svg index e0bdca029..6c68b4221 100644 --- a/photon-client/src/assets/images/loading-transparent.svg +++ b/photon-client/src/assets/images/loading-transparent.svg @@ -1,4 +1,4 @@ - + diff --git a/photon-client/src/assets/images/logoSmallTransparent.svg b/photon-client/src/assets/images/logoSmallTransparent.svg new file mode 100644 index 000000000..8abba5d00 --- /dev/null +++ b/photon-client/src/assets/images/logoSmallTransparent.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/photon-client/src/assets/styles/variables.scss b/photon-client/src/assets/styles/variables.scss index f1181d8c2..77850717f 100644 --- a/photon-client/src/assets/styles/variables.scss +++ b/photon-client/src/assets/styles/variables.scss @@ -3,7 +3,7 @@ $default-font: "Prompt", sans-serif !default; $body-font-family: $default-font; $heading-font-family: $default-font; -$body-background: #282c34; +$body-background: rgb(var(--v-theme-background)); body { background: $body-background; @@ -21,11 +21,7 @@ html { > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) { - background: #005281 !important; -} - -.v-banner { - padding: 4px !important; + background: rgba(0, 0, 0, 0.2); } .v-card-title, @@ -72,3 +68,7 @@ html { .pa-10px { padding: 10px !important; } + +.rounded-12 { + border-radius: 12px; +} diff --git a/photon-client/src/components/app/photon-error-snackbar.vue b/photon-client/src/components/app/photon-error-snackbar.vue index 914d8b281..d654d5343 100644 --- a/photon-client/src/components/app/photon-error-snackbar.vue +++ b/photon-client/src/components/app/photon-error-snackbar.vue @@ -6,6 +6,7 @@ import { useStateStore } from "@/stores/StateStore"; diff --git a/photon-client/src/components/app/photon-log-view.vue b/photon-client/src/components/app/photon-log-view.vue index f3fa5f1fb..5d219fc10 100644 --- a/photon-client/src/components/app/photon-log-view.vue +++ b/photon-client/src/components/app/photon-log-view.vue @@ -74,7 +74,7 @@ document.addEventListener("keydown", (e) => { Download @@ -95,11 +95,11 @@ document.addEventListener("keydown", (e) => { /> - mdi-trash-can-outline + mdi-trash-can-outline Clear Client Logs - mdi-close + mdi-close Close @@ -110,26 +110,31 @@ document.addEventListener("keydown", (e) => {
- + - mdi-close-circle-outline + mdi-close
{{ getLogLevelFromIndex(level) - }} + }}
@@ -170,7 +175,7 @@ document.addEventListener("keydown", (e) => { /* Dialog data size - options */ height: calc(100% - 56px); padding: 10px; - background-color: #232c37 !important; + background-color: rgb(var(--v-theme-logsBackground)) !important; border-radius: 5px; } diff --git a/photon-client/src/components/app/photon-sidebar.vue b/photon-client/src/components/app/photon-sidebar.vue index e8e2d619b..4801f0446 100644 --- a/photon-client/src/components/app/photon-sidebar.vue +++ b/photon-client/src/components/app/photon-sidebar.vue @@ -4,7 +4,8 @@ import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore"; import { useStateStore } from "@/stores/StateStore"; import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore"; import { useRoute } from "vue-router"; -import { useDisplay } from "vuetify"; +import { useDisplay, useTheme } from "vuetify"; +import { onBeforeMount } from "vue"; const compact = computed({ get: () => { @@ -16,17 +17,32 @@ const compact = computed({ }); const { mdAndUp } = useDisplay(); +const theme = useTheme(); + +const changeTheme = () => { + const newTheme = theme.global.name.value === "LightTheme" ? "DarkTheme" : "LightTheme"; + theme.global.name.value = newTheme; + localStorage.setItem("theme", newTheme); +}; + +onBeforeMount(() => { + const storedTheme = localStorage.getItem("theme"); + if (storedTheme) { + theme.global.name.value = storedTheme; + } +}); + const renderCompact = computed(() => compact.value || !mdAndUp.value); diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue index 8051ab477..fc2c2b59a 100644 --- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue +++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue @@ -4,6 +4,9 @@ import { type ActivePipelineSettings, PipelineType } from "@/types/PipelineTypes import { useStateStore } from "@/stores/StateStore"; import { angleModulus, toDeg } from "@/lib/MathUtils"; import { computed } from "vue"; +import { useTheme } from "vuetify"; + +const theme = useTheme(); // TODO fix pipeline typing in order to fix this, the store settings call should be able to infer that only valid pipeline type settings are exposed based on pre-checks for the entire config section // Defer reference to store access method @@ -200,7 +203,12 @@ const resetCurrentBuffer = () => { >Multi-tag pose standard deviation over the last {{ useStateStore().currentMultitagBuffer?.length || "NaN" }}/100 samples - Reset Samples @@ -274,7 +282,6 @@ th { padding-right: 8px !important; } .v-table { - background-color: #006492 !important; width: 100%; font-size: 1rem !important; @@ -287,11 +294,6 @@ th { } } tbody { - :hover { - td { - background-color: #005281 !important; - } - } tr { td { padding: 0 !important; @@ -313,7 +315,7 @@ th { } ::-webkit-scrollbar-thumb { - background-color: #ffd843; + background-color: rgb(var(--v-theme-accent)); border-radius: 10px; } } diff --git a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue index 0def1f480..e59c78f1b 100644 --- a/photon-client/src/components/dashboard/tabs/ThresholdTab.vue +++ b/photon-client/src/components/dashboard/tabs/ThresholdTab.vue @@ -6,6 +6,9 @@ import PvSwitch from "@/components/common/pv-switch.vue"; import { useStateStore } from "@/stores/StateStore"; import { ColorPicker, type HSV } from "@/lib/ColorPicker"; import { useDisplay } from "vuetify"; +import { useTheme } from "vuetify"; + +const theme = useTheme(); const averageHue = computed(() => { const isHueInverted = useCameraSettingsStore().currentPipelineSettings.hueInverted; @@ -186,17 +189,25 @@ const interactiveCols = computed(() => - mdi-minus + mdi-minus Shrink Range - - mdi-plus-minus + + mdi-plus-minus {{ useCameraSettingsStore().currentPipelineSettings.hueInverted ? "Exclude" : "Set to" }} Average @@ -204,18 +215,28 @@ const interactiveCols = computed(() => - mdi-plus + mdi-plus Expand Range
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue index e9f2d8d9c..414136983 100644 --- a/photon-client/src/components/settings/ApriltagControlCard.vue +++ b/photon-client/src/components/settings/ApriltagControlCard.vue @@ -8,23 +8,19 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num const quat = new ThreeQuat(rot_quat.X, rot_quat.Y, rot_quat.Z, rot_quat.W); const euler = new Euler().setFromQuaternion(quat, "ZYX"); - return { - x: toDeg(euler.x), - y: toDeg(euler.y), - z: toDeg(euler.z) - }; + return { x: toDeg(euler.x), y: toDeg(euler.y), z: toDeg(euler.z) }; };