mirror of https://github.com/akveo/blur-admin
110 lines
6.9 KiB
HTML
110 lines
6.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="Ramblings of an immor(t)al demigod">
|
||
<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="/blur-admin/css/main.css">
|
||
<link rel="shortcut icon" href="/blur-admin/images/favicon.png">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="nav-main">
|
||
<div class="wrap"><a href="/blur-admin/" class="nav-home"><img src="/blur-admin/images/blur-admin-logo.png" width="36" height="36" class="nav-logo"> <span class="blur-label">Blur</span>Admin</a>
|
||
<ul class="nav-site nav-site-internal">
|
||
<li><a href="/blur-admin/">Home</a></li>
|
||
<li><a href="/blur-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="/blur-admin/articles/001-getting-started/">Getting Started</a></li>
|
||
<li><a href="/blur-admin/articles/002-installation-guidelines/">Installation Guidelines</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Customization</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/011-changing-color-scheme/" class="active">Changing Color Scheme</a></li>
|
||
<li><a href="/blur-admin/articles/014-switch-to-blur-theme/">Enabling blur theme</a></li>
|
||
<li><a href="/blur-admin/articles/012-project-structure/">Project Structure</a></li>
|
||
<li><a href="/blur-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="/blur-admin/articles/051-sidebar/">Sidebar</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-docs section">
|
||
<h3>Other</h3>
|
||
<ul>
|
||
<li><a href="/blur-admin/articles/091-downloads/">Downloads</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 changing color scheme in BlurAdmin as easy as possible. </p>
|
||
<p>By default BlurAdmin has two color profiles: mint and blur.
|
||
This article will help you to create your own color profile.
|
||
Let’s say you want to make BlurAdmin dark.</p>
|
||
<p>First we advice you to take some colorscheme file as a basis.
|
||
For light themes we suggest you to take <code>src/sass/theme/conf/colorScheme/_mint.scss</code> one and for dark take <code>src/sass/theme/conf/colorScheme/_blur.scss</code> one.
|
||
As we want dark theme, we’re taking <code>blur</code>.</p>
|
||
<p>1) Copy <code>src/sass/theme/conf/colorScheme/_blur.scss</code> to <code>src/sass/theme/conf/colorScheme/_dark.scss</code>.</p>
|
||
<p>2) Include your colorscheme file in <code>src/sass/theme/common.scs</code>.</p>
|
||
<p>To do this, replace </p>
|
||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/mint'</span>;
|
||
</code></pre>
|
||
<p>to</p>
|
||
<pre><code class="lang-scss">@<span class="keyword">import</span> <span class="string">'theme/conf/colorScheme/dark'</span>;
|
||
</code></pre>
|
||
<p>Now you can start changing your 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">$default: rgba(#000000, 0.2); //Panel background color
|
||
$body-bg: #F0F3F4; // Body background color
|
||
$default-text: #ffffff; // Default text color
|
||
$help-text: #eeeeee; // Default subtext color
|
||
$label-text: #ffffff; // Text for labels in forms (Basically it should be equal to default-text in most cases)
|
||
</code></pre>
|
||
<p>After this is done, you need to setup javascript to use <strong>same colors</strong> while building charts and other javascript components.
|
||
To do this, add following code to some configuration block, for example to <code>src/app/theme/theme.config.js</code>:</p>
|
||
<pre><code class="lang-javascript"> baConfigProvider.changeColors({
|
||
<span class="attr">default</span>: <span class="string">'#4e4e55'</span>,
|
||
<span class="attr">defaultText</span>: <span class="string">'#e2e2e2'</span>,
|
||
});
|
||
</code></pre>
|
||
<p>That’s basically it! Right now your admin application should look like this:</p>
|
||
<p><img src="/blur-admin/articles/011-changing-color-scheme/new-color-scheme.jpg" alt=""></p>
|
||
<p>For further reference, please look in</p>
|
||
<ul>
|
||
<li>Colorscheme scss file (<code>src/sass/theme/conf/colorScheme/_mint.scss</code> or <code>src/sass/theme/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="/blur-admin/articles/014-switch-to-blur-theme/">following article</a></li>
|
||
</ul>
|
||
|
||
</div>
|
||
</section>
|
||
<footer class="wrap">
|
||
<div class="left">Powered by Angular, Bootstrap, Gulp and 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/blur-admin"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q || []).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-61945105-3', 'auto');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
</body>
|
||
</html>
|