Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-18 00:10:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
ngx-admin/articles/011-changing-color-scheme/index.html
Alexander Zhukov c318193502 Updates
2017-04-28 16:56:56 +03:00

156 lines
No EOL
9.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<title>ng2-admin documentation - Changing Color Scheme</title>
<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&amp;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">&nbsp;<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">
<h5>Quick Start</h5>
<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">
<h5>Customization</h5>
<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">
<h5>Components</h5>
<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>
<div class="subHeader"></div><p>We tried to make the process of color scheme customization as easy as<span class="widont">&nbsp;</span>possible. </p>
<p>By default ng2-admin has three built-in color profiles: ng2 (default blue scheme), mint and blur.
This article will help you to create your own color profile.
Let’s say you want to make ng2-admin dark<span class="widont">&nbsp;</span>theme.</p>
<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’re taking <code>blue</code>.</p>
<p>1) Copy <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code> to <code>src/app/theme/sass/conf/colorScheme/_dark.scss</code>:
<br><br></p>
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
<p>To do this,<span class="widont">&nbsp;</span>replace</p>
<pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;</span>
</code></pre>
<p>with</p>
<pre><code class="lang-scss"><span class="at_rule">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;</span>
</code></pre>
<p><br><br></p>
<p>3) Change the color scheme<span class="widont">&nbsp;</span>enabled:</p>
<p>Open <code>src/app/theme/theme.config.ts</code>.
Uncomment the following<span class="widont">&nbsp;</span>line</p>
<pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span>
</code></pre>
<p>and put your theme name, in our case it is <code>dark</code></p>
<pre><code class="lang-javascript"> <span class="keyword">this</span>._baConfig.changeTheme({name: <span class="string">'dark'</span>});
</code></pre>
<p>Beside notifying the system which scheme is currently enabled, this also puts a css class to a main element
of the page. Thus you can freely create theme-specific css selectors in your code without breakking other themes’<span class="widont">&nbsp;</span>styles.</p>
<p>For example like<span class="widont">&nbsp;</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>
}
</code></pre>
<p><br><br></p>
<p>4) Change the<span class="widont">&nbsp;</span>colors:</p>
<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>
<pre><code class="lang-sass">$body-bg: #636363;
$bootstrap-panel-bg: rgba(#000000, 0.2);
</code></pre>
<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);
Let’s completely change the <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>
<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.
We also defined a couple of custom colors for dashboard<span class="widont">&nbsp;</span>charts.</p>
<p>That’s basically it! Right now your admin application should look like<span class="widont">&nbsp;</span>this:</p>
<p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p>
<p>For further reference, please look<span class="widont">&nbsp;</span>in</p>
<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>
<li><code>src/app/theme/theme.configProvider.js</code> to understand which javascript colors can be<span class="widont">&nbsp;</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">&nbsp;</span>article</a></li>
</ul>
</div>
</section>
<footer class="wrap">
<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>
</footer>
</div><a href="https://github.com/akveo/ng2-admin" title="Star &amp; Fork on GitHub" class="github-fork-ribbon"></a>
</body>
</html>
Reference in a new issue View git blame Copy permalink