Transparent wrist overlay toggle

html/src/app.js

@@ -7513,6 +7513,7 @@ speechSynthesis.getVoices();
     $app.data.worldAutoCacheInviteFilter = configRepository.getBool('VRCX_worldAutoCacheInviteFilter');
     $app.data.worldAutoCacheGPSFilter = configRepository.getBool('VRCX_worldAutoCacheGPSFilter');
     $app.data.autoSweepVRChatCache = configRepository.getBool('VRCX_autoSweepVRChatCache');
+    $app.data.vrBackgroundEnabled = configRepository.getBool('VRCX_vrBackgroundEnabled');
     var saveOpenVROption = function () {
         configRepository.setBool('openVR', this.openVR);
         configRepository.setBool('openVRAlways', this.openVRAlways);
@@ -7532,6 +7533,7 @@ speechSynthesis.getVoices();
         configRepository.setBool('VRCX_worldAutoCacheInviteFilter', this.worldAutoCacheInviteFilter);
         configRepository.setBool('VRCX_worldAutoCacheGPSFilter', this.worldAutoCacheGPSFilter);
         configRepository.setBool('VRCX_autoSweepVRChatCache', this.autoSweepVRChatCache);
+        configRepository.setBool('VRCX_vrBackgroundEnabled', this.vrBackgroundEnabled);
         this.updateVRConfigVars();
     };
     $app.data.TTSvoices = speechSynthesis.getVoices();
@@ -7561,6 +7563,7 @@ speechSynthesis.getVoices();
     $app.watch.worldAutoCacheInviteFilter = saveOpenVROption;
     $app.watch.worldAutoCacheGPSFilter = saveOpenVROption;
     $app.watch.autoSweepVRChatCache = saveOpenVROption;
+    $app.watch.vrBackgroundEnabled = saveOpenVROption;
     $app.watch.notificationTTS = saveNotificationTTS;
     $app.data.themeMode = configRepository.getString('VRCX_ThemeMode');
     if (!$app.data.themeMode) {
@@ -7630,6 +7633,10 @@ speechSynthesis.getVoices();
         $app.data.worldAutoCacheGPS = 'Never';
         configRepository.setString('VRCX_worldAutoCacheGPS', $app.data.worldAutoCacheGPS);
     }
+    if (!configRepository.getBool('VRCX_vrBackgroundEnabled')) {
+        $app.data.vrBackgroundEnabled = false;
+        configRepository.setBool('VRCX_vrBackgroundEnabled', $app.data.vrBackgroundEnabled);
+    }
     if (!configRepository.getString('sharedFeedFilters')) {
         var sharedFeedFilters = {
             noty: {
@@ -7876,7 +7883,8 @@ speechSynthesis.getVoices();
             minimalFeed: this.minimalFeed,
             notificationPosition: this.notificationPosition,
             notificationTimeout: this.notificationTimeout,
-            notificationTheme
+            notificationTheme,
+            backgroundEnabled: this.vrBackgroundEnabled
         };
         sharedRepository.setObject('VRConfigVars', VRConfigVars);
         this.updateSharedFeed(true);

html/src/index.pug

@@ -782,6 +782,9 @@ html
                     div.options-container-item
                         span.name(style="min-width:137px") Overlay Button
                         el-switch(v-model="overlaybutton" inactive-text="Grip" active-text="Menu" :disabled="!openVR || !overlayWrist")
+                    div.options-container-item
+                        span.name Background Color
+                        el-switch(v-model="vrBackgroundEnabled" :disabled="!openVR || !overlayWrist")
                     div.options-container-item
                         span.name Minimal Feed Icons
                         el-switch(v-model="minimalFeed" :disabled="!openVR || !overlayWrist")

html/src/vr.pug

@@ -12,7 +12,7 @@ html
         link(rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Sans+KR&display=swap")
         link(rel="stylesheet" href="vr.css")
     body
-        .x-app#x-app(v-if="appType === '1'" class="x-app-type")
+        .x-app#x-app(v-if="appType === '1'" class="x-app-type" :class="{ background: config && config.backgroundEnabled }")
             .x-container(style="flex:1")
                 .x-friend-list(ref="list" style="color:#aaa")
                     template(v-if="config && config.minimalFeed")

html/src/vr.scss

@@ -165,6 +165,7 @@ select,
 button {
     font-family: "Noto Sans JP", "Noto Sans KR", "Meiryo UI", "Malgun Gothic", "Segoe UI", sans-serif;
     line-height: normal;
+    text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
 }
 
 .x-app {
@@ -178,6 +179,9 @@ button {
 
 .x-app-type {
     color: #fff;
+}
+
+.background {
     background: #1f1f1f;
 }