Improve theme contrast in viewer controls

src/components/CineViewer.vue

@@ -7,9 +7,17 @@
     @focusin="hover = true"
     @focusout="hover = false"
   >
-    <div class="vtk-gutter mt-1">
-      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
-        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
+    <div class="vtk-gutter">
+      <v-btn
+        color="white"
+        icon
+        size="medium"
+        variant="text"
+        @click="resetCamera"
+      >
+        <v-icon size="medium" class="py-1 view-control-icon"
+          >mdi-camera-flip-outline</v-icon
+        >
         <v-tooltip
           location="right"
           activator="parent"

src/components/ControlButton.vue

@@ -2,7 +2,6 @@
   <v-btn
     variant="text"
     :rounded="0"
-    dark
     :height="sizeV"
     :width="sizeV"
     :min-width="sizeV"

src/components/ControlsStrip.vue

@@ -90,10 +90,7 @@ const { count: msgCount, badgeColor: msgBadgeColor } = useMessageBubble();
 </script>
 
 <template>
-  <div
-    id="tools-strip"
-    class="bg-grey-darken-4 d-flex flex-column align-center"
-  >
+  <div id="tools-strip" class="bg-surface d-flex flex-column align-center">
     <control-button
       size="40"
       icon="mdi-folder-open"
@@ -175,14 +172,14 @@ const { count: msgCount, badgeColor: msgBadgeColor } = useMessageBubble();
 <style src="@/src/components/styles/utils.css"></style>
 <style scoped>
 #tools-strip {
-  border-left: 1px solid #212121;
+  border-left: 1px solid rgba(var(--v-theme-on-surface), 0.12);
   flex: 0 0 40px;
 }
 
 .tool-separator {
   width: 75%;
   height: 1px;
   border: none;
-  border-top: 1px solid rgb(112, 112, 112);
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.3);
 }
 </style>

src/components/ControlsStripTools.vue

