86 lines
2.4 KiB
Markdown
86 lines
2.4 KiB
Markdown
|
---
|
||
|
|
title: Enabling blur theme
|
||
|
|
author: kd
|
||
|
|
sort: 850
|
||
|
|
group: Customization
|
||
|
|
template: article.jade
|
||
|
|
---
|
||
|
|
|
||
|
|
If you want to switch theme to the blur, you need to follow 3 simple steps:
|
||
|
|
|
||
|
|
1) Blur color scheme needs some javascript to calculate initial background offsets for panels.
|
||
|
|
That's why we need to tell the system that we want to use blur theme by specifying this in `src/app/theme/theme.config.ts`:
|
||
|
|
```javascript
|
||
|
|
this._baConfig.changeTheme({name: 'blur'});
|
||
|
|
```
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
2) Also you need to change some colors.
|
||
|
|
For our blur theme we use the following configuration in `src/app/theme/theme.config.ts`:
|
||
|
|
```javascript
|
||
|
|
let colorScheme = {
|
||
|
|
primary: '#209e91',
|
||
|
|
info: '#2dacd1',
|
||
|
|
success: '#90b900',
|
||
|
|
warning: '#dfb81c',
|
||
|
|
danger: '#e85656',
|
||
|
|
};
|
||
|
|
this._baConfig.changeColors({
|
||
|
|
default: '#4e4e55',
|
||
|
|
defaultText: '#e2e2e2',
|
||
|
|
border: '#dddddd',
|
||
|
|
borderDark: '#aaaaaa',
|
||
|
|
|
||
|
|
primary: colorScheme.primary,
|
||
|
|
info: colorScheme.info,
|
||
|
|
success: colorScheme.success,
|
||
|
|
warning: colorScheme.warning,
|
||
|
|
danger: colorScheme.danger,
|
||
|
|
|
||
|
|
primaryLight: colorHelper.tint(colorScheme.primary, 30),
|
||
|
|
infoLight: colorHelper.tint(colorScheme.info, 30),
|
||
|
|
successLight: colorHelper.tint(colorScheme.success, 30),
|
||
|
|
warningLight: colorHelper.tint(colorScheme.warning, 30),
|
||
|
|
dangerLight: colorHelper.tint(colorScheme.danger, 30),
|
||
|
|
|
||
|
|
primaryDark: colorHelper.shade(colorScheme.primary, 15),
|
||
|
|
infoDark: colorHelper.shade(colorScheme.info, 15),
|
||
|
|
successDark: colorHelper.shade(colorScheme.success, 15),
|
||
|
|
warningDark: colorHelper.shade(colorScheme.warning, 15),
|
||
|
|
dangerDark: colorHelper.shade(colorScheme.danger, 15),
|
||
|
|
|
||
|
|
dashboard: {
|
||
|
|
blueStone: '#005562',
|
||
|
|
surfieGreen: '#0e8174',
|
||
|
|
silverTree: '#6eba8c',
|
||
|
|
gossip: '#b9f2a1',
|
||
|
|
white: '#10c4b5',
|
||
|
|
},
|
||
|
|
});
|
||
|
|
```
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
3) CSS should also be recompiled.
|
||
|
|
Before running build command, switch to *blur* color profile.
|
||
|
|
To do so replace theme in `src/app/theme/sass/conf/conf.scss`:
|
||
|
|
|
||
|
|
```scss
|
||
|
|
@import 'colorSchemes/ng2';
|
||
|
|
```
|
||
|
|
|
||
|
|
to
|
||
|
|
|
||
|
|
```scss
|
||
|
|
@import 'colorSchemes/blur';
|
||
|
|
```
|
||
|
|
|
||
|
|
Additionaly, if you would like to use some different background, replace the following images:
|
||
|
|
|
||
|
|
- `src/assets/img/blur-bg.jpg` (main background image)
|
||
|
|
- `src/assets/img/blur-bg-blurred.jpg` (blurred background image used on panels)
|
||
|
|
|
||
|
|
We suggest using 10px Gaussian blur to blur an original image.
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
That's it! You have successfully blurred your theme! Run `npm start` and check it out.
|