Add miniPlayer background to theme

src/components/player/styled.tsx

@@ -124,7 +124,7 @@ export const MiniViewContainer = styled.div<{ display: string }>`
   padding: 8px;
   width: 400px;
   height: ${(props) => props.theme.other.miniPlayer.height};
-  background: ${(props) => props.theme.colors.layout.page.background};
+  background: ${(props) => props.theme.colors.layout.miniPlayer.background};
   border: 1px #000 solid;
   filter: drop-shadow(0px 1px 2px #121316);
   overflow: hidden auto;

src/components/shared/setDefaultSettings.ts

@@ -464,6 +464,7 @@ const setDefaultSettings = (force: boolean) => {
     {
       label: 'Default Dark',
       value: 'defaultDark',
+      type: 'dark',
       fonts: {
         size: {
           page: '14px',
@@ -499,6 +500,9 @@ const setDefaultSettings = (force: boolean) => {
             color: '#FFFFFF',
             background: '#101010',
           },
+          miniPlayer: {
+            background: 'rgba(18,19,24,1)',
+          },
         },
         button: {
           default: {
@@ -624,6 +628,7 @@ const setDefaultSettings = (force: boolean) => {
     {
       label: 'Default Light',
       value: 'defaultLight',
+      type: 'light',
       fonts: {
         size: {
           page: '14px',
@@ -636,7 +641,7 @@ const setDefaultSettings = (force: boolean) => {
         layout: {
           page: {
             color: '#000000',
-            colorSecondary: '#888e94',
+            colorSecondary: '#4c4c4c',
             background: 'linear-gradient(0deg, rgba(255,255,255,1) 64%, rgba(181,181,178,1) 100%)',
           },
           playerBar: {
@@ -659,6 +664,9 @@ const setDefaultSettings = (force: boolean) => {
             color: '#FFFFFF',
             background: '#212121',
           },
+          miniPlayer: {
+            background: 'rgba(255,255,255,1)',
+          },
         },
         button: {
           default: {