Theme Colors

Updated on

Our template goes with an ability to change template color. We provide 24 predefined colors.

Change Theme Color

To change theme color using existig color add appropriate class (theme-color-33d685) on the <html> tag and link to appropriate external style sheet ( green.css ).

<html lang="en" class="theme-color-33d685">
   <head>
      ...
      <link rel="stylesheet" type="text/css" href="style.css">
      <link rel="stylesheet" type="text/css" href="colors/green.css">
   </head>
   ...
</html>

Theme colors table

Color HEX format CSS File Color Class
Amber #fec107 amber.css theme-color-fec107
Blue #1a77d4 blue.css theme-color-1a77d4
Coral #e8676b coral.css theme-color-e8676b
Cyan #07aaf5 cyan.css theme-color-07aaf5
Green #07cb79 green.css theme-color-07cb79
Indigo #5d6cc1 indigo.css theme-color-5d6cc1
Lime #8dc24c lime.css theme-color-8dc24c
Orange #ff9801 orange.css theme-color-ff9801
Pale Coral #ffcfd3 pale-coral.css theme-color-ffcfd3
Pale Cyan #83d5fb pale-cyan.css theme-color-83d5fb
Pale Green #a7d9a8 pale-green.css theme-color-a7d9a8
Pale Pink #fbbdd4 pale-pink.css theme-color-fbbdd4
Pale Purple #c7ccea pale-purple.css theme-color-c7ccea
Pale Red #d1a3a6 pale-red.css theme-color-d1a3a6
Pale Teal #b4e1dc pale-teal.css theme-color-b4e1dc
Pale Violet #e2bfe7 pale-violet.css theme-color-e2bfe7
Pink #ec407a pink.css theme-color-ec407a
Purple #673bb7 purple.css theme-color-673bb7
Red #e83b35 red.css theme-color-e83b35
Royal Blue #3f51b5 royal-blue.css theme-color-3f51b5
Teal #27a79a teal.css theme-color-27a79a
Turquoise #56c8d2 turquoise.css theme-color-56c8d2
Violet #8e45ae violet.css theme-color-8e45ae
Yellow #ffde03 yellow.css theme-color-ffde03

Use Custom Color

If you want to use your custom theme color, then do following steps:
  1. Choose your color in HEX format (for example #98002b)
  2. Create new css file in colors folder ( for example cherry.css )
  3. Copy following css in you created file 

    .theme-color-[custom-color] a,
.theme-color-[custom-color] blockquote:before,
.theme-color-[custom-color] .contact-map .contact-info a:hover,
.theme-color-[custom-color] .interests-list i,
.theme-color-[custom-color] .input-field.used label,
.theme-color-[custom-color] .logo span,
.theme-color-[custom-color] #map .map-icon,
.theme-color-[custom-color] .nav-wrap .btn-mobile-nav,
.theme-color-[custom-color] .page-404 h2 span,
.theme-color-[custom-color] .post-box .post-title a:hover,
.theme-color-[custom-color] .post-single .post-title a:hover,
.theme-color-[custom-color] .post-comments .section-title,
.theme-color-[custom-color] .ref-box .person-speech:before,
.theme-color-[custom-color] .timeline-box .date,
.theme-color-[custom-color] .widget-title,
.theme-color-[custom-color] .widget_meta ul li a:hover,
.theme-color-[custom-color] .widget_archive ul li a:hover,
.theme-color-[custom-color] .widget_nav_menu ul li a:hover,
.theme-color-[custom-color] .widget_categories ul li a:hover,
.theme-color-[custom-color] .widget_recent_entries ul li a:hover,
.theme-color-[custom-color] .widget_recent_comments ul li a:hover,
.theme-color-[custom-color] .widget_search .search-form:before,
.theme-color-[custom-color] .widget-popuplar-posts .post-title a:hover,
.theme-color-[custom-color] .widget-recent-posts .post-title a:hover {
      color: #[custom-color];
}

.theme-color-[custom-color] ins,
.theme-color-[custom-color] mark,
.theme-color-[custom-color] .btn-primary,
.theme-color-[custom-color] .btn-primary-outer,
.theme-color-[custom-color] .btn-sidebar-close,
.theme-color-[custom-color] .calendar-busy .calendar-body td .current-day,
.theme-color-[custom-color] .calendar-busy .calendar-today .date,
.theme-color-[custom-color] .filter .active:after,
.theme-color-[custom-color] .filter-bar .filter-bar-line,
.theme-color-[custom-color] .input-field .line:before,
.theme-color-[custom-color] .input-field .line:after,
.theme-color-[custom-color] .mobile-nav,
.theme-color-[custom-color] .nav > ul > li > a > span,
.theme-color-[custom-color] .post-datetime,
.theme-color-[custom-color] .profile-social,
.theme-color-[custom-color] .profile-preword span,
.theme-color-[custom-color] .progress-bar .bar-fill,
.theme-color-[custom-color] .progress-bar .bar-line:after,
.theme-color-[custom-color] .price-box.box-primary .btn,
.theme-color-[custom-color] .price-box.box-primary .price-box-top,
.theme-color-[custom-color] .profile-list .button,
.theme-color-[custom-color] .pagination .page-numbers.current,
.theme-color-[custom-color] .pagination .page-numbers.current:hover,
.theme-color-[custom-color] .pagination .page-numbers:active,
.theme-color-[custom-color] .pagination .page-numbers.next:active,
.theme-color-[custom-color] .pagination .page-numbers.prev:active,
.theme-color-[custom-color] .timeline-bar,
.theme-color-[custom-color] .timeline-box .dot,
.theme-color-[custom-color] .timeline-box-compact .date span,
.theme-color-[custom-color] .widget_tag_cloud a:hover {
       background-color: #[custom-color];
}

.theme-color-[custom-color] .mejs-container .mejs-controls .mejs-time-rail .mejs-time-current,
.theme-color-[custom-color] .mejs-container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
       background: #[custom-color];
}

.theme-color-[custom-color] .timeline-box-inner,
.theme-color-[custom-color] .price-box.box-primary .btn,
.theme-color-[custom-color] .widget_search .search-form,
.theme-color-[custom-color] .widget_tag_cloud a:hover {
       border-color: #[custom-color]; }

.theme-color-[custom-color] .page-404 h2 span:before,
.theme-color-[custom-color] .profile-preword span:before,
.theme-color-[custom-color] .timeline-box-compact .date span:before {
       border-left-color: #[custom-color];
}

.theme-color-[custom-color] .price-box.box-primary .price-box-top:before {
       border-top-color: #[custom-color];
}
  4. Replace all [custom-color]-s with your choosed color without hex simbol ( i.e. 98002b )
  5. Add color class to <html> tag : <html class=”theme-color-98002b”>
  6. Link to created external style sheet : <link rel=”stylesheet” type=”text/css” href=”colors/cherry.css”>

Change Skin Color

Theme has dark and light skins. To use light skin just add “theme-skin-light” class to the tag, for dark version add “theme-skin-dark”.

<html class="theme-skin-light">...</html>

<html class="theme-skin-dark">...</html>

So if you want to use the light skin with color scheme then use in the body these clases:

<html class="theme-color-33d685 theme-skin-light">