Fixed the legend and tooltip text colors in dark mode and light mode.

Author: Robert Crocker

src/App.tsx

@@ -9,7 +9,6 @@ import portfolio from '../data/portfolio.json';
 import penguins from '../data/penguins.json';
 import fruit from '../data/fruit.json';
 
-import GlobalStyle from './styles/globals';
 import { Container } from './styles/componentStyles';
 
 function App() {

src/components/ColorLegend.tsx

@@ -16,13 +16,13 @@ const Legend = styled.div`
 const LegendTitle = styled.text`
   font-size: 14px;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
-  fill: ${(props) => props.theme.textColor};
+  fill: ${(props) => props.theme.legendTextColor};
 `;
 
 const LegendLabel = styled.text`
   font-size: 12px;
   font-family: Tahoma, Geneva, Verdana, sans-serif;
-  fill: ${(props) => props.theme.textColor};
+  fill: ${(props) => props.theme.legendTextColor};
 `;
 
 export const ColorLegend = ({

src/components/Tooltip.tsx

@@ -26,7 +26,7 @@ const Tooltip = ({
     axisBaseLineColor: '#ebebeb',
     legendBackgroundColor: '#ffffff',
     legendBorder: '1px solid #ebebeb',
-    tooltipTextColor: '#e5e5e5',
+    tooltipTextColor: '#212121',
     tooltipBackgroundColor: '#ffffff',
     tooltipBorder: '1px solid #ddd',
     tooltipShadow: `0 0 10px 0 rgba(80, 80, 80, 0.2)`,

src/utils.ts

@@ -5,6 +5,7 @@ const LightTheme = {
   strokeGridLineColor: '#ebebeb',
   textColor: '#8c8c8c',
   axisBaseLineColor: '#ebebeb',
+  legendTextColor: '#212121',
   legendBackgroundColor: '#ffffff',
   legendBorder: '1px solid #ebebeb',
 };
@@ -13,6 +14,7 @@ const DarkTheme = {
   strokeGridLineColor: '#3d3d3d',
   textColor: '#727272',
   axisBaseLineColor: '#3d3d3d',
+  legendTextColor: '#e5e5e5',
   legendBackgroundColor: '#1d1d1d',
   legendBorder: '1px solid #3d3d3d',
 };