How to use the @pluralsight/ps-design-system-theme.names function in @pluralsight/ps-design-system-theme

const decorateCards = (sizes, props, state) => {
  const cardMaxWidths = {
    small: '140px',
    medium: '320px',
    large: '540px'
  }
  // NOTE: jsx-style classes evaluated in the context of Example.React
  let decorated = `<div>`

  state.codes.forEach((code, i) =&gt; {
    decorated += `<div style="{{">${code}</div>`
  })

  decorated += '</div>'

  return decorated
}
const decorateCardsSML = decorateCards.bind(null, Object.keys(Card.sizes))

const handleSelect = (evt, index) => {
    const nextTheme = Theme.names[Object.keys(Theme.names)[index]]
    setThemeName(nextTheme)
  }

storiesOf('Button / theme', module).add('nested', _ => (
  
    <button>{Theme.names.dark}</button>
    
      <button>{Theme.names.light}</button>
      
        <button>{Theme.names.dark}</button>
      
    
  
))

{row.courses}
                
                
                  {row.viewTime}m
                
              
            ))}
          
        
        <style>{`
          .example {
            padding: ${core.layout.spacingLarge};
            background: ${props.themeName === Theme.names.light
              ? core.colors.bone
              : core.colors.gray06};
          }
        `}</style>
      
    )
  }
}

const ContrastingExample = _ => (
  <div>
    <div>
      
        <button size="{Button.sizes.large}">
          Light
        </button>
      
    </div>
    <div>
      
        <button size="{Button.sizes.large}">
          Dark
        </button>
      
    </div>
    <style>{`
      .contrast {
        display: flex;
        margin: ${core.layout.spacingLarge} 0;</style></div>

function ThemeToggle(props) {
  return (
    <>
      <style>{`
        .toggle {
          position: absolute;
          top: ${core.layout.spacingXSmall};
          right: ${core.layout.spacingXSmall};
          z-index: 1;
        }
      `}</style>

      <div>
        
          {Object.keys(Theme.names).map(themeName =&gt; (
            
              {capitalize(themeName)}
            
          ))}
        
      </div>
    
  )
}

const DrawerExamples = () => (
  <div>
    
      <div>
        }&gt;
          
        
        }&gt;
          
        
      </div>
    
    <style>{`
      .drawer-example {
        padding: ${core.layout.spacingXLarge};
        background: ${core.colors.gray06};
        color: ${core.colors.bone};
      }
    `}</style></div>

setDisplayed(nextDisplayed)
  }

  function handleDayClick(evt, dd) {
    evt.preventDefault()

    const nextSelected = { ...displayed, dd }
    setSelected(nextSelected)

    if (isFunction(props.onSelect)) {
      props.onSelect(formatDate(nextSelected), nextSelected)
    }
  }

  return (
    
      <div tabindex="{-1}">
        <div>
          <button>}
            size={Button.sizes.small}
            appearance={Button.appearances.flat}
          /&gt;

          <div>
            {getMonthName(displayed.mm)} {displayed.yyyy}
          </div>

          </button><button>}</button></div></div>

<p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-theme
      </code>

      <p>Include a React component in your project:</p>
      <code>
        import Theme from '@pluralsight/ps-design-system-theme'
      </code>

      Theme.defaultName,
            <span>controls which theme is used in child components</span>
          ])
        ]}
      /&gt;

      Usage pattern
      <p>
        To theme a component or part of the page, surround it in the{' '}
        Theme component. If you're on React &lt; 16,
        you'll need to wrap a single child, so a child{' '}
        div may be required.
      </p>
      <code>
        {`</code>

function TooltipGuideline(props) {
  return (
    
      <button>}
      /&gt;
      <div>
        
          {props.children}
        
      </div>
      <style>{`
        .tooltipWrapper {
          position: relative;</style></button>