Add OLED theme (#658)

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