docs: add description for various properties in the theme

Author: satya164

README.md

@@ -66,7 +66,6 @@ const theme = {
   colors: {
     ...DefaultTheme.colors,
     primary: 'tomato',
-    primaryDark: color('tomato').darken(0.2).rgb().string(),
     accent: 'yellow',
   },
 };

docs/package.json

@@ -4,10 +4,10 @@
   "description": "Documentation for React Native Paper",
   "private": true,
   "scripts": {
-    "dev": "babel-node index",
+    "start": "babel-node index",
     "build": "babel-node index build",
     "clean": "del dist/",
-    "predev": "yarn run clean"
+    "prestart": "yarn run clean"
   },
   "devDependencies": {
     "babel-cli": "^6.18.0",

docs/pages/1.getting-started.md

@@ -72,15 +72,13 @@ Example:
 ```js
 import * as React from 'react';
 import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
-import color from 'color';
 import App from './src/App';
 
 const theme = {
   ...DefaultTheme,
   colors: {
     ...DefaultTheme.colors,
     primary: 'tomato',
-    primaryDark: color('tomato').darken(0.2).rgb().string(),
     accent: 'yellow',
   },
 };

docs/pages/2.theming.md

@@ -48,6 +48,26 @@ export default function Main() {
 
 You can change the theme prop dynamically and all the components will automatically update to reflect the new theme.
 
+A theme contains the following properties:
+
+- `dark` (`boolean`): whether this is a dark theme or light theme.
+- `roundness` (`number`): roundness of common elements, such as buttons.
+- `colors` (`object`): various colors used throught different elements.
+  - `primary` - primary color for your app, usually your brand color.
+  - `accent` - secondary color for your app which complements the primary color.
+  - `background` - background color for pages, such as lists.
+  - `paper` - background color for elements containing content, such as cards.
+  - `text` - text color for content.
+  - `disabled` - color for disabled elements.
+  - `placeholder` - color for placeholder text, such as input placeholder.
+- `fonts` (`object`): various fonts used throught different elements
+  - `regular`
+  - `medium`
+  - `light`
+  - `thin`
+
+When creating a custom theme, you will need to provide all of these properties.
+
 ## Applying a theme to a paper component
 
 If you want to change the theme for a certain component from the library, you can directly pass the `theme` prop to the component. The theme passed as the prop is merged with the theme from the `Provider`.

src/core/Provider.js

@@ -7,7 +7,7 @@ import type { Theme } from '../types';
 
 type Props = {
   children: React.Node,
-  theme?: Theme,
+  theme?: $Shape<Theme>,
 };
 
 export default class Provider extends React.Component<Props> {

src/styles/DarkTheme.js

@@ -2,7 +2,7 @@
 
 import color from 'color';
 import DefaultTheme from './DefaultTheme';
-import { white, grey800, lightBlue500, lightBlue700 } from './colors';
+import { white, grey800, lightBlue500 } from './colors';
 import type { Theme } from '../types';
 
 const DarkTheme: Theme = {
@@ -11,7 +11,6 @@ const DarkTheme: Theme = {
   colors: {
     ...DefaultTheme.colors,
     primary: lightBlue500,
-    primaryDark: lightBlue700,
     background: '#303030',
     paper: grey800,
     text: white,

src/styles/DefaultTheme.js

@@ -1,15 +1,14 @@
 /* @flow */
 
 import color from 'color';
-import { indigo500, indigo700, pinkA200, black, white, grey50 } from './colors';
+import { indigo500, pinkA200, black, white, grey50 } from './colors';
 import fonts from './fonts';
 
 export default {
   dark: false,
   roundness: 2,
   colors: {
     primary: indigo500,
-    primaryDark: indigo700,
     accent: pinkA200,
     background: grey50,
     paper: white,

src/types.js

@@ -5,7 +5,6 @@ export type Theme = {
   roundness: number,
   colors: {
     primary: string,
-    primaryDark: string,
     background: string,
     paper: string,
     accent: string,