Add theme customization to README and EXAMPLES

SAKANA7 · Oct 25, 2022 · d58b93c · d58b93c
1 parent 21a0f76
commit d58b93c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/EXAMPLES.md b/EXAMPLES.md
@@ -7,3 +7,4 @@
 - [`Todo App`](https://codesandbox.io/s/sagu-ui-example-by-amit-imgw1f)
 - [`Theme customization`](https://codesandbox.io/s/sagu-ui-theme-customization-2yhe9g?file=/src/App.tsx)
 - [`Component customization`](https://codesandbox.io/s/sagu-ui-component-customization-wk1whk?file=/src/App.tsx)
+- [`Add new object to theme`](https://codesandbox.io/s/sagu-ui-increment-colors-vxuclf?file=/src/App.tsx)
diff --git a/README.md b/README.md
@@ -43,6 +43,8 @@ export default App
 You can easily override the values of the theme object
 
 ```js
+import { theme, SaguProvider } from 'sagu-ui'
+
 function App() {
   const customTheme = Object.assign(theme)
 
@@ -52,6 +54,37 @@ function App() {
 }
 ```
 
+Also you can add an entire custom object and it will be available on the Provider
+
+```js
+import { theme, SaguProvider } from 'sagu-ui'
+import { CustomWrapper } from './components/CustomWrapper'
+
+function App() {
+  const customTheme = Object.assign(theme)
+
+  customTheme.colors.tertiary = {
+    lighter: '#fb973a',
+    light: '#e37c1d',
+    medium: '#da710f',
+    dark: '#9e4c01'
+  }
+
+  return <SaguProvider theme={customTheme}>...</SaguProvider>
+}
+```
+
+```js
+// components/CustomWrapper.ts
+import styled, { css } from 'styled-components'
+
+export const CustomWrapper = styled.div`
+  ${({ theme }) => css`
+    background: ${theme.colors.tertiary.medium};
+  `}
+`
+```
+
 ## Component customization
 
 You have to many ways to customize the Sagu components