How to use the @elastic/eui/dist/eui_theme_light.json.euiColorDarkShade function in @elastic/eui

const LegendContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${px(units.quarter)};
  justify-content: space-between;
`;

const LegendGray = styled(Legend)`
  color: ${theme.euiColorMediumShade};
  padding-bottom: 0;
  padding-right: ${px(units.half)};
`;

const Value = styled.div`
  color: ${theme.euiColorDarkShade};
  font-size: ${fontSize};
`;

export default function Tooltip({
  header,
  footer,
  tooltipPoints,
  x,
  y,
  ...props
}) {
  if (isEmpty(tooltipPoints)) {
    return null;
  }

  // Only show legend labels if there is more than 1 data set

`;

const LegendContainer = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: ${px(units.quarter)};
  justify-content: space-between;
`;

const LegendGray = styled(Legend)`
  color: ${theme.euiColorMediumShade};
  padding-bottom: 0;
`;

const Value = styled.div`
  color: ${theme.euiColorDarkShade};
  font-size: ${fontSize};
`;

export default function Tooltip({
  header,
  footer,
  tooltipPoints,
  x,
  y,
  ...props
}) {
  if (isEmpty(tooltipPoints)) {
    return null;
  }

  // Only show legend labels if there is more than 1 data set

switch (type) {
    case 'field':
      return theme.euiColorVis7;
    case 'value':
      return theme.euiColorVis0;
    case 'operator':
      return theme.euiColorVis1;
    case 'conjunction':
      return theme.euiColorVis3;
    case 'recentSearch':
      return theme.euiColorMediumShade;
  }
}

const Description = styled.div`
  color: ${theme.euiColorDarkShade};

  p {
    display: inline;

    span {
      font-family: ${fontFamilyCode};
      color: ${theme.euiColorFullShade};
      padding: 0 ${px(units.quarter)};
      display: inline-block;
    }
  }
`;

const ListItem = styled.li`
  font-size: ${fontSizes.small};
  height: ${px(units.double)};

switch (type) {
    case 'field':
      return theme.euiColorVis7;
    case 'value':
      return theme.euiColorVis0;
    case 'operator':
      return theme.euiColorVis1;
    case 'conjunction':
      return theme.euiColorVis3;
    case 'recentSearch':
      return theme.euiColorMediumShade;
  }
}

const Description = styled.div`
  color: ${theme.euiColorDarkShade};

  p {
    display: inline;

    span {
      font-family: ${theme.euiFontFamily};
      color: ${theme.euiColorFullShade};
      padding: 0 ${theme.euiSizeXS};
      display: inline-block;
    }
  }
`;

const ListItem = styled.li`
  font-size: ${theme.euiFontSizeXS};
  height: ${theme.euiSizeXL};

import { StringMap } from '../../../../typings/common';
import { AgentName } from '../../../../typings/es_schemas/ui/fields/Agent';
import { fontSize, fontSizes, px, unit, units } from '../../../style/variables';
import { getAgentDocUrlForTab } from '../../../utils/documentation/agents';
import { NestedKeyValueTable } from './NestedKeyValueTable';
import { PropertyTabKey } from './tabConfig';

const TableContainer = styled.div`
  padding-bottom: ${px(units.double)};
`;

const TableInfo = styled.div`
  padding: ${px(unit)} 0 0;
  text-align: center;
  font-size: ${fontSize};
  color: ${theme.euiColorDarkShade};
  line-height: 1.5;
`;

const TableInfoHeader = styled(TableInfo)`
  font-size: ${fontSizes.large};
  color: ${theme.euiColorDarkestShade};
`;

const EuiIconWithSpace = styled(EuiIcon)`
  margin-right: ${px(units.half)};
`;

function getTabHelpText(tabKey: PropertyTabKey) {
  switch (tabKey) {
    case 'user':
      return i18n.translate(

rectAnnotations.push({
        coordinates: {
          x1: domainStart,
        },
      });
    }
    if (domainEnd !== domainMax) {
      rectAnnotations.push({
        coordinates: {
          x0: domainEnd,
        },
      });
    }

    const rectAnnotationStyle = {
      stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
      strokeWidth: 0,
      opacity: isDarkMode ? 0.6 : 0.2,
      fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
    };

    const tooltipProps = {
      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
      type: TooltipType.VerticalCursor,
    };

    return (

import theme from '@elastic/eui/dist/eui_theme_light.json';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { idx } from '@kbn/elastic-idx';
import { IStackframe } from '../../../../typings/es_schemas/raw/fields/Stackframe';
import { fontFamilyCode, fontSize, px, units } from '../../../style/variables';

const FileDetails = styled.div`
  color: ${theme.euiColorMediumShade};
  padding: ${px(units.half)};
  font-family: ${fontFamilyCode};
  font-size: ${fontSize};
`;
const LibraryFrameFileDetail = styled.span`
  color: ${theme.euiColorDarkShade};
`;
const AppFrameFileDetail = styled.span`
  font-weight: bold;
  color: ${theme.euiColorFullShade};
`;

interface Props {
  stackframe: IStackframe;
  isLibraryFrame: boolean;
}

const FrameHeading: React.SFC = ({ stackframe, isLibraryFrame }) => {
  const FileDetail = isLibraryFrame
    ? LibraryFrameFileDetail
    : AppFrameFileDetail;
  const lineNumber = idx(stackframe, _ => _.line.number) || 0;

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { units, px, fontSizes } from '../../../../style/variables';
import theme from '@elastic/eui/dist/eui_theme_light.json';

const Container = styled.div`
  display: flex;
  align-items: center;
  font-size: ${props => props.fontSize};
  color: ${theme.euiColorDarkShade};
  cursor: ${props => (props.clickable ? 'pointer' : 'initial')};
  opacity: ${props => (props.disabled ? 0.4 : 1)};
  user-select: none;
`;

export const Indicator = styled.span`
  width: ${props => px(props.radius)};
  height: ${props => px(props.radius)};
  margin-right: ${props => px(props.radius / 2)};
  background: ${props => props.color};
  border-radius: 100%;
`;

export default class Legend extends PureComponent {
  render() {
    const {

},
      });
    }
    if (domainEnd !== domainMax) {
      rectAnnotations.push({
        coordinates: {
          x0: domainEnd,
        },
      });
    }

    const rectAnnotationStyle = {
      stroke: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
      strokeWidth: 0,
      opacity: isDarkMode ? 0.6 : 0.2,
      fill: isDarkMode ? darkEuiTheme.euiColorLightShade : lightEuiTheme.euiColorDarkShade,
    };

    const tooltipProps = {
      headerFormatter: this.renderBarTooltip(xInterval, domainStart, domainEnd),
      type: TooltipType.VerticalCursor,
    };

    return (

margin={{
                top: margins.top,
                left: margins.left,
                right: margins.right
              }}
              xDomain={xDomain}
            >
              

              {topTraceDuration > 0 && (
                
              )}

              {agentMarks.map(agentMark => (