Add OLED theme (#658)

dist/better-xcloud.pretty.user.js

@@ -84,6 +84,7 @@ var ALL_PREFS = {
   "ui.hideScrollbar",
   "ui.streamMenu.simplify",
   "ui.splashVideo.skip",
+  "ui.theme",
   "version.current",
   "version.lastCheck",
   "version.latest",
@@ -403,6 +404,8 @@ var SUPPORTED_LANGUAGES = {
  "section-recently-added": "Recently added",
  "section-leaving-soon": "Leaving soon",
  "section-genres": "Genres",
+ oled: "OLED",
+ theme: "Theme",
  achievements: "Achievements",
  activate: "Activate",
  activated: "Activated",
@@ -1443,6 +1446,14 @@ class GlobalSettingsStorage extends BaseSettingsStorage {
     }
    }
   },
+  "ui.theme": {
+   label: t("theme"),
+   default: "default",
+   options: {
+    default: t("default"),
+    "dark-oled": t("oled")
+   }
+  },
   "stream.video.combineAudio": {
    requiredVariants: "full",
    label: t("combine-audio-video-streams"),
@@ -7268,6 +7279,7 @@ class SettingsDialog extends NavigationDialog {
   label: t("ui"),
   items: [
    "ui.layout",
+   "ui.theme",
    "ui.imageQuality",
    "ui.gameCard.waitTime.show",
    "ui.controllerStatus.show",
@@ -9313,6 +9325,7 @@ function addCss() {
  if (containsAll(PREF_HIDE_SECTIONS, ["recently-added", "leaving-soon", "genres", "all-games"])) selectorToHide.push("#BodyContent div[class*=GamePassPromoSection-module__container]");
  if (getGlobalPref("block.features").includes("friends")) selectorToHide.push("#gamepass-dialog-root div[class^=AchievementsPreview-module__container] + button[class*=HomeLandingPage-module__button]");
  if (selectorToHide) css += selectorToHide.join(",") + "{ display: none; }";
+ if (getGlobalPref("ui.theme") === "dark-oled") css += 'body[data-theme=dark]{--gds-containerSolidAppBackground:#000 !important}div[class*="ProductDetailPage-module__backgroundImageGradient"]:after{background:radial-gradient(ellipse 100% 100% at 50% 0,rgba(21,21,23,0.549) 0,rgba(26,27,30,0.651) 32%,#000 100%) !important}';
  if (getGlobalPref("ui.reduceAnimations")) css += "div[class*=GameCard-module__gameTitleInnerWrapper],div[class*=GameCard-module__card],div[class*=ScrollArrows-module]{transition:none !important}";
  if (getGlobalPref("ui.systemMenu.hideHandle")) css += "div[class*=Grip-module__container]{visibility:hidden}@media (hover:hover){button[class*=GripHandle-module__container]:hover div[class*=Grip-module__container]{visibility:visible}}button[class*=GripHandle-module__container][aria-expanded=true] div[class*=Grip-module__container]{visibility:visible}button[class*=GripHandle-module__container][aria-expanded=false]{background-color:transparent !important}div[class*=StreamHUD-module__buttonsContainer]{padding:0 !important}";
  if (css += "div[class*=StreamMenu-module__menu]{min-width:100vw !important}", getGlobalPref("ui.streamMenu.simplify")) css += "div[class*=Menu-module__scrollable]{--bxStreamMenuItemSize:80px;--streamMenuItemSize:calc(var(--bxStreamMenuItemSize) + 40px) !important}.bx-badges{top:calc(var(--streamMenuItemSize) - 20px)}body[data-media-type=tv] .bx-badges{top:calc(var(--streamMenuItemSize) - 10px) !important}button[class*=MenuItem-module__container]{min-width:auto !important;min-height:auto !important;width:var(--bxStreamMenuItemSize) !important;height:var(--bxStreamMenuItemSize) !important}div[class*=MenuItem-module__label]{display:none !important}svg[class*=MenuItem-module__icon]{width:36px;height:100% !important;padding:0 !important;margin:0 !important}";

src/enums/pref-keys.ts

@@ -1,5 +1,5 @@
 import type { BaseSettingsStorage } from "@/utils/settings-storages/base-settings-storage";
-import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
+import type { BlockFeature, CodecProfile, DeviceVibrationMode, GameBarPosition, LoadingScreenRocket, NativeMkbMode, StreamPlayerType, StreamResolution, StreamStat, StreamStatPosition, StreamVideoProcessing, TouchControllerMode, TouchControllerStyleCustom, TouchControllerStyleStandard, UiLayout, UiSection, UiTheme, VideoPosition, VideoPowerPreference, VideoRatio } from "./pref-values"
 
 export const enum StorageKey {
     GLOBAL = 'BetterXcloud',
@@ -74,6 +74,7 @@ export const enum GlobalPref {
     UI_HIDE_SYSTEM_MENU_ICON = 'ui.systemMenu.hideHandle',
     UI_REDUCE_ANIMATIONS = 'ui.reduceAnimations',
     UI_IMAGE_QUALITY = 'ui.imageQuality',
+    UI_THEME = 'ui.theme',
 
     AUDIO_MIC_ON_PLAYING = 'audio.mic.onPlaying',
     AUDIO_VOLUME_CONTROL_ENABLED = 'audio.volume.booster.enabled',
@@ -126,6 +127,7 @@ export type GlobalPrefTypeMap = {
     [GlobalPref.UI_SCROLLBAR_HIDE]: boolean;
     [GlobalPref.UI_SIMPLIFY_STREAM_MENU]: boolean;
     [GlobalPref.UI_SKIP_SPLASH_VIDEO]: boolean;
+    [GlobalPref.UI_THEME]: UiTheme;
     [GlobalPref.VERSION_CURRENT]: string;
     [GlobalPref.VERSION_LAST_CHECK]: number;
     [GlobalPref.VERSION_LATEST]: string;
@@ -258,6 +260,7 @@ export const ALL_PREFS: {
         GlobalPref.UI_SCROLLBAR_HIDE,
         GlobalPref.UI_SIMPLIFY_STREAM_MENU,
         GlobalPref.UI_SKIP_SPLASH_VIDEO,
+        GlobalPref.UI_THEME,
         GlobalPref.VERSION_CURRENT,
         GlobalPref.VERSION_LAST_CHECK,
         GlobalPref.VERSION_LATEST,

src/enums/pref-values.ts

@@ -134,3 +134,8 @@ export const enum BlockFeature {
     NOTIFICATIONS_INVITES = 'notifications-invites',
     NOTIFICATIONS_ACHIEVEMENTS = 'notifications-achievements',
 }
+
+export const enum UiTheme {
+    DEFAULT = 'default',
+    DARK_OLED = 'dark-oled',
+}

src/modules/ui/dialog/settings-dialog.ts

@@ -272,6 +272,7 @@ export class SettingsDialog extends NavigationDialog {
         label: t('ui'),
         items: [
             GlobalPref.UI_LAYOUT,
+            GlobalPref.UI_THEME,
             GlobalPref.UI_IMAGE_QUALITY,
             GlobalPref.UI_GAME_CARD_SHOW_WAIT_TIME,
             GlobalPref.UI_CONTROLLER_SHOW_STATUS,

src/utils/css.ts

@@ -1,6 +1,6 @@
 import { CE } from "@utils/html";
 import { compressCss, isLiteVersion, renderStylus } from "@macros/build" with { type: "macro" };
-import { BlockFeature, UiSection } from "@/enums/pref-values";
+import { BlockFeature, UiSection, UiTheme } from "@/enums/pref-values";
 import { GlobalPref } from "@/enums/pref-keys";
 import { getGlobalPref } from "./pref-utils";
 import { containsAll } from "./utils";
@@ -69,6 +69,19 @@ export function addCss() {
         css += selectorToHide.join(',') + '{ display: none; }';
     }
 
+    // Change site's background
+    if (getGlobalPref(GlobalPref.UI_THEME) === UiTheme.DARK_OLED) {
+        css += compressCss(`
+body[data-theme=dark] {
+    --gds-containerSolidAppBackground: #000 !important;
+}
+
+div[class*="ProductDetailPage-module__backgroundImageGradient"]:after {
+    background: radial-gradient(ellipse 100% 100% at 50% 0, #1515178c 0, #1a1b1ea6 32%, #000000 100%) !important;
+}
+`);
+    }
+
     // Reduce animations
     if (getGlobalPref(GlobalPref.UI_REDUCE_ANIMATIONS)) {
         css += compressCss(`

src/utils/settings-storages/global-settings-storage.ts

@@ -8,7 +8,7 @@ import { CE } from "../html";
 import { t, SUPPORTED_LANGUAGES } from "../translation";
 import { UserAgent } from "../user-agent";
 import { BaseSettingsStorage } from "./base-settings-storage";
-import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, NativeMkbMode, UiLayout, UiSection, BlockFeature } from "@/enums/pref-values";
+import { CodecProfile, StreamResolution, TouchControllerMode, TouchControllerStyleStandard, TouchControllerStyleCustom, GameBarPosition, NativeMkbMode, UiLayout, UiSection, BlockFeature, UiTheme } from "@/enums/pref-values";
 import { GhPagesUtils } from "../gh-pages";
 import { BxEventBus } from "../bx-event-bus";
 import { BxIcon } from "../bx-icon";
@@ -210,6 +210,14 @@ export class GlobalSettingsStorage extends BaseSettingsStorage<GlobalPref> {
                 },
             },
         },
+        [GlobalPref.UI_THEME]: {
+            label: t('theme'),
+            default: UiTheme.DEFAULT,
+            options: {
+                [UiTheme.DEFAULT]: t('default'),
+                [UiTheme.DARK_OLED]: t('oled'),
+            },
+        },
 
         [GlobalPref.STREAM_COMBINE_SOURCES]: {
             requiredVariants: 'full',

src/utils/translation.ts

@@ -31,6 +31,8 @@ const Texts = {
     "section-recently-added": "Recently added",
     "section-leaving-soon": "Leaving soon",
     "section-genres": "Genres",
+    "oled": "OLED",
+    "theme": "Theme",
     "achievements": "Achievements",
     "activate": "Activate",
     "activated": "Activated",