From d517afdfd35a9df92ecc1acc3d38060ac1058c96 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 1 Nov 2023 04:00:58 -0700
Subject: [PATCH] Set fullscreen player text shadow to css var

---
 .../player/components/full-screen-player-image.tsx        | 8 ++++----
 src/renderer/themes/default.scss                          | 1 +
 src/renderer/themes/light.scss                            | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/features/player/components/full-screen-player-image.tsx b/src/renderer/features/player/components/full-screen-player-image.tsx
index 535764a7..ce8bb9e7 100644
--- a/src/renderer/features/player/components/full-screen-player-image.tsx
+++ b/src/renderer/features/player/components/full-screen-player-image.tsx
@@ -255,7 +255,7 @@ export const FullScreenPlayerImage = () => {
                     overflow="hidden"
                     pb="0.5rem"
                     style={{
-                        textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                        textShadow: 'var(--fullscreen-player-text-shadow)',
                     }}
                     w="100%"
                     weight={900}
@@ -269,7 +269,7 @@ export const FullScreenPlayerImage = () => {
                     order={3}
                     overflow="hidden"
                     style={{
-                        textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                        textShadow: 'var(--fullscreen-player-text-shadow)',
                     }}
                     to={generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, {
                         albumId: currentSong?.albumId || '',
@@ -286,7 +286,7 @@ export const FullScreenPlayerImage = () => {
                         align="center"
                         order={3}
                         style={{
-                            textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                            textShadow: 'var(--fullscreen-player-text-shadow)',
                         }}
                         transform="uppercase"
                     >
@@ -304,7 +304,7 @@ export const FullScreenPlayerImage = () => {
                             $link
                             component={Link}
                             style={{
-                                textShadow: '0 0 5px rgb(0 0 0 / 100%)',
+                                textShadow: 'var(--fullscreen-player-text-shadow)',
                             }}
                             to={generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, {
                                 albumArtistId: artist.id,
diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index 3deee5fc..f4af588f 100644
--- a/src/renderer/themes/default.scss
+++ b/src/renderer/themes/default.scss
@@ -116,6 +116,7 @@
     --table-fg: rgb(179, 179, 179);
     --table-row-hover-bg: rgba(100, 100, 100, 20%);
     --table-row-selected-bg: rgba(100, 100, 100, 40%);
+    --fullscreen-player-text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 
     .ag-theme-alpine-dark {
         --ag-font-family: var(--content-font-family);
diff --git a/src/renderer/themes/light.scss b/src/renderer/themes/light.scss
index 63ff6c80..0d769098 100644
--- a/src/renderer/themes/light.scss
+++ b/src/renderer/themes/light.scss
@@ -95,6 +95,7 @@ body[data-theme='defaultLight'] {
     --table-fg: rgb(179, 179, 179);
     --table-row-hover-bg: rgba(150, 150, 150, 20%);
     --table-row-selected-bg: rgba(150, 150, 150, 30%);
+    --fullscreen-player-text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
 
     .ag-theme-alpine-dark {
         --ag-font-family: var(--content-font-family);