themed.js

import React from 'react';
import styled, { ThemeProvider } from 'styled-componets';

const theme = {
    text: '#ffff',
    dark: '#0000'
}

const CustomButton = styled.button`
  background-color: ${props => props.theme.dark};
  color: ${ props => props.theme.text};
  cursor: pointer;
  font-size: 16px;
  border-radius: 3px;
  border: 2px solid palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

const App = () => {
  return (
    <div>
      <h1> Stlyed Button </h1>
      <ThemeProvider theme={theme}>
          <CustomButton>Themed button </CustomButton>
      </ThemeProvider>
    </div>
  )
}