mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-19 00:40:12 +01:00
150 lines
9 KiB
HTML
150 lines
9 KiB
HTML
|
<!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>BlurAdmin 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&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">
|
|||
|
|
<h3>Quick Start</h3>
|
|||
|
|
<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">
|
|||
|
|
<h3>Customization</h3>
|
|||
|
|
<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">
|
|||
|
|
<h3>Components</h3>
|
|||
|
|
<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 possible. </p>
|
|||
|
|
<p>By default ng2-admin has three built-in color profiles: ng2 (default blue sheme), mint and blur.
|
|||
|
|
This article will help you to create your own color profile.
|
|||
|
|
Let’s say you want to make ng2-admin dark theme.</p>
|
|||
|
|
<p>First we advice you to take some colorscheme file as a basis.
|
|||
|
|
For light themes we suggest taking <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> one and for dark <code>src/app/theme/sass/conf/colorScheme/_blue.scss</code> one.
|
|||
|
|
As we want a dark theme, we’re taking <code>ng2</code>.</p>
|
|||
|
|
<p>1) Copy <code>src/app/theme/sass/conf/colorScheme/_mint.scss</code> to <code>src/app/theme/sass/conf/colorScheme/_dark.scss</code>.</p>
|
|||
|
|
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
|
|||
|
|
<p>To do this, replace </p>
|
|||
|
|
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;
|
|||
|
|
</code></pre>
|
|||
|
|
<p>to</p>
|
|||
|
|
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;
|
|||
|
|
</code></pre>
|
|||
|
|
<p>3) Rename the color scheme enabled</p>
|
|||
|
|
<p>Open <code>src/app/theme/theme.config.ts</code>.
|
|||
|
|
Uncomment the following line</p>
|
|||
|
|
<pre><code class="lang-javascript"> <span class="comment">//this._baConfig.changeTheme({name: 'my-theme'});</span>
|
|||
|
|
</code></pre>
|
|||
|
|
<p>and put you 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 this notifies the system which scheme currently enabled, it also puts a css class to a main element of the page. Thus you can freely create theme-specific css selectors in you code without braking other themes’ styles.</p>
|
|||
|
|
<p>For example like this:</p>
|
|||
|
|
<pre><code class="lang-scss">. dark <span class="selector-class">.card-body</span> {
|
|||
|
|
<span class="attribute">background-color</span>: white;
|
|||
|
|
}
|
|||
|
|
</code></pre>
|
|||
|
|
<p>4) Change the colors</p>
|
|||
|
|
<p>Now your can start changing the colors.
|
|||
|
|
For example, after playing a bit with different colors, we changed 5 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 <strong>same colors</strong>. These color 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 version of those using <code>colorHelper</code> methods.
|
|||
|
|
We also defined a couple of custom colors for dashboard charts.</p>
|
|||
|
|
<p>That’s basically it! Right now your admin application should look like this:</p>
|
|||
|
|
<p><img src="/ng2-admin/articles/011-changing-color-scheme/new-color-scheme.png" alt=""></p>
|
|||
|
|
<p>For further reference, please look 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 changed</li>
|
|||
|
|
<li>If you want to know how to change theme to blur, read <a href="/ng2-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<footer class="wrap">
|
|||
|
|
<div class="left">Powered by Angular 2, Bootstrap 4, Webpack and many more...</div>
|
|||
|
|
<div class="right">© 2015–2016 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 & Fork on GitHub" class="github-fork-ribbon"></a>
|
|||
|
|
</body>
|
|||
|
|
</html>
|