diff --git a/src/app/@theme/styles/theme.corporate.ts b/src/app/@theme/styles/theme.corporate.ts
index 3007fcc2..ef192d72 100644
--- a/src/app/@theme/styles/theme.corporate.ts
+++ b/src/app/@theme/styles/theme.corporate.ts
@@ -64,22 +64,22 @@ export const CORPORATE_THEME = {
     },
 
     traffic: {
-      colorBlack: '#ffffff',
-      tooltipBg: '#eef2f5',
-      tooltipBorderColor: '#eef2f5',
+      colorBlack: theme.bg,
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: '400',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
 
-      lineBg: '#cae6f3',
+      lineBg: theme.primary,
       lineShadowBlur: '0',
-      itemColor: '#bcc3cc',
-      itemBorderColor: '#bcc3cc',
-      itemEmphasisBorderColor: '#74a2ff',
+      itemColor: theme.border4,
+      itemBorderColor: theme.border4,
+      itemEmphasisBorderColor: theme.primaryLight,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ffffff',
-      gradTo: '#ffffff',
+      gradFrom: theme.bg,
+      gradTo: theme.bg,
     },
 
     electricity: {
diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts
index e18bfca6..664e91ab 100644
--- a/src/app/@theme/styles/theme.cosmic.ts
+++ b/src/app/@theme/styles/theme.cosmic.ts
@@ -65,21 +65,21 @@ export const COSMIC_THEME = {
 
     traffic: {
       colorBlack: '#000000',
-      tooltipBg: 'rgba(0, 255, 170, 0.35)',
-      tooltipBorderColor: '#00d977',
-      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#ffffff',
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
+      tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(50, 50, 89); border-radius: 10px; padding: 4px 16px;',
+      tooltipTextColor: theme.fgText,
       tooltipFontWeight: 'normal',
 
-      lineBg: '#d1d1ff',
+      lineBg: theme.border2,
       lineShadowBlur: '14',
-      itemColor: '#BEBBFF',
-      itemBorderColor: '#ffffff',
-      itemEmphasisBorderColor: '#ffffff',
-      shadowLineDarkBg: '#655ABD',
-      shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
-      gradFrom: 'rgba(118, 89, 255, 0.4)',
-      gradTo: 'rgba(164, 84, 255, 0.5)',
+      itemColor: theme.border2,
+      itemBorderColor: theme.border2,
+      itemEmphasisBorderColor: theme.primary,
+      shadowLineDarkBg: theme.border3,
+      shadowLineShadow: theme.border3,
+      gradFrom: theme.bg,
+      gradTo: theme.bg2,
     },
 
     electricity: {
diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts
index 09831610..4040bd61 100644
--- a/src/app/@theme/styles/theme.default.ts
+++ b/src/app/@theme/styles/theme.default.ts
@@ -65,21 +65,21 @@ export const DEFAULT_THEME = {
 
     traffic: {
       colorBlack: '#000000',
-      tooltipBg: '#ffffff',
-      tooltipBorderColor: '#c0c8d1',
+      tooltipBg: theme.bg,
+      tooltipBorderColor: theme.border2,
       tooltipExtraCss: 'border-radius: 10px; padding: 4px 16px;',
-      tooltipTextColor: '#2a2a2a',
-      tooltipFontWeight: 'bolder',
+      tooltipTextColor: theme.fgText,
+      tooltipFontWeight: 'normal',
 
-      lineBg: '#c0c8d1',
+      lineBg: theme.border4,
       lineShadowBlur: '1',
-      itemColor: '#bcc3cc',
-      itemBorderColor: '#bcc3cc',
-      itemEmphasisBorderColor: '#42db7d',
+      itemColor: theme.border4,
+      itemBorderColor: theme.border4,
+      itemEmphasisBorderColor: theme.primary,
       shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
       shadowLineShadow: 'rgba(0, 0, 0, 0)',
-      gradFrom: '#ebeef2',
-      gradTo: '#ebeef2',
+      gradFrom: theme.bg2,
+      gradTo: theme.bg2,
     },
 
     electricity: {