@@ -244,7 +244,8 @@ export default defineComponent({
 
 <style>
 .tool-btn-selected {
-  background-color: rgb(var(--v-theme-selection-bg-color));
+  background-color: rgb(var(--v-theme-primary-darken-1));
+  color: rgb(var(--v-theme-on-primary-darken-1));
 }
 </style>
 
@@ -258,7 +259,7 @@ export default defineComponent({
   width: 75%;
   height: 1px;
   border: none;
-  border-top: 1px solid rgb(112, 112, 112);
+  border-top: 1px solid rgba(var(--v-theme-on-surface), 0.3);
 }
 
 .popup-menu {

src/components/DicomQuickInfoButton.vue

@@ -44,24 +44,21 @@ const dicomInfo = computed(() => {
   <v-menu
     open-on-hover
     location="bottom left"
-    left
-    nudge-left="10"
-    dark
     v-if="dicomInfo !== null"
     max-width="300px"
   >
     <template v-slot:activator="{ props }">
       <v-icon
         v-bind="props"
-        dark
+        color="white"
         size="medium"
-        class="pointer-events-all"
+        class="pointer-events-all dicom-info-trigger"
         @click.stop
       >
         mdi-information
       </v-icon>
     </template>
-    <v-list class="bg-grey-darken-3">
+    <v-list class="dicom-info-menu">
       <v-list-item>
         <v-list-item-title class="font-weight-bold">
           PATIENT / CASE
@@ -92,3 +89,13 @@ const dicomInfo = computed(() => {
 </template>
 
 <style scoped src="@/src/components/styles/utils.css"></style>
+<style scoped>
+.dicom-info-menu {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.3);
+}
+
+.dicom-info-trigger {
+  text-shadow: none;
+  letter-spacing: normal;
+}
+</style>

src/components/ImageListCard.vue

@@ -2,6 +2,7 @@
   <v-hover v-slot="{ isHovering, props }">
     <v-card
       :disabled="disabled"
+      class="image-list-card"
       variant="outlined"
       :ripple="!disabled"
       :class="{
@@ -48,6 +49,10 @@
 </template>
 
 <style scoped>
+.image-list-card {
+  border-color: rgba(var(--v-theme-on-surface), 0.2);
+}
+
 .image-list-card-active {
   background-color: rgb(var(--v-theme-selection-bg-color));
   border-color: rgb(var(--v-theme-selection-border-color));

src/components/ModulePanel.vue

@@ -170,7 +170,7 @@ export default defineComponent({
   flex: 0 2;
   /* roughly match vuetify's dark/light transition */
   transition: border-bottom 0.3s;
-  border-bottom: 2px solid rgb(var(--v-theme-on-surface-variant));
+  border-bottom: 2px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
 #close-btn {

src/components/PatientStudyVolumeBrowser.vue

@@ -349,6 +349,7 @@ export default defineComponent({
 .volume-card {
   padding: 8px;
   cursor: pointer;
+  border-color: rgba(var(--v-theme-on-surface), 0.2);
 }
 
 .volume-card-active {

src/components/SliceViewer.vue

@@ -7,9 +7,17 @@
     @focusin="hover = true"
     @focusout="hover = false"
   >
-    <div class="vtk-gutter mt-1">
-      <v-btn dark icon size="medium" variant="text" @click="resetCamera">
-        <v-icon size="medium" class="py-1">mdi-camera-flip-outline</v-icon>
+    <div class="vtk-gutter">
+      <v-btn
+        color="white"
+        icon
+        size="medium"
+        variant="text"
+        @click="resetCamera"
+      >
+        <v-icon size="medium" class="py-1 view-control-icon"
+          >mdi-camera-flip-outline</v-icon
+        >
         <v-tooltip
           location="right"
           activator="parent"

src/components/ViewTypeSwitcher.vue

@@ -41,6 +41,7 @@ function updateView(newViewName: string) {
     hide-details
     variant="solo"
     class="pointer-events-all view-type-select"
+    aria-label="View type"
   ></v-select>
 </template>
 
@@ -49,6 +50,9 @@ function updateView(newViewName: string) {
   max-width: 90px;
   font-size: 0.8125rem;
   margin-left: auto;
+  color: rgb(var(--v-theme-on-surface));
+  text-shadow: none;
+  letter-spacing: normal;
 }
 
 .view-type-select :deep(.v-field__input) {

src/components/VolumeViewer.vue

@@ -32,13 +32,13 @@
           <div class="annotation-cell">
             <v-btn
               class="pointer-events-all"
-              dark
+              color="white"
               icon
               size="medium"
               variant="text"
               @click="resetCamera"
             >
-              <v-icon size="medium" class="py-1">
+              <v-icon size="medium" class="py-1 view-control-icon">
                 mdi-camera-flip-outline
               </v-icon>
               <v-tooltip

src/components/dicom-web/StudyVolumeDicomWeb.vue

@@ -213,6 +213,7 @@ export default defineComponent({
 .volume-card {
   padding: 8px;
   cursor: pointer;
+  border-color: rgba(var(--v-theme-on-surface), 0.2);
 }
 
 .series-desc {

src/components/styles/vtk-view.css

@@ -39,6 +39,7 @@
 .vtk-gutter {
   display: flex;
   flex-flow: column;
+  padding-top: 4px;
   background: black;
 }
 
@@ -84,6 +85,11 @@
   white-space: nowrap;
 }
 
+.view-control-icon {
+  text-shadow: none;
+  letter-spacing: normal;
+}
+
 .loading-indicator {
   position: absolute;
   top: 0;

src/components/tools/AnnotationInfo.vue

@@ -59,7 +59,7 @@ const offset = computed(() => {
       top: `${info.displayXY[1] - offset.y}px`,
       zIndex: 500, // stay under context menu
     }"
-    class="better-contrast"
+    class="annotation-tooltip"
   >
     <div class="tooltip-text font-weight-bold">{{ label }}</div>
     <div v-if="metadata.length > 0">
@@ -72,9 +72,7 @@ const offset = computed(() => {
 </template>
 
 <style scoped>
-.better-contrast :deep(.v-overlay__content) {
-  opacity: 1 !important;
-  background: rgba(255, 255, 255, 0.9) !important;
+.annotation-tooltip :deep(.v-overlay__content) {
   padding-left: 0;
   padding-right: 0;
   pointer-events: none;

src/global.css

@@ -19,16 +19,8 @@ body {
   white-space: nowrap;
 }
 
-.v-card--variant-outlined {
-  border: thin solid rgb(var(--v-theme-on-surface-variant)) !important;
-}
-
-.v-tooltip .v-overlay__content {
-  background-color: rgba(255, 255, 255, 0.9) !important;
-}
-
-.v-slider-thumb__label {
-  background-color: rgba(255, 255, 255, 0.9) !important;
+.v-tooltip.v-theme--kw-light > .v-overlay__content {
+  outline: 1px solid rgb(var(--v-theme-on-surface-variant));
 }
 
 ul:not([class]),

src/plugins/vuetify.js

@@ -32,8 +32,6 @@ const vuetify = createVuetify({
         colors: {
           'selection-bg-color': '#b3e5fc',
           'selection-border-color': '#b3e5fc',
-          surface: '#f0f0f0',
-          'on-surface-variant': '#d0d0d0',
         },
       },
     },