diff --git a/src/common/theme/createThemes.js b/src/common/theme/createThemes.js
index 860635e5..fa6ee027 100644
--- a/src/common/theme/createThemes.js
+++ b/src/common/theme/createThemes.js
@@ -11,6 +11,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(77, 175, 124)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -33,6 +34,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(52, 152, 219)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -55,6 +57,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(77, 131, 175)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-600)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -77,6 +80,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(245, 171, 53)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -99,6 +103,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(214, 69, 65)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -121,6 +126,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(241, 130, 141)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -143,6 +149,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(155, 89, 182)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -165,6 +172,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(108, 122, 137)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -187,6 +195,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(51, 110, 123)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -209,6 +218,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(79, 98, 208)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'var(--color-primary-light-600-alpha-700)',
       '--color-main-background': 'rgba(255, 255, 255, 1)',
       '--color-nav-font': 'var(--color-primary)',
@@ -231,6 +241,7 @@ const defaultThemes = [
     isDark: true,
     config: {
       primary: 'rgb(150, 150, 150)',
+      font: 'rgb(229, 229, 229)',
       '--color-app-background': 'rgba(0, 0, 0, 0)',
       '--color-main-background': 'rgba(19, 19, 19, 0.9)',
       '--color-nav-font': 'var(--color-primary)',
@@ -253,6 +264,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(74, 55, 82)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'rgba(255, 255, 255, 0)',
       '--color-main-background': 'rgba(255, 255, 255, 0.9)',
       '--color-nav-font': 'var(--color-primary-light-600)',
@@ -276,6 +288,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(87, 144, 167)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'rgba(255, 255, 255, 0.15)',
       '--color-main-background': 'rgba(255, 255, 255, 0.8)',
       '--color-nav-font': 'var(--color-primary)',
@@ -298,6 +311,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgba(47, 47, 47, 1)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'rgba(255, 255, 255, 0)',
       '--color-main-background': 'rgba(255, 255, 255, 0.8)',
       '--color-nav-font': 'var(--color-primary)',
@@ -321,6 +335,7 @@ const defaultThemes = [
     isDark: false,
     config: {
       primary: 'rgb(192, 57, 43)',
+      font: 'rgb(33, 33, 33)',
       '--color-app-background': 'rgba(255, 255, 255, 0.15)',
       '--color-main-background': 'rgba(255, 255, 255, 0.8)',
       '--color-nav-font': 'var(--color-primary)',
@@ -339,12 +354,12 @@ const defaultThemes = [
   },
 ]
 
-const themes = defaultThemes.map(({ config: { primary, ...extInfo }, ...themeInfo }) => {
+const themes = defaultThemes.map(({ config: { primary, font, ...extInfo }, ...themeInfo }) => {
   return {
     ...themeInfo,
     isCustom: false,
     config: {
-      themeColors: createThemeColors(primary, themeInfo.isDark),
+      themeColors: createThemeColors(primary, font, themeInfo.isDark),
       extInfo,
     },
   }
diff --git a/src/common/theme/index.json b/src/common/theme/index.json
index 505324e3..1a63ff11 100644
--- a/src/common/theme/index.json
+++ b/src/common/theme/index.json
@@ -216,7 +216,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(77, 175, 124)"
+        "--color-theme": "rgb(77, 175, 124)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -451,7 +472,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(52, 152, 219)"
+        "--color-theme": "rgb(52, 152, 219)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -686,7 +728,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(77, 131, 175)"
+        "--color-theme": "rgb(77, 131, 175)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-600)",
@@ -921,7 +984,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(245, 171, 53)"
+        "--color-theme": "rgb(245, 171, 53)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1156,7 +1240,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(214, 69, 65)"
+        "--color-theme": "rgb(214, 69, 65)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1391,7 +1496,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(241, 130, 141)"
+        "--color-theme": "rgb(241, 130, 141)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1626,7 +1752,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(155, 89, 182)"
+        "--color-theme": "rgb(155, 89, 182)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1861,7 +2008,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(108, 122, 137)"
+        "--color-theme": "rgb(108, 122, 137)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2096,7 +2264,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(51, 110, 123)"
+        "--color-theme": "rgb(51, 110, 123)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2331,7 +2520,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(79, 98, 208)"
+        "--color-theme": "rgb(79, 98, 208)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2566,7 +2776,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(47, 47, 47, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(47, 47, 47, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(47, 47, 47, 0.10)",
-        "--color-theme": "rgb(59,59,59)"
+        "--color-theme": "rgb(59,59,59)",
+        "--color-1000": "rgb(229, 229, 229)",
+        "--color-950": "rgb(218,218,218)",
+        "--color-900": "rgb(207,207,207)",
+        "--color-850": "rgb(197,197,197)",
+        "--color-800": "rgb(187,187,187)",
+        "--color-750": "rgb(178,178,178)",
+        "--color-700": "rgb(169,169,169)",
+        "--color-650": "rgb(161,161,161)",
+        "--color-600": "rgb(153,153,153)",
+        "--color-550": "rgb(145,145,145)",
+        "--color-500": "rgb(138,138,138)",
+        "--color-450": "rgb(131,131,131)",
+        "--color-400": "rgb(124,124,124)",
+        "--color-350": "rgb(118,118,118)",
+        "--color-300": "rgb(112,112,112)",
+        "--color-250": "rgb(106,106,106)",
+        "--color-200": "rgb(101,101,101)",
+        "--color-150": "rgb(96,96,96)",
+        "--color-100": "rgb(91,91,91)",
+        "--color-050": "rgb(86,86,86)",
+        "--color-000": "rgb(82,82,82)"
       },
       "extInfo": {
         "--color-app-background": "rgba(0, 0, 0, 0)",
@@ -2801,7 +3032,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(74, 55, 82)"
+        "--color-theme": "rgb(74, 55, 82)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "rgba(255, 255, 255, 0)",
@@ -3036,7 +3288,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(87, 144, 167)"
+        "--color-theme": "rgb(87, 144, 167)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "rgba(255, 255, 255, 0.15)",
@@ -3271,7 +3544,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgba(47, 47, 47, 1)"
+        "--color-theme": "rgba(47, 47, 47, 1)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "rgba(255, 255, 255, 0)",
@@ -3506,7 +3800,28 @@
         "--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
         "--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
         "--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
-        "--color-theme": "rgb(192, 57, 43)"
+        "--color-theme": "rgb(192, 57, 43)",
+        "--color-1000": "rgb(33, 33, 33)",
+        "--color-950": "rgb(44,44,44)",
+        "--color-900": "rgb(55,55,55)",
+        "--color-850": "rgb(66,66,66)",
+        "--color-800": "rgb(77,77,77)",
+        "--color-750": "rgb(89,89,89)",
+        "--color-700": "rgb(100,100,100)",
+        "--color-650": "rgb(111,111,111)",
+        "--color-600": "rgb(122,122,122)",
+        "--color-550": "rgb(133,133,133)",
+        "--color-500": "rgb(144,144,144)",
+        "--color-450": "rgb(155,155,155)",
+        "--color-400": "rgb(166,166,166)",
+        "--color-350": "rgb(177,177,177)",
+        "--color-300": "rgb(188,188,188)",
+        "--color-250": "rgb(200,200,200)",
+        "--color-200": "rgb(211,211,211)",
+        "--color-150": "rgb(222,222,222)",
+        "--color-100": "rgb(233,233,233)",
+        "--color-050": "rgb(244,244,244)",
+        "--color-000": "rgb(255,255,255)"
       },
       "extInfo": {
         "--color-app-background": "rgba(255, 255, 255, 0.15)",
diff --git a/src/common/theme/utils.js b/src/common/theme/utils.js
index 19e13cc7..8537a5b3 100644
--- a/src/common/theme/utils.js
+++ b/src/common/theme/utils.js
@@ -1,6 +1,6 @@
 const { RGB_Linear_Shade, RGB_Alpha_Shade } = require('./colorUtils')
 
-exports.createThemeColors = (rgbaColor, isDark) => {
+exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark) => {
   const colors = {
     '--color-primary': rgbaColor,
   }
@@ -30,13 +30,46 @@ exports.createThemeColors = (rgbaColor, isDark) => {
 
   colors['--color-theme'] = isDark ? colors['--color-primary-light-900'] : rgbaColor
 
+  return { ...colors, ...createFontColors(fontRgbaColor, isDark) }
+}
+
+const createFontColors = (rgbaColor, isDark) => {
+  // rgb(238, 238, 238)
+  // let prec = 'rgb(255, 255, 255)'
+  if (rgbaColor == null) rgbaColor = isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'
+  if (isDark) return createFontDarkColors(rgbaColor)
+
+  let colors = {
+    '--color-1000': rgbaColor,
+  }
+  let step = isDark ? -0.05 : 0.05
+  for (let i = 1; i < 21; i += 1) {
+    colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = RGB_Linear_Shade(step * i, rgbaColor)
+  }
+  // console.log(colors)
   return colors
 }
 
-// rgb(238, 238, 238)
-// let prec = 'rgb(255, 255, 255)'
-// let colors = [prec]
-// for (let j = 1; j < 11; j += 1) {
-//   colors.push(prec = RGB_Linear_Shade(-0.15, prec))
-// }
-// console.log(colors)
+const createFontDarkColors = (rgbaColor) => {
+  // rgb(238, 238, 238)
+  // let prec = 'rgb(255, 255, 255)'
+
+  let colors = {
+    '--color-1000': rgbaColor,
+  }
+  const step = -0.05
+  let preColor = rgbaColor
+  for (let i = 1; i < 21; i += 1) {
+    preColor = RGB_Linear_Shade(step, preColor)
+    colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = preColor
+  }
+
+  // console.log(colors)
+  return colors
+}
+
+// console.log(createFontColors('rgb(33, 33, 33)', false))
+// console.log(createFontColors('rgb(255, 255, 255)', true))
+
+// console.log(createFontDarkColors('rgb(255, 255, 255)'))
+
diff --git a/src/common/types/theme.d.ts b/src/common/types/theme.d.ts
index 230e67e9..8de2c638 100644
--- a/src/common/types/theme.d.ts
+++ b/src/common/types/theme.d.ts
@@ -1,17 +1,29 @@
 declare namespace LX {
 
   interface ThemeColors {
-    // '--color-000': string
-    // '--color-050': string
-    // '--color-100': string
-    // '--color-200': string
-    // '--color-300': string
-    // '--color-400': string
-    // '--color-500': string
-    // '--color-600': string
-    // '--color-700': string
-    // '--color-800': string
-    // '--color-900': string
+    '--color-000': string
+    '--color-050': string
+    '--color-100': string
+    '--color-150': string
+    '--color-200': string
+    '--color-250': string
+    '--color-300': string
+    '--color-350': string
+    '--color-400': string
+    '--color-450': string
+    '--color-500': string
+    '--color-550': string
+    '--color-600': string
+    '--color-650': string
+    '--color-700': string
+    '--color-750': string
+    '--color-800': string
+    '--color-850': string
+    '--color-900': string
+    '--color-950': string
+    '--color-1000': string
+
+
     '--color-theme': string
 
     '--color-primary': string
diff --git a/src/lang/en-us.json b/src/lang/en-us.json
index c2be004b..8758c3f1 100644
--- a/src/lang/en-us.json
+++ b/src/lang/en-us.json
@@ -532,6 +532,7 @@
   "theme_edit_modal__control_btn": "Left control button color",
   "theme_edit_modal__copy": "Copy theme",
   "theme_edit_modal__dark": "Dark theme",
+  "theme_edit_modal__font": "Font color",
   "theme_edit_modal__hide_btn": "Hide play details page",
   "theme_edit_modal__main_bg": "Content area background color",
   "theme_edit_modal__min_btn": "Minimize",
diff --git a/src/lang/zh-cn.json b/src/lang/zh-cn.json
index 07582fdb..331bb2bb 100644
--- a/src/lang/zh-cn.json
+++ b/src/lang/zh-cn.json
@@ -534,6 +534,7 @@
   "theme_edit_modal__control_btn": "左侧控制按钮颜色",
   "theme_edit_modal__copy": "复制主题",
   "theme_edit_modal__dark": "暗色主题",
+  "theme_edit_modal__font": "字体颜色",
   "theme_edit_modal__hide_btn": "隐藏播放详情页",
   "theme_edit_modal__main_bg": "内容区域背景颜色",
   "theme_edit_modal__min_btn": "最小化",
diff --git a/src/lang/zh-tw.json b/src/lang/zh-tw.json
index 1b1e18a9..b61fe097 100644
--- a/src/lang/zh-tw.json
+++ b/src/lang/zh-tw.json
@@ -532,6 +532,7 @@
   "theme_edit_modal__control_btn": "左側控制按鈕顏色",
   "theme_edit_modal__copy": "複製主題",
   "theme_edit_modal__dark": "暗色主題",
+  "theme_edit_modal__font": "字體顏色",
   "theme_edit_modal__hide_btn": "隱藏播放詳情頁",
   "theme_edit_modal__main_bg": "內容區域背景顏色",
   "theme_edit_modal__min_btn": "最小化",
diff --git a/src/main/modules/sync/event/event.js b/src/main/modules/sync/event/event.js
deleted file mode 100644
index ade680a9..00000000
--- a/src/main/modules/sync/event/event.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const { EventEmitter } = require('events')
-const SYNC_EVENT_NAME = require('./name')
-
-class Sync extends EventEmitter {
-  status(status) {
-    this.emit(SYNC_EVENT_NAME.status, status)
-  }
-
-  sync_list(data) {
-    this.emit(SYNC_EVENT_NAME.sync_list, data)
-  }
-
-  sync_handle_list(data) {
-    this.emit(SYNC_EVENT_NAME.sync_handle_list, data)
-  }
-
-  action_list(data) {
-    this.emit(SYNC_EVENT_NAME.sync_action_list, data)
-  }
-}
-
-module.exports = Sync
-
diff --git a/src/main/modules/sync/event/name.js b/src/main/modules/sync/event/name.js
deleted file mode 100644
index 30abdf51..00000000
--- a/src/main/modules/sync/event/name.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  sync_action_list: 'sync_action_list',
-  sync_list: 'sync_list',
-  sync_handle_list: 'sync_handle_list',
-  status: 'status',
-}
diff --git a/src/main/modules/sync/modules/list.ts b/src/main/modules/sync/modules/list.ts
index 01bcaeed..f88859b6 100644
--- a/src/main/modules/sync/modules/list.ts
+++ b/src/main/modules/sync/modules/list.ts
@@ -9,7 +9,7 @@ let removeListener: (() => void) | null
 type listAction = 'list:action'
 
 const handleListAction = ({ action, data }: LX.Sync.ActionList) => {
-  // console.log(action, data)
+  // console.log('handleListAction', action)
 
   switch (action) {
     case 'list_data_overwrite':
@@ -144,11 +144,14 @@ const broadcast = async(action: listAction, data: any, excludeIds: string[] = []
 }
 
 export const sendListAction = async(action: LX.Sync.ActionList) => {
+  console.log('sendListAction', action.action)
   // io.sockets
   return await broadcast('list:action', JSON.stringify(action))
 }
 
 export const registerListHandler = (_io: Server, socket: LX.Sync.Socket) => {
+  unregisterListHandler()
+
   io = _io
   socket.on('list:action', msg => {
     // console.log(msg)
diff --git a/src/main/modules/sync/server/auth.ts b/src/main/modules/sync/server/auth.ts
index 9f1e0d6c..5f4d8fce 100644
--- a/src/main/modules/sync/server/auth.ts
+++ b/src/main/modules/sync/server/auth.ts
@@ -1,4 +1,5 @@
 import http from 'http'
+import { SYNC_CODE } from './config'
 import {
   aesEncrypt,
   aesDecrypt,
@@ -6,19 +7,17 @@ import {
   getClientKeyInfo,
   setClientKeyInfo,
 } from './utils'
-
-const authMsg = 'lx-music auth::'
-const helloMsg = 'Hello~::^-^::~v2~'
+import querystring from 'node:querystring'
 
 const requestIps = new Map<string, number>()
 
 export const authCode = async(req: http.IncomingMessage, res: http.ServerResponse, authCode: string) => {
   let code = 401
-  let msg = 'Forbidden'
+  let msg: string = SYNC_CODE.msgAuthFailed
 
   let ip = req.socket.remoteAddress
   // console.log(req.headers)
-  if (typeof req.headers.m == 'string' && ip && (requestIps.get(ip) ?? 0) > 10) {
+  if (typeof req.headers.m == 'string' && ip && (requestIps.get(ip) ?? 0) < 10) {
     if (req.headers.m) {
       label:
       if (req.headers.i) {
@@ -27,36 +26,36 @@ export const authCode = async(req: http.IncomingMessage, res: http.ServerRespons
         if (!keyInfo) break label
         let text
         try {
-          text = aesDecrypt(req.headers.m, keyInfo.key, keyInfo.iv)
+          text = aesDecrypt(req.headers.m, keyInfo.key)
         } catch (err) {
           break label
         }
-        console.log(text)
-        if (text.startsWith(authMsg)) {
+        // console.log(text)
+        if (text.startsWith(SYNC_CODE.authMsg)) {
           code = 200
-          const deviceName = text.replace(authMsg, '') || 'Unknown'
+          const deviceName = text.replace(SYNC_CODE.authMsg, '') || 'Unknown'
           if (deviceName != keyInfo.deviceName) {
             keyInfo.deviceName = deviceName
             setClientKeyInfo(keyInfo)
           }
-          msg = aesEncrypt(helloMsg, keyInfo.key, keyInfo.iv)
+          msg = aesEncrypt(SYNC_CODE.helloMsg, keyInfo.key)
         }
       } else {
         let key = ''.padStart(16, Buffer.from(authCode).toString('hex'))
-        const iv = Buffer.from(key.split('').reverse().join('')).toString('base64')
+        // const iv = Buffer.from(key.split('').reverse().join('')).toString('base64')
         key = Buffer.from(key).toString('base64')
-        // console.log(authCode, key, iv)
+        // console.log(req.headers.m, authCode, key)
         let text
         try {
-          text = aesDecrypt(req.headers.m, key, iv)
+          text = aesDecrypt(req.headers.m, key)
         } catch (err) {
           break label
         }
-        console.log(text)
-        if (text.startsWith(authMsg)) {
+        // console.log(text)
+        if (text.startsWith(SYNC_CODE.authMsg)) {
           code = 200
-          const deviceName = text.replace(authMsg, '') || 'Unknown'
-          msg = aesEncrypt(JSON.stringify(createClientKeyInfo(deviceName)), key, iv)
+          const deviceName = text.replace(SYNC_CODE.authMsg, '') || 'Unknown'
+          msg = aesEncrypt(JSON.stringify(createClientKeyInfo(deviceName)), key)
         }
       }
     }
@@ -72,20 +71,21 @@ export const authCode = async(req: http.IncomingMessage, res: http.ServerRespons
 }
 
 export const authConnect = async(req: http.IncomingMessage) => {
-  const url = new URL(req.url as string)
-  const i = url.searchParams.get('i')
-  const t = url.searchParams.get('t')
+  const query = querystring.parse((req.url as string).split('?')[1])
+  const i = query.i
+  const t = query.t
   label:
-  if (i && t) {
+  if (typeof i == 'string' && typeof t == 'string') {
     const keyInfo = getClientKeyInfo(i)
     if (!keyInfo) break label
     let text
     try {
-      text = aesDecrypt(t, keyInfo.key, keyInfo.iv)
+      text = aesDecrypt(t, keyInfo.key)
     } catch (err) {
       break label
     }
-    if (text == 'lx-music connect') return
+    // console.log(text)
+    if (text == SYNC_CODE.msgConnect) return
   }
   throw new Error('failed')
 }
diff --git a/src/main/modules/sync/server/config.ts b/src/main/modules/sync/server/config.ts
new file mode 100644
index 00000000..84342dc9
--- /dev/null
+++ b/src/main/modules/sync/server/config.ts
@@ -0,0 +1,7 @@
+export const SYNC_CODE = {
+  helloMsg: 'Hello~::^-^::~v2~',
+  idPrefix: 'OjppZDo6',
+  authMsg: 'lx-music auth::',
+  msgAuthFailed: 'Auth failed',
+  msgConnect: 'lx-music connect',
+} as const
diff --git a/src/main/modules/sync/server/server.ts b/src/main/modules/sync/server/server.ts
index 6c6bcd19..eb5e20e8 100644
--- a/src/main/modules/sync/server/server.ts
+++ b/src/main/modules/sync/server/server.ts
@@ -7,6 +7,7 @@ import { getAddress, getServerId, generateCode as handleGenerateCode, getClientK
 import { syncList, removeSnapshot } from './syncList'
 import { log } from '@common/utils'
 import { sendStatus } from '@main/modules/winMain'
+import { SYNC_CODE } from './config'
 
 
 let status: LX.Sync.Status = {
@@ -44,6 +45,14 @@ const handleConnection = (io: Server, socket: LX.Sync.Socket) => {
   }
 }
 
+const handleUnconnection = () => {
+  console.log('unconnection')
+  // console.log(socket.handshake.query)
+  for (const module of Object.values(modules)) {
+    module.unregisterListHandler()
+  }
+}
+
 const authConnection = (req: http.IncomingMessage, callback: (err: string | null | undefined, success: boolean) => void) => {
   // console.log(req.headers)
   // // console.log(req.auth)
@@ -66,11 +75,11 @@ const handleStartServer = async(port = 9527) => await new Promise((resolve, reje
     switch (req.url) {
       case '/hello':
         code = 200
-        msg = 'Hello~::^-^::~v2'
+        msg = SYNC_CODE.helloMsg
         break
       case '/id':
         code = 200
-        msg = 'OjppZDo6' + getServerId()
+        msg = SYNC_CODE.idPrefix + getServerId()
         break
       case '/ah':
         void authCode(req, res, status.code)
@@ -103,6 +112,7 @@ const handleStartServer = async(port = 9527) => await new Promise((resolve, reje
       console.log('disconnect', reason)
       status.devices.splice(status.devices.findIndex(k => k.clientId == keyInfo?.clientId), 1)
       sendStatus(status)
+      if (!status.devices.length) handleUnconnection()
     })
     if (typeof socket.handshake.query.i != 'string') return socket.disconnect(true)
     const keyInfo = getClientKeyInfo(socket.handshake.query.i)
diff --git a/src/main/modules/sync/server/syncList.ts b/src/main/modules/sync/server/syncList.ts
index 1633c6e3..6757b932 100644
--- a/src/main/modules/sync/server/syncList.ts
+++ b/src/main/modules/sync/server/syncList.ts
@@ -267,7 +267,7 @@ const handleSyncList = async(socket: LX.Sync.Socket): Promise<LX.Sync.ListData |
     if (remoteListData.defaultList.length || remoteListData.loveList.length || remoteListData.userList.length) {
       const mergedList = await handleMergeListData(socket)
       console.log('handleMergeListData', 'mergedList')
-      console.log(mergedList)
+      // console.log(mergedList)
       if (!mergedList) return null
       listData.defaultList = mergedList.defaultList
       listData.loveList = mergedList.loveList
diff --git a/src/main/modules/sync/server/utils.ts b/src/main/modules/sync/server/utils.ts
index b2429bb0..144ddf92 100644
--- a/src/main/modules/sync/server/utils.ts
+++ b/src/main/modules/sync/server/utils.ts
@@ -5,9 +5,7 @@ import getStore from '@main/utils/store'
 
 const STORE_NAME = 'sync'
 
-interface KeyInfos {
-  [key: string]: LX.Sync.KeyInfo
-}
+type KeyInfos = Record<string, LX.Sync.KeyInfo>
 
 export const getAddress = (): string[] => {
   const nets = networkInterfaces()
@@ -71,13 +69,13 @@ export const generateCode = (): string => {
   return Math.random().toString().substring(2, 8)
 }
 
-export const aesEncrypt = (buffer: string | Buffer, key: string, iv: string): string => {
-  const cipher = createCipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
+export const aesEncrypt = (buffer: string | Buffer, key: string): string => {
+  const cipher = createCipheriv('aes-128-ecb', Buffer.from(key, 'base64'), '')
   return Buffer.concat([cipher.update(buffer), cipher.final()]).toString('base64')
 }
 
-export const aesDecrypt = (text: string, key: string, iv: string): string => {
-  const decipher = createDecipheriv('aes-128-cbc', Buffer.from(key, 'base64'), Buffer.from(iv, 'base64'))
+export const aesDecrypt = (text: string, key: string): string => {
+  const decipher = createDecipheriv('aes-128-ecb', Buffer.from(key, 'base64'), '')
   return Buffer.concat([decipher.update(Buffer.from(text, 'base64')), decipher.final()]).toString()
 }
 
diff --git a/src/main/utils/index.ts b/src/main/utils/index.ts
index df96e98f..922680e3 100644
--- a/src/main/utils/index.ts
+++ b/src/main/utils/index.ts
@@ -5,7 +5,6 @@ import { STORE_NAMES, URL_SCHEME_RXP } from '@common/constants'
 import defaultSetting from '@common/defaultSetting'
 import defaultHotKey from '@common/defaultHotKey'
 import { migrateDataJson, migrateHotKey, migrateUserApi, parseDataFile } from './migrate'
-import { commonColorNames, commonLightColorValues, commonDarkColorValues } from '@common/config'
 import { nativeTheme } from 'electron'
 import { joinPath } from '@common/utils/nodejs'
 import themes from '@common/theme/index.json'
@@ -263,11 +262,6 @@ export const getTheme = () => {
     ...theme.config.extInfo,
   }
 
-  const vals = theme.isDark ? commonDarkColorValues : commonLightColorValues
-  for (let i = commonColorNames.length; i--;) {
-    colors[commonColorNames[i]] = vals[i]
-  }
-
   return {
     shouldUseDarkColors,
     theme: {
diff --git a/src/renderer/assets/styles/index.less b/src/renderer/assets/styles/index.less
index 6bf1a0ca..7935bd21 100644
--- a/src/renderer/assets/styles/index.less
+++ b/src/renderer/assets/styles/index.less
@@ -231,17 +231,39 @@
   // --color-100: #616161;
   // --color-050: #424242;
   // --color-000: #212121;
-  --color-000: #fff;
-  --color-050: #fafafa;
-  --color-100: #f5f5f5;
-  --color-200: #eeeeee;
-  --color-300: #e0e0e0;
-  --color-400: #bdbdbd;
-  --color-500: #9e9e9e;
-  --color-600: #757575;
-  --color-700: #616161;
-  --color-800: #424242;
-  --color-900: #212121;
+  // --color-000: #fff;
+  // --color-050: #fafafa;
+  // --color-100: #f5f5f5;
+  // --color-200: #eeeeee;
+  // --color-300: #e0e0e0;
+  // --color-400: #bdbdbd;
+  // --color-500: #9e9e9e;
+  // --color-600: #757575;
+  // --color-700: #616161;
+  // --color-800: #424242;
+  // --color-900: #212121;
+
+  --color-000: rgb(255,255,255);
+  --color-050: rgb(244,244,244);
+  --color-100: rgb(233,233,233);
+  --color-150: rgb(222,222,222);
+  --color-200: rgb(211,211,211);
+  --color-250: rgb(200,200,200);
+  --color-300: rgb(188,188,188);
+  --color-350: rgb(177,177,177);
+  --color-400: rgb(166,166,166);
+  --color-450: rgb(155,155,155);
+  --color-500: rgb(144,144,144);
+  --color-550: rgb(133,133,133);
+  --color-600: rgb(122,122,122);
+  --color-650: rgb(111,111,111);
+  --color-700: rgb(100,100,100);
+  --color-750: rgb(89,89,89);
+  --color-800: rgb(77,77,77);
+  --color-850: rgb(66,66,66);
+  --color-900: rgb(55,55,55);
+  --color-950: rgb(44,44,44);
+  --color-1000: rgb(33, 33, 33);
 
   --color-app-background: var(--color-primary-light-600-alpha-600);
   --color-main-background: rgba(255, 255, 255, 0.9);
@@ -257,8 +279,8 @@
   --color-badge-secondary: #4baed5;
   --color-badge-tertiary: #e7aa36;
 
-  --color-font: var(--color-700);
-  --color-font-label: var(--color-200);
+  --color-font: var(--color-850);
+  --color-font-label: var(--color-450);
   --color-primary-font: var(--color-primary);
   --color-primary-font-hover: var(--color-primary-alpha-300);
   --color-primary-font-active: var(--color-primary-dark-100-alpha-200);
diff --git a/src/renderer/components/layout/PlayBar/FullWidthProgress.vue b/src/renderer/components/layout/PlayBar/FullWidthProgress.vue
index fb570ebc..190648a5 100644
--- a/src/renderer/components/layout/PlayBar/FullWidthProgress.vue
+++ b/src/renderer/components/layout/PlayBar/FullWidthProgress.vue
@@ -267,7 +267,7 @@ export default {
 
 .timeContent {
   flex: none;
-  color: var(--color-300);
+  color: var(--color-550);
   font-size: 13px;
   padding-left: 10px;
 }
diff --git a/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue b/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
index 157e99e2..1a2cf037 100644
--- a/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
+++ b/src/renderer/components/layout/PlayBar/MiddleWidthProgress.vue
@@ -257,7 +257,7 @@ export default {
   width: 30%;
   // position: relative;
   flex: none;
-  color: var(--color-300);
+  color: var(--color-550);
   font-size: 13px;
   // padding-left: 10px;
   display: flex;
diff --git a/src/renderer/components/layout/PlayBar/PlayProgress.vue b/src/renderer/components/layout/PlayBar/PlayProgress.vue
index 11c648ec..9633bab9 100644
--- a/src/renderer/components/layout/PlayBar/PlayProgress.vue
+++ b/src/renderer/components/layout/PlayBar/PlayProgress.vue
@@ -126,7 +126,7 @@ export default {
   // width: 30%;
   position: relative;
   // flex: none;
-  color: var(--color-300);
+  color: var(--color-550);
   font-size: 13px;
   // padding-left: 10px;
   // display: flex;
diff --git a/src/renderer/components/layout/PlayDetail/LyricPlayer.vue b/src/renderer/components/layout/PlayDetail/LyricPlayer.vue
index 922a4515..df47c569 100644
--- a/src/renderer/components/layout/PlayDetail/LyricPlayer.vue
+++ b/src/renderer/components/layout/PlayDetail/LyricPlayer.vue
@@ -206,13 +206,13 @@ export default {
   }
   :global {
     .font-lrc {
-      color: var(--color-200);
+      color: var(--color-450);
     }
     .line-content {
       line-height: 1.2;
       padding: calc(var(--playDetail-lrc-font-size, 16px) / 2) 1px;
       overflow-wrap: break-word;
-      color: var(--color-200);
+      color: var(--color-450);
       transition: @transition-normal;
       transition-property: padding;
 
@@ -240,7 +240,7 @@ export default {
           transition-property: font-size;
           font-size: 1em;
           background-repeat: no-repeat;
-          background-color: var(--color-200);
+          background-color: var(--color-450);
           background-image: -webkit-linear-gradient(top, var(--color-primary-dark-200), var(--color-primary-dark-200));
           -webkit-text-fill-color: transparent;
           -webkit-background-clip: text;
diff --git a/src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue b/src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue
index ffadf57e..795caeaa 100644
--- a/src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue
+++ b/src/renderer/components/layout/PlayDetail/components/MusicComment/CommentFloor.vue
@@ -91,13 +91,13 @@ export default {
   min-width: 0;
   line-height: 1.3;
   gap: 6px;
-  color: var(--color-200);
+  color: var(--color-450);
 }
 .name {
   flex: 0 1 auto;
   min-width: 0;
   .mixin-ellipsis-1;
-  color: var(--color-400);
+  color: var(--color-650);
 }
 .label {
   flex: none;
diff --git a/src/renderer/components/layout/SyncModeModal.vue b/src/renderer/components/layout/SyncModeModal.vue
index d85406de..461e61d4 100644
--- a/src/renderer/components/layout/SyncModeModal.vue
+++ b/src/renderer/components/layout/SyncModeModal.vue
@@ -60,7 +60,7 @@ export default {
       sync.isShowSyncMode = false
     }
     const handleSelectMode = (mode) => {
-      if (mode.startsWith('overwrite') && this.isOverwrite) mode += '_full'
+      if (mode.startsWith('overwrite') && isOverwrite.value) mode += '_full'
       sendSyncAction({ action: 'select_mode', data: mode })
       handleClose()
     }
diff --git a/src/renderer/core/useApp/useSync.ts b/src/renderer/core/useApp/useSync.ts
index 0860021c..5af8181b 100644
--- a/src/renderer/core/useApp/useSync.ts
+++ b/src/renderer/core/useApp/useSync.ts
@@ -1,5 +1,5 @@
 import { markRaw, onBeforeUnmount } from '@common/utils/vueTools'
-import { onSyncAction } from '@renderer/utils/ipc'
+import { onSyncAction, sendSyncAction } from '@renderer/utils/ipc'
 import { sync } from '@renderer/store'
 import { appSetting } from '@renderer/store/setting'
 
@@ -34,14 +34,14 @@ export default () => {
   return async() => {
     sync.enable = appSetting['sync.enable']
     sync.port = appSetting['sync.port']
-    // if (appSetting['sync.enable'] && appSetting['sync.port']) {
-    //   void sendSyncAction({
-    //     action: 'enable',
-    //     data: {
-    //       enable: appSetting['sync.enable'],
-    //       port: appSetting['sync.port'],
-    //     },
-    //   })
-    // }
+    if (appSetting['sync.enable'] && appSetting['sync.port']) {
+      void sendSyncAction({
+        action: 'enable',
+        data: {
+          enable: appSetting['sync.enable'],
+          port: appSetting['sync.port'],
+        },
+      })
+    }
   }
 }
diff --git a/src/renderer/store/list/listManage/action.ts b/src/renderer/store/list/listManage/action.ts
index 1d2fac32..727f25ec 100644
--- a/src/renderer/store/list/listManage/action.ts
+++ b/src/renderer/store/list/listManage/action.ts
@@ -97,7 +97,7 @@ const removeUserList = (id: string) => {
 }
 
 const overwriteUserList = (lists: LX.List.UserListInfo[]) => {
-  userLists.splice(0, lists.length, ...lists)
+  userLists.splice(0, userLists.length, ...lists)
 }
 
 
@@ -108,13 +108,22 @@ const overwriteUserList = (lists: LX.List.UserListInfo[]) => {
 
 export const listDataOverwrite = ({ defaultList, loveList, userList, tempList }: MakeOptional<LX.List.ListDataFull, 'tempList'>): string[] => {
   const updatedListIds: string[] = []
-  overwriteUserList(userList.map(({ list, ...listInfo }) => {
+  const newUserIds: string[] = []
+  const newUserListInfos = userList.map(({ list, ...listInfo }) => {
+    newUserIds.push(listInfo.id)
     if (allMusicList.has(listInfo.id)) {
       overwriteMusicList(listInfo.id, list)
       updatedListIds.push(listInfo.id)
     }
     return listInfo
-  }))
+  })
+  for (const list of userLists) {
+    if (!allMusicList.has(list.id)) continue
+    removeMusicList(list.id)
+    updatedListIds.push(list.id)
+  }
+  overwriteUserList(newUserListInfos)
+
   if (allMusicList.has(LIST_IDS.DEFAULT)) {
     overwriteMusicList(LIST_IDS.DEFAULT, defaultList)
     updatedListIds.push(LIST_IDS.DEFAULT)
@@ -130,8 +139,8 @@ export const listDataOverwrite = ({ defaultList, loveList, userList, tempList }:
   }
   const newIds = [LIST_IDS.DEFAULT, LIST_IDS.LOVE, ...userList.map(l => l.id)]
   if (tempList) newIds.push(LIST_IDS.TEMP)
-  overwriteListPosition(newIds)
-  overwriteListUpdateInfo(newIds)
+  void overwriteListPosition(newIds)
+  void overwriteListUpdateInfo(newIds)
   return updatedListIds
 }
 
@@ -158,10 +167,10 @@ export const userListsRemove = (ids: string[]) => {
   const changedIds = []
   for (const id of ids) {
     removeUserList(id)
-    if (!allMusicList.has(id)) continue
-    removeMusicList(id)
     removeListPosition(id)
     removeListUpdateInfo(id)
+    if (!allMusicList.has(id)) continue
+    removeMusicList(id)
     changedIds.push(id)
   }
 
diff --git a/src/renderer/store/list/listManage/rendererListManage.ts b/src/renderer/store/list/listManage/rendererListManage.ts
index edd48479..e7aa276c 100644
--- a/src/renderer/store/list/listManage/rendererListManage.ts
+++ b/src/renderer/store/list/listManage/rendererListManage.ts
@@ -235,7 +235,7 @@ export const registerListAction = (appSetting: LX.AppSetting, onListChanged: (li
   rendererOn(PLAYER_EVENT_NAME.list_music_update, list_music_update)
   rendererOn(PLAYER_EVENT_NAME.list_music_update_position, list_music_update_position)
   rendererOn(PLAYER_EVENT_NAME.list_music_overwrite, list_music_overwrite)
-  rendererOn(PLAYER_EVENT_NAME.list_data_overwire, list_music_clear)
+  rendererOn(PLAYER_EVENT_NAME.list_music_clear, list_music_clear)
 
   return () => {
     rendererOff(PLAYER_EVENT_NAME.list_data_overwire, list_data_overwrite)
@@ -249,6 +249,6 @@ export const registerListAction = (appSetting: LX.AppSetting, onListChanged: (li
     rendererOff(PLAYER_EVENT_NAME.list_music_update, list_music_update)
     rendererOff(PLAYER_EVENT_NAME.list_music_update_position, list_music_update_position)
     rendererOff(PLAYER_EVENT_NAME.list_music_overwrite, list_music_overwrite)
-    rendererOff(PLAYER_EVENT_NAME.list_data_overwire, list_music_clear)
+    rendererOff(PLAYER_EVENT_NAME.list_music_clear, list_music_clear)
   }
 }
diff --git a/src/renderer/store/utils.ts b/src/renderer/store/utils.ts
index e5da2aac..c5b70f68 100644
--- a/src/renderer/store/utils.ts
+++ b/src/renderer/store/utils.ts
@@ -5,7 +5,6 @@
 // export const getList = (listId: string | null): LX.Download.ListItem[] | LX.Music.MusicInfo[] => {
 //   return listId == 'download' ? downloadList : getListFromState(listId)
 // }
-import { commonColorNames, commonDarkColorValues, commonLightColorValues } from '@common/config'
 import { encodePath, isUrl } from '@common/utils/common'
 import { joinPath } from '@common/utils/nodejs'
 import { markRaw, shallowReactive } from '@common/utils/vueTools'
@@ -41,11 +40,6 @@ export const buildThemeColors = (theme: LX.Theme, dataPath: string) => {
     ...theme.config.extInfo,
   }
 
-  const vals = theme.isDark ? commonDarkColorValues : commonLightColorValues
-  for (let i = commonColorNames.length; i--;) {
-    colors[commonColorNames[i]] = vals[i]
-  }
-
   return colors
 }
 
diff --git a/src/renderer/utils/data.ts b/src/renderer/utils/data.ts
index e1ed502e..a7f5c2dd 100644
--- a/src/renderer/utils/data.ts
+++ b/src/renderer/utils/data.ts
@@ -43,13 +43,15 @@ const saveViewPrevStateThrottle = throttle((state) => {
   saveViewPrevStateFromData(state)
 }, 1000)
 
-
-export const getListPosition = async(id: string): Promise<number> => {
+const initPosition = async() => {
   if (listPosition == null) listPosition = await getListPositionInfoFromData() ?? {}
+}
+export const getListPosition = async(id: string): Promise<number> => {
+  await initPosition()
   return listPosition[id] ?? 0
 }
 export const setListPosition = async(id: string, position?: number) => {
-  if (listPosition == null) await getListPosition(id)
+  await initPosition()
   listPosition[id] = position ?? 0
   saveListPositionThrottle()
 }
@@ -57,7 +59,8 @@ export const removeListPosition = (id: string) => {
   delete listPosition[id]
   saveListPositionThrottle()
 }
-export const overwriteListPosition = (ids: string[]) => {
+export const overwriteListPosition = async(ids: string[]) => {
+  await initPosition()
   const removedIds = []
   for (const id of Object.keys(listPosition)) {
     if (ids.includes(id)) continue
@@ -83,29 +86,32 @@ const saveListUpdateInfo = throttle(() => {
   saveListUpdateInfoFromData(listUpdateInfo)
 }, 1000)
 
-export const getListUpdateInfo = async() => {
+const initListUpdateInfo = async() => {
   if (listUpdateInfo == null) {
     listUpdateInfo = await getListUpdateInfoFromData() ?? {}
     for (const [id, info] of Object.entries(listUpdateInfo)) {
       setUpdateTime(id, info.updateTime ? dateFormat(info.updateTime) : '')
     }
   }
+}
+export const getListUpdateInfo = async() => {
+  await initListUpdateInfo()
   return listUpdateInfo
 }
 export const setListUpdateInfo = async(info: LX.List.ListUpdateInfo) => {
-  if (listUpdateInfo == null) await getListUpdateInfo()
+  await initListUpdateInfo()
   listUpdateInfo = info
   saveListUpdateInfo()
 }
 export const setListAutoUpdate = async(id: string, enable: boolean) => {
-  if (listUpdateInfo == null) await getListUpdateInfo()
+  await initListUpdateInfo()
   const targetInfo = listUpdateInfo[id] ?? { updateTime: 0, isAutoUpdate: false }
   targetInfo.isAutoUpdate = enable
   listUpdateInfo[id] = targetInfo
   saveListUpdateInfo()
 }
 export const setListUpdateTime = async(id: string, time: number) => {
-  if (listUpdateInfo == null) await getListUpdateInfo()
+  await initListUpdateInfo()
   const targetInfo = listUpdateInfo[id] ?? { updateTime: 0, isAutoUpdate: false }
   targetInfo.updateTime = time
   listUpdateInfo[id] = targetInfo
@@ -119,9 +125,10 @@ export const removeListUpdateInfo = (id: string) => {
   delete listUpdateInfo[id]
   saveListUpdateInfo()
 }
-export const overwriteListUpdateInfo = (ids: string[]) => {
+export const overwriteListUpdateInfo = async(ids: string[]) => {
+  await initListUpdateInfo()
   const removedIds = []
-  for (const id of Object.keys(listPosition)) {
+  for (const id of Object.keys(listUpdateInfo)) {
     if (ids.includes(id)) continue
     removedIds.push(id)
   }
diff --git a/src/renderer/views/Setting/components/SettingBackup.vue b/src/renderer/views/Setting/components/SettingBackup.vue
index 2a7b50e2..99fba6ec 100644
--- a/src/renderer/views/Setting/components/SettingBackup.vue
+++ b/src/renderer/views/Setting/components/SettingBackup.vue
@@ -37,7 +37,7 @@ import {
 import { dialog } from '@renderer/plugins/Dialog'
 import useImportTip from '@renderer/utils/compositions/useImportTip'
 import { useI18n } from '@renderer/plugins/i18n'
-import { createUserList, getListMusics, overwriteListMusics } from '@renderer/store/list/action'
+import { getListMusics, overwriteListFull, overwriteListMusics } from '@renderer/store/list/action'
 import { LIST_IDS } from '@common/constants'
 import { defaultList, loveList, userLists } from '@renderer/store/list/state'
 import { appSetting, updateSetting } from '@renderer/store/setting'
@@ -67,12 +67,14 @@ export default {
     }
 
     const importOldListData = async(lists) => {
-      for await (const list of lists) {
+      const allLists = await getAllLists()
+      for (const list of lists) {
         try {
-          if (userLists.some(l => l.id == list.id) || list.id == LIST_IDS.DEFAULT || list.id == LIST_IDS.LOVE) {
-            await overwriteListMusics({ listId: list.id, musicInfos: list.list.map(m => toNewMusicInfo(m)) })
+          const targetList = allLists.find(l => l.id == list.id)
+          if (targetList) {
+            targetList.list = list.list.map(m => toNewMusicInfo(m))
           } else {
-            await createUserList({
+            allLists.push({
               name: list.name,
               id: list.id,
               list: list.list.map(m => toNewMusicInfo(m)),
@@ -85,14 +87,19 @@ export default {
           console.log(err)
         }
       }
+      const defaultList = allLists.shift().list
+      const loveList = allLists.shift().list
+      await overwriteListFull({ defaultList, loveList, userList: allLists })
     }
     const importNewListData = async(lists) => {
-      for await (const list of lists) {
+      const allLists = await getAllLists()
+      for (const list of lists) {
         try {
-          if (userLists.some(l => l.id == list.id) || list.id == LIST_IDS.DEFAULT || list.id == LIST_IDS.LOVE) {
-            await overwriteListMusics({ listId: list.id, musicInfos: list.list.map(m => fixNewMusicInfoQuality(m)) })
+          const targetList = allLists.find(l => l.id == list.id)
+          if (targetList) {
+            targetList.list = list.list.map(m => fixNewMusicInfoQuality(m))
           } else {
-            await createUserList({
+            allLists.push({
               name: list.name,
               id: list.id,
               list: list.list.map(m => fixNewMusicInfoQuality(m)),
@@ -105,6 +112,9 @@ export default {
           console.log(err)
         }
       }
+      const defaultList = allLists.shift().list
+      const loveList = allLists.shift().list
+      await overwriteListFull({ defaultList, loveList, userList: allLists })
     }
     const importOldSettingData = (setting) => {
       console.log(setting)
diff --git a/src/renderer/views/Setting/components/ThemeEditModal/index.vue b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
index 8cac5735..85a2c829 100644
--- a/src/renderer/views/Setting/components/ThemeEditModal/index.vue
+++ b/src/renderer/views/Setting/components/ThemeEditModal/index.vue
@@ -9,6 +9,10 @@
               <div ref="primary_color_ref" :class="$style.color" />
               <div :class="$style.label">{{ $t('theme_edit_modal__primary') }}</div>
             </div>
+            <div :class="$style.item">
+              <div ref="font_color_ref" :class="$style.color" />
+              <div :class="$style.label">{{ $t('theme_edit_modal__font') }}</div>
+            </div>
             <div :class="$style.item">
               <div ref="app_bg_color_ref" :class="$style.color" />
               <div :class="$style.label">{{ $t('theme_edit_modal__app_bg') }}</div>
@@ -124,7 +128,8 @@ import { isUrl, encodePath } from '@common/utils/common'
 // import { appSetting, updateSetting } from '@renderer/store/setting'
 // import { applyTheme, getThemes } from '@renderer/store/utils'
 import { createThemeColors } from '@common/theme/utils'
-import useMainCoolor from './useMainCoolor'
+import useMainColor from './useMainColor'
+import useFontColor from './useFontColor'
 import useAppBgColor from './useAppBgColor'
 import useMainBgColor from './useMainBgColor'
 import useAsideFontColor from './useAsideFontColor'
@@ -191,7 +196,8 @@ export default {
     // '--color-badge-primary': string
     // '--color-badge-secondary': string
     // '--color-badge-tertiary': string
-    const { primary_color_ref, initMainColor, destroyMainColor } = useMainCoolor()
+    const { primary_color_ref, initMainColor, destroyMainColor } = useMainColor()
+    const { font_color_ref, initFontColor, destroyFontColor } = useFontColor()
     const { app_bg_color_ref, initAppBgColor, destroyAppBgColor, setAppBgColor } = useAppBgColor()
     const { aside_font_color_ref, initAsideFontColor, destroyAsideFontColor, setAsideFontColor } = useAsideFontColor()
     const { main_bg_color_ref, initMainBgColor, destroyMainBgColor, setMainBgColor } = useMainBgColor()
@@ -221,8 +227,8 @@ export default {
     let hideBtnColorOrigin
     let hideBtnColor
 
-    const applyPrimaryColor = (color, isDark) => {
-      theme.config.themeColors = createThemeColors(color, isDark)
+    const applyPrimaryColor = (color, fontColor, isDark) => {
+      theme.config.themeColors = createThemeColors(color, fontColor, isDark)
       if (theme.config.extInfo['--color-app-background'].startsWith('var')) setAppBgColor(getColor(appBgColorOrigin, theme))
       if (theme.config.extInfo['--color-nav-font'].startsWith('var')) setAsideFontColor(getColor(asideFontColorOrigin, theme))
       if (theme.config.extInfo['--color-main-background'].startsWith('var')) setMainBgColor(getColor(mainBgColorOrigin, theme))
@@ -273,8 +279,10 @@ export default {
       hideBtnColor = getColor(hideBtnColorOrigin, theme)
 
       initMainColor(theme.config.themeColors['--color-primary'], (color) => {
-        // console.log(color)
-        applyPrimaryColor(color, theme.isDark)
+        applyPrimaryColor(color, theme.config.themeColors['--color-1000'], theme.isDark)
+      })
+      initFontColor(theme.config.themeColors['--color-1000'] ?? (isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'), (color) => {
+        applyPrimaryColor(theme.config.themeColors['--color-primary'], color, theme.isDark)
       })
       initAppBgColor(appBgColor, (color) => {
         // console.log('appBgColor', color)
@@ -318,6 +326,7 @@ export default {
     }
     const destroyColors = () => {
       destroyMainColor()
+      destroyFontColor()
       destroyAppBgColor()
       destroyAsideFontColor()
       destroyMainBgColor()
@@ -393,7 +402,7 @@ export default {
     }
     const handleDark = (val) => {
       theme.isDark = val
-      applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.isDark)
+      applyPrimaryColor(theme.config.themeColors['--color-primary'], theme.config.themeColors['--color-1000'], theme.isDark)
     }
     /**
      * 预览主题
@@ -507,6 +516,7 @@ export default {
       removeBgImg,
 
       primary_color_ref,
+      font_color_ref,
       app_bg_color_ref,
       main_bg_color_ref,
       aside_font_color_ref,
@@ -552,7 +562,7 @@ export default {
 }
 .content {
   flex: auto;
-  padding: 15px 0;
+  // padding: 15px 0;
   font-size: 14px;
   gap: 5px;
   display: flex;
@@ -562,7 +572,7 @@ export default {
 
 }
 .groupTitle {
-  padding: 20px;
+  padding: 20px 20px 0;
   display: flex;
   flex-flow: row wrap;
 
@@ -575,7 +585,7 @@ export default {
   flex-flow: row wrap;
 }
 .item {
-  padding: 0 20px;
+  padding: 15px 20px 0;
   width: 60px;
   display: flex;
   flex-flow: column nowrap;
@@ -607,11 +617,11 @@ export default {
 }
 
 .bg {
-  width: 0;
-  flex: 1 1 auto;
-  // width: 180px;
-  min-width: 60px;
-  max-width: 200px;
+  // width: 0;
+  // flex: 1 1 auto;
+  width: 150px;
+  // min-width: 60px;
+  // max-width: 200px;
 }
 .bgImg {
   width: 100%;
diff --git a/src/renderer/views/Setting/components/ThemeEditModal/useFontColor.ts b/src/renderer/views/Setting/components/ThemeEditModal/useFontColor.ts
new file mode 100644
index 00000000..56f57799
--- /dev/null
+++ b/src/renderer/views/Setting/components/ThemeEditModal/useFontColor.ts
@@ -0,0 +1,26 @@
+import { ref } from '@common/utils/vueTools'
+import { pickrTools, PickrTools } from '@renderer/utils/pickrTools'
+
+export default () => {
+  const font_color_ref = ref(null)
+  let tools: PickrTools | null
+
+  const initFontColor = (color: string, changed: (color: string) => void) => {
+    if (!font_color_ref.value) return
+    tools = pickrTools.create(font_color_ref.value, color, [
+      'rgba(33, 33, 33, 1)',
+      'rgba(229, 229, 229, 1)',
+    ], changed, () => {})
+  }
+  const destroyFontColor = () => {
+    if (!tools) return
+    tools.destroy()
+    tools = null
+  }
+
+  return {
+    font_color_ref,
+    initFontColor,
+    destroyFontColor,
+  }
+}
diff --git a/src/renderer/views/Setting/components/ThemeEditModal/useMainCoolor.ts b/src/renderer/views/Setting/components/ThemeEditModal/useMainColor.ts
similarity index 100%
rename from src/renderer/views/Setting/components/ThemeEditModal/useMainCoolor.ts
rename to src/renderer/views/Setting/components/ThemeEditModal/useMainColor.ts
diff --git a/src/renderer/views/Setting/index.vue b/src/renderer/views/Setting/index.vue
index 631c2839..e9f6fdc6 100644
--- a/src/renderer/views/Setting/index.vue
+++ b/src/renderer/views/Setting/index.vue
@@ -59,7 +59,7 @@ import SettingDesktopLyric from './components/SettingDesktopLyric'
 import SettingSearch from './components/SettingSearch'
 import SettingList from './components/SettingList'
 import SettingDownload from './components/SettingDownload'
-// import SettingSync from './components/SettingSync'
+import SettingSync from './components/SettingSync'
 import SettingHotKey from './components/SettingHotKey'
 import SettingNetwork from './components/SettingNetwork'
 import SettingOdc from './components/SettingOdc'
@@ -78,7 +78,7 @@ export default {
     SettingSearch,
     SettingList,
     SettingDownload,
-    // SettingSync,
+    SettingSync,
     SettingHotKey,
     SettingNetwork,
     SettingOdc,
@@ -102,7 +102,7 @@ export default {
         { id: 'SettingSearch', title: t('setting__search') },
         { id: 'SettingList', title: t('setting__list') },
         { id: 'SettingDownload', title: t('setting__download') },
-        // { id: 'SettingSync', title: t('setting__sync') },
+        { id: 'SettingSync', title: t('setting__sync') },
         { id: 'SettingHotKey', title: t('setting__hot_key') },
         { id: 'SettingNetwork', title: t('setting__network') },
         { id: 'SettingOdc', title: t('setting__odc') },