feat: configurable themesong accent color lightness

assets/style/fixHDR.css

@@ -1,5 +1,8 @@
 #side-panel ytmusic-player-queue-item[play-button-state="loading"],
 #side-panel ytmusic-player-queue-item[play-button-state="playing"],
 #side-panel ytmusic-player-queue-item[play-button-state="paused"] {
-  background-color: var(--ts-palette-darkmuted-hex, rgba(255, 255, 255, 0.1));
+  background-color: var(
+    --bytm-themesong-bg-accent-col,
+    rgba(255, 255, 255, 0.1)
+  );
 }

assets/translations/README.md

@@ -16,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-| ─ | [`en_US`](./en_US.json) | 287 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `203/287` (70.7%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `287` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `203/287` (70.7%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `203/287` (70.7%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `203/287` (70.7%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `203/287` (70.7%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `203/287` (70.7%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `203/287` (70.7%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 292 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `203/292` (69.5%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `292` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `203/292` (69.5%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `203/292` (69.5%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `203/292` (69.5%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `203/292` (69.5%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `203/292` (69.5%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `203/292` (69.5%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,7 +45,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -102,6 +102,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -125,6 +128,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -136,7 +141,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -193,6 +198,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -216,6 +224,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -227,7 +237,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -284,6 +294,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -307,6 +320,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -318,7 +333,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -375,6 +390,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -398,6 +416,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -409,7 +429,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -466,6 +486,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -489,6 +512,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -500,7 +525,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -557,6 +582,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -580,6 +608,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |
@@ -591,7 +621,7 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 84 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 89 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
@@ -648,6 +678,9 @@ This means to figure out which keys are untranslated, you will need to manually
 | `vote_ratio_blue_gray` | `Blue and gray` |
 | `votes_format_short` | `Shortened` |
 | `votes_format_long` | `Full number` |
+| `color_lightness_darker` | `Darker` |
+| `color_lightness_normal` | `Normal` |
+| `color_lightness_lighter` | `Lighter` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 | `feature_desc_showVotes` | `Show the amount of likes and dislikes on the currently playing song` |
@@ -671,6 +704,8 @@ This means to figure out which keys are untranslated, you will need to manually
 | `feature_helptext_sponsorBlockIntegration` | `If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.` |
 | `feature_desc_themeSongIntegration` | `Fix some styling issues if the ThemeSong extension is installed` |
 | `feature_helptext_themeSongIntegration` | `If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!` |
+| `feature_desc_themeSongLightness` | `How light the theme colors should be that are derived from the current ThemeSong theme` |
+| `feature_helptext_themeSongLightness` | `Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.` |
 | `feature_desc_initTimeout` | `How many seconds to wait for features to initialize before considering them to likely be in an errored state` |
 | `feature_helptext_initTimeout` | `This is the amount of time in milliseconds that the script will wait for features to initialize before considering them to likely be in an errored state.\nThis will not affect the script's behavior in a significant way, but if one of your plugins can't initialize in time, you should try increasing this value.` |
 | `feature_desc_toastDuration` | `For how many seconds custom toast notifications should be shown - 0 to disable them entirely` |

assets/translations/en_US.json

@@ -184,6 +184,10 @@
     "unit_days-1": "day",
     "unit_days-n": "days",
 
+    "color_lightness_darker": "Darker",
+    "color_lightness_normal": "Normal",
+    "color_lightness_lighter": "Lighter",
+
     "plugin_validation_error_no_property": "No property '%1' with type '%2'",
     "plugin_validation_error_invalid_property-1": "Property '%1' with value '%2' is invalid. Example value: %3",
     "plugin_validation_error_invalid_property-n": "Property '%1' with value '%2' is invalid. Example values: %3",
@@ -290,6 +294,8 @@
     "feature_helptext_sponsorBlockIntegration": "If you have the SponsorBlock extension installed, this feature will make some fixes to the layout of the site to prevent issues that might occur.\n\nThis feature will have no effect if the extension is not installed and can be left activated in that case.",
     "feature_desc_themeSongIntegration": "Fix some styling issues if the ThemeSong extension is installed",
     "feature_helptext_themeSongIntegration": "If the ThemeSong extension is installed but this feature is turned off (or vice versa), you might notice broken styling on the site.\n\nPlease always make sure this feature reflects whether the extension is installed or not!",
+    "feature_desc_themeSongLightness": "How light the theme colors should be that are derived from the current ThemeSong theme",
+    "feature_helptext_themeSongLightness": "Depending on the settings you chose for the ThemeSong extension, this feature allows you to adjust the lightness of the colors that are derived from the current theme.\n\nThis feature will have no effect if the ThemeSong extension is not installed.",
 
     "feature_desc_locale": "Language",
     "feature_desc_localeFallback": "Use English as a fallback for missing translations (disable if you are contributing translations)",

changelog.md

@@ -7,7 +7,8 @@
   - Added an experimental feature to like songs and videos of certain channels (on both sites) automatically.  
     Since this feature is still experimental, to be able to turn it on, you first need to enable advanced mode in the settings.  
     The button to toggle auto-liking will only show up on channel pages until the next update. Please report any issues you encounter.
-- Added the ability to show the approximate amount of likes and dislikes on the currently playing song (powered by [ReturnYoutubeDislike](https://returnyoutubedislike.com/))
+  - Added the ability to show the approximate amount of likes and dislikes on the currently playing song (powered by [ReturnYoutubeDislike](https://returnyoutubedislike.com/))
+  - Added support for themes set by the [ThemeSong](https://github.com/KristofferTroncoso/ThemeSong) extension
 - **Changes:**
   - Made song/video time remembering enabled by default on YT too
   - Made reset button in config menu a feature of type `button`
@@ -27,6 +28,7 @@
     - Placement of list/queue buttons
   - Removed broken feature "remove upgrade tab"
   - Removed unnecessary experimental feature "advancedLyricsFilter" as the API's native search improved a lot
+  - Made all integration features configurable and gave them their own config category
 - **Fixes:**
   - Adjusted script to UI redesign of playlists
   - Fixed song list buttons disappearing when dragging the row around

dist/BetterYTM.css

@@ -1987,7 +1987,7 @@ body.bytm-dom-ytm
   background: linear-gradient(
     90deg,
     rgba(0, 0, 0, 0) 0%,
-    var(--ts-palette-darkmuted-hex, #1d1d1d) 15%
+    var(--bytm-themesong-bg-accent-col, #1d1d1d) 15%
   );
 }
 

src/config.ts

@@ -95,8 +95,8 @@ export const migrations: DataMigrationsDict = {
 
   // 6 -> 7 (v2.2)
   7: (oldData: FeatureConfig) => useDefaultConfig(oldData, [
-    "showToastOnGenericError", "themeSongIntegration",
-    "sponsorBlockIntegration",
+    "showToastOnGenericError", "sponsorBlockIntegration",
+    "themeSongIntegration", "themeSongLightness",
   ]),
 } as const satisfies DataMigrationsDict;
 

src/features/index.ts

@@ -2,7 +2,7 @@ import { getLocale, getPreferredLocale, getResourceUrl, resourceAsString, t, tp
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache.js";
 import { doVersionCheck } from "./versionCheck.js";
 import { getFeature, promptResetConfig } from "../config.js";
-import { FeatureInfo, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
+import { FeatureInfo, type ColorLightness, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
 import { emitSiteEvent } from "../siteEvents.js";
 import langMapping from "../../assets/locales.json" with { type: "json" };
 import { getAutoLikeDialog } from "../dialogs/index.js";
@@ -95,6 +95,11 @@ const options = {
       }];
     }, [] as SelectOption[])
     .sort((a, b) => a.label.localeCompare(b.label)),
+  colorLightness: (): SelectOption<ColorLightness>[] => [
+    { value: "darker", label: t("color_lightness_darker") },
+    { value: "normal", label: t("color_lightness_normal") },
+    { value: "lighter", label: t("color_lightness_lighter") },
+  ],
 };
 
 /** Renders a long number with a thousands separator */
@@ -654,6 +659,13 @@ export const featInfo = {
     default: false,
     textAdornment: adornments.reloadRequired,
   },
+  themeSongLightness: {
+    type: "select",
+    category: "integrations",
+    options: options.colorLightness,
+    default: "darker",
+    textAdornment: adornments.reloadRequired,
+  },
 
   //#region general
   locale: {

src/features/integrations.ts

@@ -41,3 +41,20 @@ export async function fixPlayerPageTheming() {
     error("Failed to fix BetterYTM player page theming:", err);
   }
 }
+
+/** Sets the lightness of the theme color used by BYTM according to the configured lightness value */
+export async function setThemeSongLightness() {
+  try {
+    const cssVarName = (() => {
+      switch(getFeature("themeSongLightness")) {
+      case "darker": return "--ts-palette-darkmuted-hex";
+      case "normal": return "--ts-palette-muted-hex";
+      case "lighter": return "--ts-palette-lightmuted-hex";
+      };
+    })();
+    document.documentElement.style.setProperty("--bytm-themesong-bg-accent-col", `var(${cssVarName})`);
+  }
+  catch(err) {
+    error("Failed to set ThemeSong integration color lightness:", err);
+  }
+}

src/features/songLists.css

@@ -22,7 +22,7 @@
   background: linear-gradient(
     90deg,
     rgba(0, 0, 0, 0) 0%,
-    var(--ts-palette-darkmuted-hex, #1d1d1d) 15%
+    var(--bytm-themesong-bg-accent-col, #1d1d1d) 15%
   );
 }
 

src/index.ts

@@ -29,7 +29,7 @@ import {
   addPlayerBarLyricsBtn, initLyricsCache,
   // integrations
   disableDarkReader, fixSponsorBlock,
-  fixPlayerPageTheming,
+  fixPlayerPageTheming, setThemeSongLightness,
   // general
   initVersionCheck,
   // menu
@@ -210,6 +210,8 @@ async function onDomLoad() {
 
       if(!feats.themeSongIntegration)
         ftInit.push(["themeSongIntegration", fixPlayerPageTheming()]);
+      else
+        ftInit.push(["themeSongIntegration", setThemeSongLightness()]);
     }
 
     //#region (ytm+yt) cfg menu

src/types.ts

@@ -99,6 +99,8 @@ export type VideoVotesObj = {
 
 export type NumberNotation = "short" | "long";
 
+export type ColorLightness = "darker" | "normal" | "lighter";
+
 //#region global
 
 /** All properties of the `unsafeWindow.BYTM` object (also called "plugin interface") */
@@ -576,6 +578,8 @@ export interface FeatureConfig {
   sponsorBlockIntegration: boolean;
   /** Whether to adjust styles so they look better when using the ThemeSong extension */
   themeSongIntegration: boolean;
+  /** Lightness of the color used when ThemeSong is enabled */
+  themeSongLightness: ColorLightness;
 
   //#region misc
   /** The locale to use for translations */