Colored Pages offer easy and flexible use of color themes on your website with utiliy classes as well as your own custom CSS.
They come with six predefined color themes, each containing five different colors. You can specify which color theme is used on a webpage or let user switch between them and let Colored Pages do the work.
How does it look? Check out Colored Pages demo.
Install package via npm
npm install colored-pagesImport
SCSS
@import "~colored-pages/dist/colored-pages"copy and include JS
<script src="/path/to/colored-pages.min.js"></script>Clone this repository.
Import
SCSS
@import "path/to/colored-pages"and include JS
<script src="/path/to/colored-pages.min.js"></script>Make sure to include colored-pages after your custom SCSS in order to override the default variables.
TL;DR
Define SCSS variables for color themes and color your webpage with utility classes listed below. If you need something more complex write your own stylesheets with CSS variables.
First of all, to use Colored Pages themes add data attribute "data-clp-theme" to the body. The value of this attribute should be 'clp-theme-' + 'index of the theme'.
<body data-clp-theme="clp-theme-02">
...
</body>Continue by defining a SCSS map(s) of a color theme(s) you want to use. Each color theme has its own default values. You can override them by declaring up to 6 maps with the following keys in your custom SCSS file:
$clp-theme-01: (
clp01: #c6493a,
clp02: #edf5e1,
clp03: #5cdb95,
clp04: #907163,
clp05: #111111,
);Map variables must be defined as $clp-theme-01, $clp-theme-02, ... $clp-theme-06. The keys (clp01, clp02, ... clp05) must remain the same too.
Only color values can change.
There are four transitions for you to customise that control the color change on specific CSS properties.
$clp-transition-clr // Color
$clp-transition-bg // Background
$clp-transition-stroke // Stroke
$clp-transition-fill // FillThe variables accept the CSS transition property values. The default value is:
color 1.5s ease-in;Often you will want to disable transitions entirely to avoid flash of default theme. Another way would be disabling transitions for a brief moment with JavaScript by adding and removing a class with a wildcard that disables transitions on page load
.disable-onload-transitions * {
transition: none !important;
}You are ready to use colored-pages in your html!
Each utility class
.clp03-clr
.clp01-bg
.clp02-stroke
...is made of two parts:
a) first part tells us which color from the theme is used
.clp03...b) while the second part determines which CSS property will be affected
...-clr // Color
...-bg // Background
...-stroke // Stroke
...-fill // FillFor example, to specify color of the text with the first color value and background of the element with the third, you would write down
<p class="clp01-clr clp03-bg">
Colored Pages made me this way.
</p>When assigning values to color themes keep in mind that certain combinations of colors might not work while others do. More often than not you will find yourself using certain keys for dark or bold colors, while reserving others for light shades.
Whenever utility classes can't be used (for example, WYSIWYG fields), you can apply you custom styles by using Colored Pages CSS variables.
.my-container {
background-color: var(--clp01);
.container-content {
color: var(--clp03);
border-color: var(--clp03);
.icon {
color: var(--clp05);
}
}
}Colored Pages come with theme indexes/switches that allow the user to navigate between color themes. Each theme has a dedicated data attribute. Add it to the element to initialize it as an indicator. That is it! (And don't forget to include JS file that makes all of this possible.)
<span data-clp-select="clp-theme-01">Try this theme</span>
<span data-clp-select="clp-theme-02">or this one</span>
<span data-clp-select="clp-theme-03">or the third</span>
<span data-clp-select="clp-theme-04">and fourth</span>
<span data-clp-select="clp-theme-05">perhaps number 5?</span>Optionally, you can add clp-index class to get Colored Pages styled index (used in the Demo)
<span data-clp-select="clp-theme-05" class="clp-index"></span>Selected color theme is saved in local storage.
| Class | Description |
|---|---|
| .clp01-clr | color property value set to first color of the current theme |
| .clp01-bg | background-color property value set to first color of the current theme |
| .clp01-stroke | stroke property value set to first color of the current theme |
| .clp01-fill | fill property value set to first color of the current theme |
Of course you can chose second, third, fourth and fifth color of the current theme by using clp02-..., clp03-..., clp04-... and clp05-... respectively.
Colored pages use only 5 CSS variables. They are the backbone of Colored Pages.
| Variable | Description |
|---|---|
| var(--clp01) | First color in the theme |
| var(--clp02) | Second color in the theme |
| var(--clp03) | Third color in the theme |
| var(--clp04) | Fourth color in the theme |
| var(--clp05) | Fifth color in the theme |
Extensive list of default SCSS variables.
$clp-theme-01: (
clp01: #c6493a,
clp02: #edf5e1,
clp03: #5cdb95,
clp04: #907163,
clp05: #111111,
) !default;
$clp-theme-02: (
clp01: #081c15,
clp02: #2d6a4f,
clp03: #29c376,
clp04: #b7e4c7,
clp05: #d8f3dc,
) !default;
$clp-theme-03: (
clp01: #522e38,
clp02: #b9375e,
clp03: #f3628e,
clp04: #da7392,
clp05: #ffe0e9,
) !default;
$clp-theme-04: (
clp01: #05668d,
clp02: #028090,
clp03: #00a896,
clp04: #02c39a,
clp05: #f0f3bd,
) !default;
$clp-theme-05: (
clp01: #220901,
clp02: #621708,
clp03: #941b0c,
clp04: #bc3908,
clp05: #f6aa1c,
) !default;
$clp-theme-06: (
clp01: #ffffff,
clp02: #e9ecef,
clp03: #848687,
clp04: #495057,
clp05: #212529,
) !default;
$clp-transition-clr: color 2s ease-in !default;
$clp-transition-bg: background-color 2s ease-in !default;
$clp-transition-stroke: stroke 2s ease-in !default;
$clp-transition-fill: fill 2s ease-in !default;