Add OLED theme (#658)

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",