docs(colorscheme): update change colorscheme articles

docs/contents/articles/011-changing-color-scheme/index.md

@@ -6,39 +6,55 @@ group: Customization
 template: article.jade
 ---
 
-If you want to change template color scheme, you need to do 4 simple steps:
+We tried to make the process of changing color scheme in BlurAdmin as easy as possible. 
 
-1) Override theme and colors in config (`src/app/theme/theme.config.js`):
-```javascript
-  baConfigProvider.changeTheme({blur: true});
+By default BlurAdmin has two color profiles: mint and blur.
+This article will help you to create your own color profile.
+Let's say you want to make BlurAdmin dark.
 
-  baConfigProvider.changeColors({
-    default: 'rgba(#000000, 0.2)',
-    defaultText: '#ffffff',
-    dashboard: {
-      white: '#ffffff',
-    },
-  });
-```
-Note:
-- you shouldn't change default config directly (`theme.configProvider.js`). Instead of that you can override color scheme on the configuration step (`theme.config.js`)
+First we advice you to take some colorscheme file as a basis. 
+For light themes we suggest you to take `src/sass/theme/conf/colorScheme/_mint.scss` one and for dark take `src/sass/theme/conf/colorScheme/_blur.scss` one.
+As we want dark theme, we're taking `blur`.
+
+1) Copy `src/sass/theme/conf/colorScheme/_blur.scss` to `src/sass/theme/conf/colorScheme/_dark.scss`.
 
-2) Create your own color scheme, like `src/sass/theme/conf/colorScheme/_mint.scss` and `src/sass/theme/conf/colorScheme/_blur.scss`. And replace it in `src/sass/theme/common.scss` file:
+2) Include your colorscheme file in `src/sass/theme/common.scs`.
 
+To do this, replace 
 ```scss
 @import 'theme/conf/colorScheme/mint';
 ```
 
 to
 
 ```scss
-@import 'theme/conf/colorScheme/custom';
+@import 'theme/conf/colorScheme/dark';
 ```
 
-3) Replace background images: `src/app/assets/img/blur-bg.jpg` and `src/app/assets/img/blur-bg-blurred.jpg`
+Now you can start changing your colors.
+For example, after playing a bit with different colors, we changed 5 first main variables in `_dark.scss` file:
+```sass
+$default: rgba(#000000, 0.2); //Panel background color
+$body-bg: #F0F3F4; // Body background color
+$default-text: #ffffff; // Default text color
+$help-text: #eeeeee; // Default subtext color
+$label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases)
+```
+
+After this is done, you need to setup javascript to use **same colors** while building charts and other javascript components.
+To do this, add following code to some configuration block, for example to `src/app/theme/theme.config.js`:
+```javascript
+  baConfigProvider.changeColors({
+    default: '#4e4e55',
+    defaultText: '#e2e2e2',
+  });
+``` 
 
-4) Run application `gulp serve`
+That's basically it! Right now your admin application should look like this:
 
-Here's an example of template with another color scheme:
+![](new-color-scheme.jpg)
 
-![](new-color-scheme.jpg)
+For further reference, please look in
+- Colorscheme scss file (`src/sass/theme/conf/colorScheme/_mint.scss` or `src/sass/theme/conf/colorScheme/_blur.scss`)
+- `src/app/theme/theme.configProvider.js` to understand which javascript colors can be changed
+- If you want to know how to change theme to blur, read [following article](/blur-admin/articles/014-switch-to-blur-theme/)

docs/contents/articles/014-switch-to-blur-theme/index.md

@@ -1,17 +1,25 @@
 ---
-title: Switching to Blur Theme
+title: Enabling blur theme
 author: kd
-sort: 1000
+sort: 850
 group: Customization
 template: article.jade
 ---
 
-If you want to switch theme to the blur, you need to do 2 simple steps:
+If you want to switch theme to the blur, you need to follow 3 simple steps:
 
-1) Override theme and colors in config (`src/app/theme/theme.config.js`):
+1) Blur theme needs some javascript to calculate initial background offsets for panels.
+That's why first thing you need to do is enable that code.
+This should be done in Angular **configuration block**. 
+For example you can add following lines to `src/app/theme/theme.config.js`:
 ```javascript
   baConfigProvider.changeTheme({blur: true});
+```
 
+2) As well you need to change some colors. 
+For example *Mint*'s default gray text color doesn't look good on blurred panels.
+For our blur theme we use following configuration:
+```javascript
   baConfigProvider.changeColors({
     default: 'rgba(#000000, 0.2)',
     defaultText: '#ffffff',
@@ -20,15 +28,27 @@ If you want to switch theme to the blur, you need to do 2 simple steps:
     },
   });
 ```
+3) CSS should also be recompiled. 
+Before running build command, we suggest you to switch to *blur* color profile.
+To do this replace theme in file `src/sass/theme/common.scss`:
 
-2) Replace theme in `src/sass/theme/common.scss` file:
-
+
 ```scss
 @import 'theme/conf/colorScheme/mint';
 ```
-
+ 
 to
-
+ 
 ```scss
 @import 'theme/conf/colorScheme/blur';
-```
+```
+
+3.1) If you would like to use some different background, replace following images:
+
+- `src/app/assets/img/blur-bg.jpg` (main background image)
+- `src/app/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
+
+We suggest using 10px Gaussian blur to blur original image.
+
+_________________________________________ 
+That's it! You have successfully blurred your theme! Run `gulp serve` and check it out.