2016-05-25 13:42:47 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" >
< meta name = "viewport" content = "width=device-width" >
< meta name = "keywords" content = "admin,dashboard,template,angular,bootstrap,blur,panel,html,css,javascript" >
2016-07-12 16:34:59 +03:00
< title > ng2-admin documentation - Changing Color Scheme< / title >
2016-05-25 13:42:47 +03:00
< link rel = "alternate" href = "http://localhost:8080/feed.xml" type = "application/rss+xml" title = "" >
< link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900|Anonymous+Pro:400,700,400italic,700italic&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic" >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" >
< link rel = "stylesheet" href = "/ng2-admin/css/main.css" >
< link rel = "shortcut icon" href = "/ng2-admin/images/favicon.png" >
< / head >
< body >
< div class = "container" >
< div class = "nav-main" >
< div class = "wrap" > < a href = "/ng2-admin/" class = "nav-home" > < img src = "/ng2-admin/images/logo.png" width = "24" height = "24" class = "nav-logo" > < span class = "blur-label" > ng2-< / span > admin< / a >
< ul class = "nav-site nav-site-internal" >
< li > < a href = "/ng2-admin/" > Home< / a > < / li >
< li > < a href = "/ng2-admin/articles/001-getting-started/" class = "active" > Docs< / a > < / li >
< / ul > < span class = "nav-docs-right" > Need some help? Let us know! < a href = "mailto:contact@akveo.com" > contact@akveo.com< / a > < / span >
< / div >
< / div >
< section class = "content wrap documentationContent" >
< div class = "nav-docs" >
< div class = "nav-docs section" >
2016-07-28 17:26:09 +03:00
< h5 > Quick Start< / h5 >
2016-05-25 13:42:47 +03:00
< ul >
< li > < a href = "/ng2-admin/articles/001-getting-started/" > Getting Started< / a > < / li >
< li > < a href = "/ng2-admin/articles/002-installation-guidelines/" > Installation Guidelines< / a > < / li >
< / ul >
< / div >
< div class = "nav-docs section" >
2016-07-28 17:26:09 +03:00
< h5 > Customization< / h5 >
2016-05-25 13:42:47 +03:00
< ul >
< li > < a href = "/ng2-admin/articles/011-changing-color-scheme/" class = "active" > Changing Color Scheme< / a > < / li >
< li > < a href = "/ng2-admin/articles/014-switch-to-blur-theme/" > Enabling blur theme< / a > < / li >
< li > < a href = "/ng2-admin/articles/012-project-structure/" > Project Structure< / a > < / li >
< li > < a href = "/ng2-admin/articles/013-create-new-page/" > Create New Page< / a > < / li >
< / ul >
< / div >
< div class = "nav-docs section" >
2016-07-28 17:26:09 +03:00
< h5 > Components< / h5 >
2016-05-25 13:42:47 +03:00
< ul >
< li > < a href = "/ng2-admin/articles/016-spinner/" > Theme Spinner< / a > < / li >
< li > < a href = "/ng2-admin/articles/015-sidebar/" > Sidebar< / a > < / li >
< / ul >
< / div >
< / div >
< div class = "inner-content" >
< h1 > Changing Color Scheme< / h1 >
2017-02-28 14:37:20 +03:00
< div class = "subHeader" > < / div > < p > We tried to make the process of color scheme customization as easy as< span class = "widont" > < / span > possible. < / p >
2017-04-28 16:56:56 +03:00
< p > By default ng2-admin has three built-in color profiles: ng2 (default blue scheme), mint and blur.
2016-05-25 13:42:47 +03:00
This article will help you to create your own color profile.
2017-02-28 14:37:20 +03:00
Let’ < span class = "widont" > < / span > theme.< / p >
2016-09-20 11:36:39 +03:00
< p > First we advise you to take some existing colorscheme file as a starting point.
For light themes we suggest taking < code > src/app/theme/sass/conf/colorScheme/_mint.scss< / code > and for
dark < code > src/app/theme/sass/conf/colorScheme/_blue.scss< / code > .
As we want a dark theme, we’ < code > blue< / code > .< / p >
2017-04-28 16:56:56 +03:00
< p > 1) Copy < code > src/app/theme/sass/conf/colorScheme/_blue.scss< / code > to < code > src/app/theme/sass/conf/colorScheme/_dark.scss< / code > :
2016-05-25 14:35:57 +03:00
< br > < br > < / p >
2016-05-25 13:42:47 +03:00
< p > 2) Include your colorscheme file in < code > src/app/theme/sass/conf/conf.scss< / code > .< / p >
2017-02-28 14:37:20 +03:00
< p > To do this,< span class = "widont" > < / span > replace< / p >
< pre > < code class = "lang-scss" > < span class = "at_rule" > @< span class = "keyword" > import< / span > < span class = "string" > 'colorSchemes/ng2'< / span > ;< / span >
2016-05-25 13:42:47 +03:00
< / code > < / pre >
2016-09-20 11:36:39 +03:00
< p > with< / p >
2017-02-28 14:37:20 +03:00
< pre > < code class = "lang-scss" > < span class = "at_rule" > @< span class = "keyword" > import< / span > < span class = "string" > 'colorSchemes/dark'< / span > ;< / span >
2016-05-25 13:42:47 +03:00
< / code > < / pre >
2016-05-25 14:35:57 +03:00
< p > < br > < br > < / p >
2017-02-28 14:37:20 +03:00
< p > 3) Change the color scheme< span class = "widont" > < / span > enabled:< / p >
2016-05-25 13:42:47 +03:00
< p > Open < code > src/app/theme/theme.config.ts< / code > .
2017-02-28 14:37:20 +03:00
Uncomment the following< span class = "widont" > < / span > line< / p >
2016-05-25 13:42:47 +03:00
< pre > < code class = "lang-javascript" > < span class = "comment" > //this._baConfig.changeTheme({name: 'my-theme'});< / span >
< / code > < / pre >
2016-09-20 11:36:39 +03:00
< p > and put your theme name, in our case it is < code > dark< / code > < / p >
2016-05-25 13:42:47 +03:00
< pre > < code class = "lang-javascript" > < span class = "keyword" > this< / span > ._baConfig.changeTheme({name: < span class = "string" > 'dark'< / span > });
< / code > < / pre >
2016-09-20 11:36:39 +03:00
< p > Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element
2017-02-28 14:37:20 +03:00
of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes’ < span class = "widont" > < / span > styles.< / p >
< p > For example like< span class = "widont" > < / span > this:< / p >
< pre > < code class = "lang-scss" > . dark < span class = "class" > .card-body< / span > {
< span class = "attribute" > background-color< / span > < span class = "value" > : white;< / span >
2016-05-25 13:42:47 +03:00
}
< / code > < / pre >
2016-05-25 14:35:57 +03:00
< p > < br > < br > < / p >
2017-02-28 14:37:20 +03:00
< p > 4) Change the< span class = "widont" > < / span > colors:< / p >
2016-09-20 11:36:39 +03:00
< p > Now you can start changing the colors.
For example, after playing a bit with different colors, we changed the 2 first main variables in < code > _dark.scss< / code > file:< / p >
2016-05-25 13:42:47 +03:00
< pre > < code class = "lang-sass" > $body-bg: #636363;
$bootstrap-panel-bg: rgba(#000000, 0.2);
< / code > < / pre >
2016-09-20 11:36:39 +03:00
< p > After this is done, you need to setup javascript to use the < strong > same colors< / strong > . These colors
are used for javascript charts and other components (maps, etc);
2016-05-25 13:42:47 +03:00
Let’ < span class = "caps" > JS< / span > colors to a new set.
To do this, add the following code to the configuration block inside < code > src/app/theme/theme.config.ts< / code > :< / p >
< pre > < code class = "lang-javascript" > < span class = "keyword" > let< / span > colorScheme = {
primary: < span class = "string" > '#209e91'< / span > ,
info: < span class = "string" > '#2dacd1'< / span > ,
success: < span class = "string" > '#90b900'< / span > ,
warning: < span class = "string" > '#dfb81c'< / span > ,
danger: < span class = "string" > '#e85656'< / span > ,
};
< span class = "keyword" > this< / span > ._baConfig.changeColors({
< span class = "keyword" > default< / span > : < span class = "string" > '#4e4e55'< / span > ,
defaultText: < span class = "string" > '#e2e2e2'< / span > ,
border: < span class = "string" > '#dddddd'< / span > ,
borderDark: < span class = "string" > '#aaaaaa'< / span > ,
primary: colorScheme.primary,
info: colorScheme.info,
success: colorScheme.success,
warning: colorScheme.warning,
danger: colorScheme.danger,
primaryLight: colorHelper.tint(colorScheme.primary, < span class = "number" > 30< / span > ),
infoLight: colorHelper.tint(colorScheme.info, < span class = "number" > 30< / span > ),
successLight: colorHelper.tint(colorScheme.success, < span class = "number" > 30< / span > ),
warningLight: colorHelper.tint(colorScheme.warning, < span class = "number" > 30< / span > ),
dangerLight: colorHelper.tint(colorScheme.danger, < span class = "number" > 30< / span > ),
primaryDark: colorHelper.shade(colorScheme.primary, < span class = "number" > 15< / span > ),
infoDark: colorHelper.shade(colorScheme.info, < span class = "number" > 15< / span > ),
successDark: colorHelper.shade(colorScheme.success, < span class = "number" > 15< / span > ),
warningDark: colorHelper.shade(colorScheme.warning, < span class = "number" > 15< / span > ),
dangerDark: colorHelper.shade(colorScheme.danger, < span class = "number" > 15< / span > ),
dashboard: {
blueStone: < span class = "string" > '#005562'< / span > ,
surfieGreen: < span class = "string" > '#0e8174'< / span > ,
silverTree: < span class = "string" > '#6eba8c'< / span > ,
gossip: < span class = "string" > '#b9f2a1'< / span > ,
white: < span class = "string" > '#10c4b5'< / span > ,
},
});
< / code > < / pre >
2016-09-20 11:36:39 +03:00
< p > Here we defined a list of main colors < code > colorScheme< / code > and then made light and dark versions of those using < code > colorHelper< / code > methods.
2017-02-28 14:37:20 +03:00
We also defined a couple of custom colors for dashboard< span class = "widont" > < / span > charts.< / p >
< p > That’ < span class = "widont" > < / span > this:< / p >
2016-05-25 13:42:47 +03:00
< p > < img src = "/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt = "" > < / p >
2017-02-28 14:37:20 +03:00
< p > For further reference, please look< span class = "widont" > < / span > in< / p >
2016-05-25 13:42:47 +03:00
< ul >
< li > Colorscheme scss file (< code > src/app/theme/sass/conf/colorScheme/_ng2.scss< / code > , < code > src/app/theme/sass/conf/colorScheme/_mint.scss< / code > and < code > src/app/theme/sass/conf/colorScheme/_blur.scss< / code > )< / li >
2017-02-28 14:37:20 +03:00
< li > < code > src/app/theme/theme.configProvider.js< / code > to understand which javascript colors can be< span class = "widont" > < / span > changed< / li >
< li > If you want to know how to change the theme to blur, read the < a href = "/ng2-admin/articles/014-switch-to-blur-theme/" > following< span class = "widont" > < / span > article< / a > < / li >
2016-05-25 13:42:47 +03:00
< / ul >
< / div >
< / section >
< footer class = "wrap" >
2017-04-28 16:56:56 +03:00
< div class = "left" > Powered by Angular, Bootstrap 4, Angular CLI and many more...< / div >
< div class = "right" > © 2017 Akveo LLC< br / > Documentation licensed under < a href = "https://creativecommons.org/licenses/by/4.0/" > CC BY 4.0< / a > .< / div >
2016-05-25 13:42:47 +03:00
< / footer >
< / div > < a href = "https://github.com/akveo/ng2-admin" title = "Star & Fork on GitHub" class = "github-fork-ribbon" > < / a >
< / body >
< / html >
