Updated docs for plugin and theme

docs/docs/features/settings-pane.md

@@ -18,7 +18,7 @@ A settings modal is available in the app to allow you customize all the various
 The available options are listed here:
 
 ### `theme` - Specifies the theme
-Options include `light`, `dark`, `dracula`.
+Options include `light`, `dark`, `dracula`, `system`.
 
 ### `language` - Specifies the language
 The options are any of the valid language codes according to: [https://support.crowdin.com/api/language-codes/](https://support.crowdin.com/api/language-codes/).
@@ -45,4 +45,12 @@ _Default: false_
 _Default: false_
 
 ### `plugin.list` - Specifies a list of enabled plugins (requires enableExperimental to be true)
-_Default: []_
+_Default: []_
+Plugins are specified in a string format `<plugin-source>:<plugin-name>@<version>::[<opt>]->[<opt-value>]`:
+
+- `<plugin-source>` _(Optional)_ specifies the source of the plugin. Options include `npm`, `url`, `github`.
+- `<plugin-name>` **_Required_** specifies the name of the plugin. Plugin names must begin with `altair-graphql-plugin-`.
+- `<version>` _(Optional)_ specifies the version of the plugin.
+- `[<opt>]->[<opt-value>]` _(Optional)_ specifies an extran option for the plugin. This is used when you specify the source as `url`. In that case, you need to specify the URL where the plugin would be sourced from.
+
+Valid plugins in string format include: `altair-graphql-plugin-some-plugin`, `npm:altair-graphql-plugin-some-plugin`, `npm:altair-graphql-plugin-some-plugin@0.3.4`, `url:altair-graphql-plugin-some-plugin@0.3.4::[url]->[http://example.com/some-plugin]`

docs/docs/features/theme-customization.md

@@ -4,4 +4,4 @@ parent: Features
 
 ## Multiple Themes
 
-You can use Altair with either the light or dark, or dracula theme, depending on which theme you like. *Support for custom theme is coming very soon*.
+You can use Altair with either the system, light or dark, or dracula theme, depending on which theme you like. *Support for custom theme is coming very soon*.

docs/docs/plugins/writing-plugin.md

@@ -37,29 +37,7 @@ The manifest.json file has the following fields:
 
 #### Developing Plugins Locally
 
-To write a plugin for Altair in local development, you would need to clone the [Altair repository](https://github.com/imolorhe/altair), navigate to the `packages/altair-app` directory, run `yarn` to install dependencies, then `yarn start` to launch the local development server for Altair. You can access the instance of Altair at `http://localhost:4200/`.
-
-Now go to `packages/altair-app/src/app/containers/app/app.component.ts` file and you should see a comment similar to the one below:
-
-```ts
-// this.pluginRegistry.fetchPlugin('altair-graphql-plugin-birdseye', {
-//   pluginSource: 'url',
-//   version: '0.0.4',
-//   url: 'http://localhost:8002/'
-// });
-```
-
-You can uncomment those lines and replace the values according to your local plugin setup. For example, if working on a plugin called `altair-graphql-plugin-some-plugin`, hosted on `http://localhost:8080/`, you would have the following:
-
-```ts
-this.pluginRegistry.fetchPlugin('altair-graphql-plugin-some-plugin', {
-  pluginSource: 'url',
-  version: '0.0.1',
-  url: 'http://localhost:8080/'
-});
-```
-
-After these, ensure you have `enableExperimental` option set to `true` in the settings pane, and restart the Altair app.
+Ensure you have at least version 2.4.7 of Altair installed, and you have `enableExperimental` option set to `true` in the settings pane. In the `plugin.list` in the settings pane, specify your local plugin following this pattern `url:altair-graphql-plugin-some-plugin@0.0.1::[url]->[http://localhost:8080]`. In this example, you are working on a plugin called `altair-graphql-plugin-some-plugin`, hosted on `http://localhost:8080/` (version is optional).
 
 
 ### Sidebar Plugins