updateColorsToMatchTheme() — react Function Reference

Architecture documentation for the updateColorsToMatchTheme() function in constants.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ updateColorsToMatchTheme() — react Function Reference

Dependency Diagram

graph TD
  31154e75_e19d_532b_5417_ac7080d89945["updateColorsToMatchTheme()"]
  eab2f8f4_2e4c_8e75_87d9_c7d9b524affb["constants.js"]
  31154e75_e19d_532b_5417_ac7080d89945 -->|defined in| eab2f8f4_2e4c_8e75_87d9_c7d9b524affb
  style 31154e75_e19d_532b_5417_ac7080d89945 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/content-views/constants.js lines 149–308

export function updateColorsToMatchTheme(element: Element): boolean {
  const computedStyle = getComputedStyle(element);

  // Check to see if styles have been initialized...
  if (computedStyle.getPropertyValue('--color-background') == null) {
    return false;
  }

  COLORS = {
    BACKGROUND: computedStyle.getPropertyValue('--color-background'),
    INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
      '--color-timeline-internal-module',
    ),
    INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-internal-module-hover',
    ),
    INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-internal-module-text',
    ),
    NATIVE_EVENT: computedStyle.getPropertyValue(
      '--color-timeline-native-event',
    ),
    NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-native-event-hover',
    ),
    NETWORK_PRIMARY: computedStyle.getPropertyValue(
      '--color-timeline-network-primary',
    ),
    NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-network-primary-hover',
    ),
    NETWORK_SECONDARY: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary',
    ),
    NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-network-secondary-hover',
    ),
    PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
      '--color-timeline-priority-background',
    ),
    PRIORITY_BORDER: computedStyle.getPropertyValue(
      '--color-timeline-priority-border',
    ),
    PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
    USER_TIMING_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-user-timing-hover',
    ),
    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
    REACT_IDLE_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-idle-hover',
    ),
    REACT_RENDER: computedStyle.getPropertyValue(
      '--color-timeline-react-render',
    ),
    REACT_RENDER_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-render-hover',
    ),
    REACT_RENDER_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-render-text',
    ),
    REACT_COMMIT: computedStyle.getPropertyValue(
      '--color-timeline-react-commit',
    ),
    REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-commit-hover',
    ),
    REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-commit-text',
    ),
    REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects',
    ),
    REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects-hover',
    ),
    REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
      '--color-timeline-react-layout-effects-text',
    ),
    REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
      '--color-timeline-react-passive-effects',