Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-20 17:30:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Updates

Browse source
This commit is contained in:
Alexander Zhukov 2017-02-28 14:37:20 +03:00
parent be84925112
commit 00a47bf22f
9 changed files with 93 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

34
articles/011-changing-color-scheme/index.html
View file

@ -50,10 +50,10 @@
</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&nbsp;possible. </p>
<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 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&nbsp;theme.</p>
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>.
@ -61,30 +61,30 @@ As we want a dark theme, we’re taking <code>blue</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>:
<br><br></p>
<p>2) Include your colorscheme file in <code>src/app/theme/sass/conf/conf.scss</code>.</p>
<p>To do this,&nbsp;replace</p>
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'colorSchemes/ng2'</span>;
<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="keyword">import</span> <span class="string">'colorSchemes/dark'</span>;
<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&nbsp;enabled:</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&nbsp;line</p>
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’&nbsp;styles.</p>
<p>For example like&nbsp;this:</p>
<pre><code class="lang-scss">. dark <span class="selector-class">.card-body</span> {
<span class="attribute">background-color</span>: white;
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&nbsp;colors:</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;
@ -135,14 +135,14 @@ To do this, add the following code to the configuration block inside <code>src/a
});
</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&nbsp;charts.</p>
<p>That’s basically it! Right now your admin application should look like&nbsp;this:</p>
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&nbsp;in</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&nbsp;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&nbsp;article</a></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>