A Theme React

AWS Amplify UI is theme based. Developers are able to customize UI with theme.

Here we build alternative themes for AWS Amplify.

* Install
* Apply
* Themes
- Bootstrap
- Instagram

Install

``
npm install --save a-theme-react
`

Apply

AWS Amplify UI is theme

`
import { Bootstrap } from 'a-theme-react';


`

Themes

$3

A theme base on default Bootstrap theme CSS.

`
import { Bootstrap } from 'a-theme-react';


`

FontAwsome Icons

Bootstrap theme uses icons from Font Awesome. react-fontawesome does not include CSS. So you have to include the CSS by yourself. One way is from CDN.

For example add this line to HTML file:
`

`

The icons won't display without the CSS file. Everything else is not affected.

$3

A theme imitates Instagram

`
import { Instagram } from 'a-theme-react';


`

CSS Pseudo-Elements

One of the limitation in React inline styling is no pseudo-elements.

Among CSS pseudo-elements, ::before and ::after are the two most frequent used. AWS Amplify UI is made to support these two.

Here we take benefit of before and after to make this theme possible.

Example:

`
const beforeImg = (
src={screenshot5}
style={{
width: '216px',
marginTop: '87px',
marginLeft: '79px',
height: '393px'
}}
/>
)

export const FormSection = {
margin: '0 0 10px',
color: '#262626',
backgroundColor: '#fff',
border: '1px solid #e6e6e6',
borderRadius: '1px',
textAlign: 'center',
width: '350px',
display: 'inline-block',
verticalAlign: 'middle',
before: {
content: beforeImg,
display: 'inline-block',
width: '400px',
height: '560px',
verticalAlign: 'middle',
backgroundImage: 'url(' + home_phone + ')',
backgroundSize: '400px 560px'
}
}
``