docs(examples): add custom-themes sample

examples/custom-themes/src/home.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Card, Text, Tag, useTheme } from '@zeit-ui/react'
+
+const Home = () => {
+  const theme = useTheme()
+
+  return (
+    <Card shadow style={{ width: '500px', margin: '100px auto' }}>
+      <Text>Modern and minimalist React UI library.</Text>
+      <Text type={'success'}>Modern and minimalist React UI library. <Tag>{theme.palette.success}</Tag></Text>
+      <Text type={'warning'}>Modern and minimalist React UI library. <Tag>{theme.palette.warning}</Tag></Text>
+      <Text type={'error'}>Modern and minimalist React UI library. <Tag>{theme.palette.error}</Tag></Text>
+      <Text type={'secondary'}>Modern and minimalist React UI library.</Text>
+    </Card>
+  )
+}
+
+export default Home

examples/custom-themes/src/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
+import Home from './home'
+import Theme from './theme'
+
+const App = () => {
+  return (
+    <ZEITUIProvider theme={Theme}>
+      <CSSBaseline />
+      <Home />
+    </ZEITUIProvider>
+  )
+}
+
+ReactDom.render(
+  (
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  ),
+  document.getElementById('app')
+)
+
+export default App

examples/custom-themes/src/theme.js

@@ -0,0 +1,24 @@
+
+
+/**
+ * Just customize what you need, deep merge themes by default.
+ *
+ * If you are using TypeScript, please use the following type definition.
+ * If you are using JavaScript, refer to https://github.com/zeit-ui/react/blob/master/components/styles/themes/default.ts
+ */
+
+// import {
+//   ZeitUIThemes,
+//   ZeitUIThemesPalette,
+//   ZeitUIThemesExpressiveness,
+//   ZeitUIThemesLayout,
+//   ZeitUIThemesFont,
+// } from '@zeit-ui/react'
+
+export default {
+  palette: {
+    success: '#ccc',
+    warning: '#ccc',
+    error: '#ccc',
+  }
+}