mirror of https://github.com/akveo/blur-admin
docs(colorscheme): update change colorscheme articles
parent
80ec2f6906
commit
056e9d0a08
|
@ -6,25 +6,21 @@ group: Customization
|
||||||
template: article.jade
|
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`):
|
By default BlurAdmin has two color profiles: mint and blur.
|
||||||
```javascript
|
This article will help you to create your own color profile.
|
||||||
baConfigProvider.changeTheme({blur: true});
|
Let's say you want to make BlurAdmin dark.
|
||||||
|
|
||||||
baConfigProvider.changeColors({
|
First we advice you to take some colorscheme file as a basis.
|
||||||
default: 'rgba(#000000, 0.2)',
|
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.
|
||||||
defaultText: '#ffffff',
|
As we want dark theme, we're taking `blur`.
|
||||||
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`)
|
|
||||||
|
|
||||||
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:
|
1) Copy `src/sass/theme/conf/colorScheme/_blur.scss` to `src/sass/theme/conf/colorScheme/_dark.scss`.
|
||||||
|
|
||||||
|
2) Include your colorscheme file in `src/sass/theme/common.scs`.
|
||||||
|
|
||||||
|
To do this, replace
|
||||||
```scss
|
```scss
|
||||||
@import 'theme/conf/colorScheme/mint';
|
@import 'theme/conf/colorScheme/mint';
|
||||||
```
|
```
|
||||||
|
@ -32,13 +28,33 @@ Note:
|
||||||
to
|
to
|
||||||
|
|
||||||
```scss
|
```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)
|
||||||
|
```
|
||||||
|
|
||||||
4) Run application `gulp serve`
|
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',
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
Here's an example of template with another color scheme:
|
That's basically it! Right now your admin application should look like this:
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
|
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/)
|
Binary file not shown.
Before Width: | Height: | Size: 252 KiB After Width: | Height: | Size: 239 KiB |
|
@ -1,17 +1,25 @@
|
||||||
---
|
---
|
||||||
title: Switching to Blur Theme
|
title: Enabling blur theme
|
||||||
author: kd
|
author: kd
|
||||||
sort: 1000
|
sort: 850
|
||||||
group: Customization
|
group: Customization
|
||||||
template: article.jade
|
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
|
```javascript
|
||||||
baConfigProvider.changeTheme({blur: true});
|
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({
|
baConfigProvider.changeColors({
|
||||||
default: 'rgba(#000000, 0.2)',
|
default: 'rgba(#000000, 0.2)',
|
||||||
defaultText: '#ffffff',
|
defaultText: '#ffffff',
|
||||||
|
@ -20,8 +28,10 @@ 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
|
```scss
|
||||||
@import 'theme/conf/colorScheme/mint';
|
@import 'theme/conf/colorScheme/mint';
|
||||||
|
@ -32,3 +42,13 @@ to
|
||||||
```scss
|
```scss
|
||||||
@import 'theme/conf/colorScheme/blur';
|
@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.
|
Loading…
Reference in New Issue