diff --git a/guide/making-a-pear-app.md b/guide/making-a-pear-app.md index d4afb1a..c2b463e 100644 --- a/guide/making-a-pear-app.md +++ b/guide/making-a-pear-app.md @@ -90,7 +90,27 @@ function onMessageAdded(from, message) { } ``` -## Step 3. Run the app +## Step 3. Update gui settings + +To make sure that the app looks the way intended, update the `pear` property in `package.json`. See all the possibly options in the [reference doc](../reference/configuration.md). + +Open `package.json` and update the `"pear"` property: + +``` +{ + ... + "pear": { + "gui": { + "backgroundColor": "#1F2430", + "height": 540, + "width": 720 + } + } + ... +} +``` + +## Step 4. Run the app Now it's time to write the app. diff --git a/guide/starting-a-pear-project.md b/guide/starting-a-pear-project.md index b478249..591ae4f 100644 --- a/guide/starting-a-pear-project.md +++ b/guide/starting-a-pear-project.md @@ -41,7 +41,29 @@ While keeping the app open with `pear dev`, open `index.html` in a code editor. ![Automatic reload](../assets/chat-app-2.png) -## Step 4. Create a basic UI +## Step 4. Chagne gui settings + +It's possible to change various settings with Pear. This is done with the `pear` property in `package.json`. See all the possibly options in the [reference doc](../reference/configuration.md). + +For now, open `package.json` and update it : +``` +{ + ... + "pear": { + "gui": { + "backgroundColor": "#00ff00", + "height": 540, + "width": 720, + "alwaysOnTop": true + } + } + ... +} +``` + +When running the app now, it will be very green, and always stay on top. + +## Step 5. Create a basic UI To add some more interesting UI, let's have an example of a chat app, where users are able to create or join chat rooms and write messages to each other.