Docs updates

Author: chanan

docs/_content/SampleCore/altInstall1.html

@@ -1,14 +1,12 @@
-<Styled @bind-Classname="@grey">
-    label: white;
-    background-color: white;
-</Styled>
-
-<Styled @bind-Classname="@bigFont">
+<Styled @bind-Classname="@bigFont">
     label: big-font;
     font-size: 32px;
 </Styled>
 
-<Styled @bind-Classname="@div" Compose1="@grey" Compose2="@bigFont" Compose2If="@_showBig" />
+<Styled @bind-Classname="@div" ComposeBigFont="@bigFont" ComposeBigFontIf="@_showBig">
+    label: white;
+    background-color: white;
+</Styled>
 
 <div class="@div">
     Some text

docs/_content/SampleCore/altInstall2.html

@@ -8,8 +8,6 @@
 
         builder.RootComponents.Add<App>("app");
 
-        builder.RootComponents.Add<ClientSideStyled>("#styled");
-
         await builder.Build().RunAsync();
     }
 }

docs/_content/SampleCore/compose1.html

@@ -1,17 +1,35 @@
 @inject IStyled Styled
 
 <Styled @bind-Classname="@example">
-    color: {colors.primary};
+    color: [colors.primary];
 </Styled>
 
 <p class="@example">Some text</p>
 
+<div>
+    <button @onclick="@onclickRed">Change theme value to red</button>
+</div>
+
+<div>
+    <button @onclick="@onclickHotpink">Change theme value to hotpink</button>
+</div>
+
 @code {
     private string example;
 
     protected override void OnInitialized()
     {
         //Normally this would be defined else where such as in MainLayout.cs
-        Styled.Theme.Values.Add("colors.primary", "hotpink");
+        Styled.SetThemeValue("colors.primary", "hotpink");
+    }
+
+    private void onclickRed()
+    {
+        Styled.SetThemeValue("colors.primary", "red");
+    }
+
+    private void onclickHotpink()
+    {
+        Styled.SetThemeValue("colors.primary", "hotpink");
     }
 }

docs/_content/SampleCore/install1.html

@@ -14,7 +14,7 @@ public static async Task Main(string[] args)
             //Configure Services
 
             //AddBlazorStyled is needed for BlazorStyled to work
-            builder.Services.AddBlazorStyled(isDevelopment: false, isDebug: true);
+            builder.Services.AddBlazorStyled(isDevelopment: false, isDebug: false);
 
             //The following is only used by the sample sites and is not required for BlazorStyled to work
             builder.Services.AddServicesForSampleSites();

docs/_content/SampleCore/install2.html

@@ -34,7 +34,7 @@
     </p>
 
 @code {
-    private string div, grey, bigFont;
+    private string div, bigFont;
     private bool _showBig = false;
 
     private void onclick()

docs/_content/SampleCore/install6.html

@@ -0,0 +1,61 @@
+@page "/install"
+
+<h1>Install</h1>
+
+<h3>Install from Nuget</h3>
+
+<p>Add a reference to BlazorStyled from Nuget: <a href="https://www.nuget.org/packages/BlazorStyled/"><img src="https://img.shields.io/nuget/vpre/BlazorStyled.svg" /></a></p>
+
+<h3>Usage</h3>
+
+<p>
+    Add BlazorStyled to <code>Program.cs</code> (Client side blazor / WASM) or to your <code>Startup.cs</code> (Server side blazor).
+</p>
+
+<PrettyCode CodeFile="_content/SampleCore/install1.html" HighlightLines="7" Title="Client Side - Program.cs" />
+
+<PrettyCode CodeFile="_content/SampleCore/install5.html" HighlightLines="7" Title="Server side - Startup.cs" />
+
+<p>Add the reference to the package to your <code>_Imports.razor</code> file:</p>
+
+<PrettyCode CodeFile="_content/SampleCore/install3.html" HighlightLines="9" Title="_Imports.razor" />
+
+<h3>Options</h3>
+
+<p><code>AddBlazorStyled</code> has two options that can be useful during development:</p>
+
+<table>
+    <thead>
+        <tr>
+            <th>Option</th>
+            <th>Default</th>
+            <th>Description</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><code>isDevelopment</code></td>
+            <td><code>false</code></td>
+            <td>
+                When <code>true</code>, css rules are written to the style tag in the head using <code>innerText</code>. This allows for editing of the rules in the javascript debugger. <br />
+                When <code>false</code>, css rules are written to the style tag using <code>insertRule</code>. This slightly faster and prevents rules from being edited in the javascript debugger.
+            </td>
+        </tr>
+        <tr>
+            <td><code>isDebug</code></td>
+            <td><code>false</code></td>
+            <td>
+                When <code>true</code>, debug info in outputted to the javascript console.
+            </td>
+        </tr>
+    </tbody>
+</table>
+
+<h3>API Usage</h3>
+
+<p>
+    Optionally, If you want to use the API (from a "code behind" for example), then inject <code>IStyled</code> into your component. If you are using
+    the <code>&lt;Styled /></code> class, you do not need to inject <code>IStyled</code>
+</p>
+
+<PrettyCode CodeFile="_content/SampleCore/install4.html" ShowLineNumbers="false" />