diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 9fc57db55..4d04cafa7 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -92,7 +92,7 @@
     "vite": "^3.1.0",
     "vite-bundle-visualizer": "^0.4.1",
     "vite-plugin-simple-gql": "^0.5.0",
-    "vue-tsc": "^0.40.13"
+    "vue-tsc": "^1.0.3"
   },
   "engines": {
     "node": "^16.0.0"
diff --git a/packages/frontend/src/main/components/comments/CommentThreadReply.vue b/packages/frontend/src/main/components/comments/CommentThreadReply.vue
index 6162b8b97..9a410410d 100644
--- a/packages/frontend/src/main/components/comments/CommentThreadReply.vue
+++ b/packages/frontend/src/main/components/comments/CommentThreadReply.vue
@@ -2,21 +2,18 @@
   <!-- eslint-disable vue/no-v-html -->
   <div
     class="d-flex align-center comment-thread-reply"
+    :class="
+      isUserOwned ? 'comment-thread-reply--author' : 'comment-thread-reply--visitor'
+    "
     @mouseenter="hover = true"
     @mouseleave="hover = false"
   >
     <div
-      :class="`flex-grow-1 d-flex flex-column px-2 py-1 mb-2 rounded-xl elevation-2 ${
-        $userId() === reply.authorId ? 'primary white--text' : 'background'
-      }`"
+      :class="`comment-thread-reply__inner flex-grow-1 d-flex flex-column px-2 py-1 mb-2 rounded-xl elevation-2`"
       style="width: 290px"
     >
       <div class="d-flex">
-        <div
-          :class="`d-inline-block ${
-            $userId() === reply.authorId ? 'xxx-order-last' : ''
-          }`"
-        >
+        <div :class="`d-inline-block`">
           <user-avatar :id="reply.authorId" :size="30" />
         </div>
         <div
@@ -32,7 +29,7 @@
           <comment-thread-reply-attachments
             v-if="reply.text.attachments && reply.text.attachments.length"
             :attachments="reply.text.attachments"
-            :primary="$userId() === reply.authorId"
+            :primary="isUserOwned"
           />
         </div>
       </div>
@@ -84,6 +81,8 @@ import SmartTextEditor from '@/main/components/common/text-editor/SmartTextEdito
 import { SMART_EDITOR_SCHEMA } from '@/main/lib/viewer/comments/commentsHelper'
 import CommentThreadReplyAttachments from '@/main/components/comments/CommentThreadReplyAttachments.vue'
 import { useCommitObjectViewerParams } from '@/main/lib/viewer/commit-object-viewer/stateManager'
+import { useIsLoggedIn } from '@/main/lib/core/composables/core'
+import { computed } from 'vue'
 
 export default {
   components: {
@@ -96,9 +95,14 @@ export default {
     stream: { type: Object, default: () => null },
     index: { type: Number, default: 0 }
   },
-  setup() {
+  setup(props) {
     const { streamId, resourceId, isEmbed } = useCommitObjectViewerParams()
-    return { streamId, resourceId, isEmbed }
+    const { userId } = useIsLoggedIn()
+    const isUserOwned = computed(
+      () => !!(userId.value && userId.value === props.reply?.authorId)
+    )
+
+    return { streamId, resourceId, isEmbed, isUserOwned }
   },
   data() {
     return {
@@ -111,8 +115,7 @@ export default {
     canArchive() {
       if (this.isEmbed) return false
       if (!this.reply || !this.stream) return false
-      if (this.stream.role === 'stream:owner' || this.reply.authorId === this.$userId())
-        return true
+      if (this.stream.role === 'stream:owner' || this.isUserOwned) return true
       return false
     }
   },
@@ -145,18 +148,47 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-:deep(.smart-text-editor),
-:deep(.comment-attachments) {
+<style lang="scss">
+// Theme-specific coloring
+.comment-thread-reply {
+  $base: &;
+
+  // Active user's reply
+  &.comment-thread-reply--author {
+    & > #{$base}__inner {
+      background-color: var(--v-primary-base);
+      border-color: var(--v-primary-base);
+
+      &,
+      a {
+        color: #ffffff;
+      }
+    }
+  }
+
+  // Guest's reply
+  &.comment-thread-reply--visitor {
+    & > #{$base}__inner {
+      background-color: var(--v-background-base);
+      border-color: var(--v-background-base);
+
+      &,
+      a {
+        color: var(--v-text-base);
+      }
+    }
+  }
+}
+.smart-text-editor,
+.comment-attachments {
   a {
     font-weight: bold;
-    color: white;
     text-decoration: none;
     word-break: break-all;
   }
 }
 
-:deep(.smart-text-editor) {
+.smart-text-editor {
   a:after {
     content: ' ↗ ';
   }
diff --git a/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue b/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue
index b2059a0be..aaf0b6ccb 100644
--- a/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue
+++ b/packages/frontend/src/main/components/comments/CommentThreadReplyAttachments.vue
@@ -1,18 +1,21 @@
 <template>
-  <div class="comment-attachments d-flex">
+  <div
+    class="comment-attachments d-flex"
+    :class="primary ? 'comment-attachments--primary' : 'comment-attachments--secondary'"
+  >
     <div class="text-caption d-flex flex-column">
       <a
         v-for="attachment in attachments"
         :key="attachment.id"
         v-tooltip="attachment.fileName"
         href="javascript:;"
-        :class="`my-1 ${primary ? '' : 'blue--text'}`"
+        :class="`my-1`"
         @click="
           showAttachmentPreview = true
           selectedAttachment = attachment
         "
       >
-        <v-icon small :class="`${primary ? 'white--text' : 'blue--text'}`">
+        <v-icon small>
           {{ icon(attachment.fileType) }}
         </v-icon>
         {{ attachment.fileName.substring(0, 22) }}
@@ -76,3 +79,22 @@ export default Vue.extend({
   }
 })
 </script>
+<style scoped lang="scss">
+.comment-attachments {
+  $base: &;
+
+  &#{$base}--primary {
+    a,
+    i {
+      color: #ffffff !important;
+    }
+  }
+
+  &#{$base}--secondary {
+    a,
+    i {
+      color: var(--v-primary-base) !important;
+    }
+  }
+}
+</style>
diff --git a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
index 2af7ffb21..3f8056d33 100644
--- a/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
+++ b/packages/frontend/src/main/components/viewer/CommentsOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- 
+  <!--
     HIC SVNT DRACONES
   -->
   <div
@@ -159,7 +159,6 @@
     </portal>
     <portal to="viewercontrols" :order="5">
       <v-btn
-        key="comment-toggle-button"
         v-tooltip="currentCommentVisStatus"
         rounded
         icon
diff --git a/packages/frontend/src/main/components/viewer/ViewerBubbles.vue b/packages/frontend/src/main/components/viewer/ViewerBubbles.vue
index e674f53be..052516dfa 100644
--- a/packages/frontend/src/main/components/viewer/ViewerBubbles.vue
+++ b/packages/frontend/src/main/components/viewer/ViewerBubbles.vue
@@ -72,7 +72,6 @@
     <portal to="viewercontrols" :order="4">
       <v-btn
         v-show="users.length !== 0"
-        key="bubbles-toggle-button"
         v-tooltip="`Toggle real time user bubbles`"
         small
         rounded
diff --git a/packages/frontend/src/main/layouts/TheAuth.vue b/packages/frontend/src/main/layouts/TheAuth.vue
index 68cec9626..b8636013a 100644
--- a/packages/frontend/src/main/layouts/TheAuth.vue
+++ b/packages/frontend/src/main/layouts/TheAuth.vue
@@ -1,6 +1,9 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
+  <v-app
+    id="speckle"
+    :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
+  >
     <v-container fill-height fluid>
       <v-row align="center" justify="center">
         <v-col
diff --git a/packages/frontend/src/main/pages/common/NotFound.vue b/packages/frontend/src/main/pages/common/NotFound.vue
index 3a1032436..0fe461a48 100644
--- a/packages/frontend/src/main/pages/common/NotFound.vue
+++ b/packages/frontend/src/main/pages/common/NotFound.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
+  <v-app
+    id="speckle"
+    :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
+  >
     <v-container fill-height fluid>
       <v-row align="center" justify="center">
         <v-col cols="12" md="8">
diff --git a/packages/frontend/src/main/pages/common/TheError.vue b/packages/frontend/src/main/pages/common/TheError.vue
index 9d92367da..3472e4f2a 100644
--- a/packages/frontend/src/main/pages/common/TheError.vue
+++ b/packages/frontend/src/main/pages/common/TheError.vue
@@ -1,5 +1,8 @@
 <template>
-  <v-app :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`">
+  <v-app
+    id="speckle"
+    :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
+  >
     <v-container fill-height fluid>
       <v-row align="center" justify="center">
         <v-col cols="12" md="8">
diff --git a/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue b/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue
index 3ac38cac5..6be5bd530 100644
--- a/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue
+++ b/packages/frontend/src/main/pages/onboarding/TheOnboarding.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app
-    id="speckle-auth"
+    id="speckle"
     :class="`${$vuetify.theme.dark ? 'background-dark' : 'background-light'}`"
   >
     <v-container fill-height fluid>
diff --git a/packages/frontend/src/main/pages/stream/TheEmbed.vue b/packages/frontend/src/main/pages/stream/TheEmbed.vue
index 780659621..84be2799e 100644
--- a/packages/frontend/src/main/pages/stream/TheEmbed.vue
+++ b/packages/frontend/src/main/pages/stream/TheEmbed.vue
@@ -1,5 +1,6 @@
 <template>
   <v-app
+    id="speckle"
     :class="`embed-viewer no-scrollbar ${
       transparent ? '' : $vuetify.theme.dark ? 'background-dark' : 'background-light'
     }`"
@@ -204,7 +205,7 @@ export default defineComponent({
     })
 
     const updateTransparency = () => {
-      const appEl = document.getElementById('app')
+      const appEl = document.getElementById('speckle')
       const classList = appEl!.classList
       if (transparent.value) {
         document.body.style.background = 'none'
diff --git a/packages/frontend/src/main/pages/stream/TheStream.vue b/packages/frontend/src/main/pages/stream/TheStream.vue
index 26c498cf6..48faad0d7 100644
--- a/packages/frontend/src/main/pages/stream/TheStream.vue
+++ b/packages/frontend/src/main/pages/stream/TheStream.vue
@@ -267,7 +267,7 @@ export default defineComponent({
           return !this.isLoggedIn
         }
       }
-    }
+    } as never // for some reason Vue Apollo Options API being used for subscriptions breaks all types in this SFC
   },
   mounted() {
     this.$eventHub.$on(StreamEvents.Refetch, () => {
diff --git a/packages/frontend/src/plugins/vuetify.js b/packages/frontend/src/plugins/vuetify.js
index e49c3d0e4..6b7759567 100644
--- a/packages/frontend/src/plugins/vuetify.js
+++ b/packages/frontend/src/plugins/vuetify.js
@@ -23,9 +23,9 @@ export default new Vuetify({
         error: '#FF5555', //red
         warning: '#FF9100', //orange
         info: '#313BCF', //dark blue
-        success: '#4caf50',
-        text: '#FFFFFF',
-        background: '#f5f6f7'
+        success: '#4caf50', // green
+        text: '#000000', // black
+        background: '#f5f6f7' // white
       },
       dark: {
         primary: '#047EFB', //blue
@@ -34,8 +34,9 @@ export default new Vuetify({
         error: '#FF5555', //red
         warning: '#FF9100', //orange
         info: '#9298f0', //dark blue
-        success: '#4caf50',
-        background: '#1a1a1a'
+        success: '#4caf50', // green
+        text: '#FFFFFF', // white
+        background: '#1a1a1a' // black / dark grey
       }
     }
   }
diff --git a/yarn.lock b/yarn.lock
index dfc2cd401..d685aa847 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4905,7 +4905,7 @@ __metadata:
     vue-mixpanel: 1.0.7
     vue-router: ^3.4.9
     vue-timeago: ^5.1.2
-    vue-tsc: ^0.40.13
+    vue-tsc: ^1.0.3
     vue2-perfect-scrollbar: ^1.5.2
     vuedraggable: ^2.24.3
     vuetify: ^2.3.21
@@ -6559,56 +6559,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/code-gen@npm:0.40.13":
-  version: 0.40.13
-  resolution: "@volar/code-gen@npm:0.40.13"
+"@volar/language-core@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@volar/language-core@npm:1.0.3"
   dependencies:
-    "@volar/source-map": 0.40.13
-  checksum: 70c1282d72c33b27b3c08f16f1de6888b66226ce1cf79bfa2e43c3652da399f68847e026ba83293044376d1a8470289dd7dc23c17feb6e75c1cba3e2787817d1
+    "@volar/source-map": 1.0.3
+    "@vue/reactivity": ^3.2.38
+    muggle-string: ^0.1.0
+  checksum: 37e75fca3c4f04dd4674bc6e33eada174ee9d9cbd470f8f907381263bcd7647e6366868a440e73720a05ee720553064f85c0e4c58acf34ac6a689ed66a67eed5
   languageName: node
   linkType: hard
 
-"@volar/source-map@npm:0.40.13":
-  version: 0.40.13
-  resolution: "@volar/source-map@npm:0.40.13"
+"@volar/source-map@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@volar/source-map@npm:1.0.3"
   dependencies:
-    "@vue/reactivity": 3.2.38
-  checksum: 90d3d94fac20b0a98308f88bce8dc13651fdbddaf8a245e547db0ba3249478fa11dc13a0e53b8f4c6507a3ffbfc9d1bb763e59191c01ab9d7e831a7e15ce28f3
+    muggle-string: ^0.1.0
+  checksum: e7bc09bc31099651e501e48916dd2af4fe009f36786cb08b679777f6b7d0e2ac77c38246d9368ed6fdb45b3d00ab89e83ea827ea8d35028692d0a252cb981ae6
   languageName: node
   linkType: hard
 
-"@volar/typescript-faster@npm:0.40.13":
-  version: 0.40.13
-  resolution: "@volar/typescript-faster@npm:0.40.13"
+"@volar/typescript@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@volar/typescript@npm:1.0.3"
   dependencies:
-    semver: ^7.3.7
-  checksum: e9ea271ba36ad72c556fe6ec97210b5a4343dfcd599b0bcae71c2bd42c7ea18c97c84b5990b0dcc9d36ea153d8c37be19737e86aa51f4dab29f502bf90178d79
+    "@volar/language-core": 1.0.3
+  checksum: e001b680c75c62751477b2aac8a70beea6ea1609c8ecd0ec0509af42898dfb5f424bc44c4d7dde6fb389e3567a247664fde01d458d5cd66d46938725fd0ef2b6
   languageName: node
   linkType: hard
 
-"@volar/vue-language-core@npm:0.40.13":
-  version: 0.40.13
-  resolution: "@volar/vue-language-core@npm:0.40.13"
+"@volar/vue-language-core@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@volar/vue-language-core@npm:1.0.3"
   dependencies:
-    "@volar/code-gen": 0.40.13
-    "@volar/source-map": 0.40.13
-    "@vue/compiler-core": ^3.2.38
+    "@volar/language-core": 1.0.3
+    "@volar/source-map": 1.0.3
     "@vue/compiler-dom": ^3.2.38
     "@vue/compiler-sfc": ^3.2.38
     "@vue/reactivity": ^3.2.38
     "@vue/shared": ^3.2.38
-  checksum: 377461b27f576520da0dc2863909a4cefb8b8caec9feaa693325d7a256f519be7bf4cf8056e017689e2678f64ecceca10e08d9210d2351304474afb0ca74dbc9
+    minimatch: ^5.1.0
+    vue-template-compiler: ^2.7.10
+  checksum: 954bc2fba46227a60cf7c716fa7a6a73622d7860087fb2e951b13992c46271e7ba5ac94d5eea6837cbb4b884fefa2d4c271469087c08aa31d9d14d2c9f69c43e
   languageName: node
   linkType: hard
 
-"@volar/vue-typescript@npm:0.40.13":
-  version: 0.40.13
-  resolution: "@volar/vue-typescript@npm:0.40.13"
+"@volar/vue-typescript@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@volar/vue-typescript@npm:1.0.3"
   dependencies:
-    "@volar/code-gen": 0.40.13
-    "@volar/typescript-faster": 0.40.13
-    "@volar/vue-language-core": 0.40.13
-  checksum: 51387739e04ab668ee29fc245a0d5667a31fd116b8c10b3a1cd5d42d64e35e07d2a7bf765d71e5c0fe81afb38e5099f77829762b9968681d84ce64f6dabc0b90
+    "@volar/typescript": 1.0.3
+    "@volar/vue-language-core": 1.0.3
+  checksum: 9e89f6400548ed0cfbd94ddf465388082ce071f94c7572fa75a6ea31cd1edb6e139bdf9d4f626293c31a7997f9a2cd5e78ecc00f86bd679e577fcb4f936595d2
   languageName: node
   linkType: hard
 
@@ -6643,7 +6645,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-core@npm:3.2.40, @vue/compiler-core@npm:^3.2.38":
+"@vue/compiler-core@npm:3.2.40":
   version: 3.2.40
   resolution: "@vue/compiler-core@npm:3.2.40"
   dependencies:
@@ -6735,15 +6737,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.2.38":
-  version: 3.2.38
-  resolution: "@vue/reactivity@npm:3.2.38"
-  dependencies:
-    "@vue/shared": 3.2.38
-  checksum: c9afb0184603c93a450553d8280a4e32b4e327ab90cadb94d020d8118d6214bee820db4312d26d0570679ede18e9b8d4ca696eab012abd0839a346c30b5ca07e
-  languageName: node
-  linkType: hard
-
 "@vue/reactivity@npm:^3.2.38":
   version: 3.2.40
   resolution: "@vue/reactivity@npm:3.2.40"
@@ -6753,13 +6746,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/shared@npm:3.2.38":
-  version: 3.2.38
-  resolution: "@vue/shared@npm:3.2.38"
-  checksum: c1aa5ec1320fff7431297c594cb976908b5ff240a16384930b4b16dc2a0d663aa09706337dee6910db260c5bb24fb31359006637d01de98009247a68acde5eae
-  languageName: node
-  linkType: hard
-
 "@vue/shared@npm:3.2.40, @vue/shared@npm:^3.2.38":
   version: 3.2.40
   resolution: "@vue/shared@npm:3.2.40"
@@ -9947,6 +9933,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"de-indent@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "de-indent@npm:1.0.2"
+  checksum: 8deacc0f4a397a4414a0fc4d0034d2b7782e7cb4eaf34943ea47754e08eccf309a0e71fa6f56cc48de429ede999a42d6b4bca761bf91683be0095422dbf24611
+  languageName: node
+  linkType: hard
+
 "debounce@npm:^1.2.0":
   version: 1.2.1
   resolution: "debounce@npm:1.2.1"
@@ -16288,6 +16281,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"muggle-string@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "muggle-string@npm:0.1.0"
+  checksum: c892cb53c9e066185913e4d6d0af71df6a2a8d8fd614903d13cd6b260c32ebc7b08ae7190a5faf3f7a25ba01cb9be34844d2a069351c090e4a6013f1eee58a50
+  languageName: node
+  linkType: hard
+
 "multicast-dns@npm:^7.2.4":
   version: 7.2.4
   resolution: "multicast-dns@npm:7.2.4"
@@ -21952,6 +21952,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vue-template-compiler@npm:^2.7.10":
+  version: 2.7.11
+  resolution: "vue-template-compiler@npm:2.7.11"
+  dependencies:
+    de-indent: ^1.0.2
+    he: ^1.2.0
+  checksum: 5a154969e95798df1ed45545e82fa28fbfcc87d587141ba8f01eaa04d34afb2e3a81a613647d9ceeb6491e8d4f4970ef81ec24d1e6404ff972c3722e1c16af26
+  languageName: node
+  linkType: hard
+
 "vue-timeago@npm:^5.1.2":
   version: 5.1.3
   resolution: "vue-timeago@npm:5.1.3"
@@ -21961,17 +21971,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-tsc@npm:^0.40.13":
-  version: 0.40.13
-  resolution: "vue-tsc@npm:0.40.13"
+"vue-tsc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "vue-tsc@npm:1.0.3"
   dependencies:
-    "@volar/vue-language-core": 0.40.13
-    "@volar/vue-typescript": 0.40.13
+    "@volar/vue-language-core": 1.0.3
+    "@volar/vue-typescript": 1.0.3
   peerDependencies:
     typescript: "*"
   bin:
     vue-tsc: bin/vue-tsc.js
-  checksum: 00e5cb424f1ab1a198489400b165a1d3968f85bf2747fe1cc8d8ac7161752a407d68e703f0132a547eaa8b236d1454627b92771cf268a968e5ac191b18de9690
+  checksum: 34e16a8f4c7d74110f7613805f4e55b3e7766db86898058d0dafdebf1ab1d8f2e0ae0acf21ef96cdf3e01555f13c7ed2e801b3a3c33507bf5c3b750053f7589f
   languageName: node
   linkType: hard