THEMES.md

Change Theme Style

It is very easy to customize with your favorite colors.

To change the color of the Mapache theme select one of the theme styles below and copy it into the Setting -> Code Injection -> Blog Header

In the following article shows a list of better color palettes https://goo.gl/VE2K5r

Theme Deep Orange 800

<style>
    /*header color links*/
    .header .u-headerColorLink a {color: #FFC79E}
    .button-nav--toggle span {background-color: #FFC79E !important}
    .u-headerColorLink a.active,
    .u-headerColorLink a:hover {color: #FFF4DE !important;}

    /* Header color description in home page */
    .header-description {color: #dcd6d2 !important }

    /* Background Global color */
    .u-bgColor {background-color:rgba(210, 87, 4, 1) !important}

    /* Color global for links */
    .link--accent,
    .u-accentColor--iconNormal {
      color: #B34E11;
      fill: #B34E11;
    }

    /* btn color  */
    .button--primary {
        color: #B34E11;
        border-color: #B34E11;
    }

    /* mark */
    mark {background-image: linear-gradient(to bottom, rgba(255, 225, 194, 1), rgba(255, 225, 194, 1)) !important;}
</style>

Theme Cyan 500

<style>
    /*header color links*/
    .header .u-headerColorLink a {color: #00787F}
    .button-nav--toggle span {background-color: #00787F !important}
    .u-headerColorLink a.active,
    .u-headerColorLink a:hover {color: #005057 !important;}

    /* Header color description in home page */
    .header-description {color: #dcd6d2 !important }

    /* Background Global color */
    .u-bgColor {background-color: rgba(106, 200, 207, 1) !important}

    /* Color global for links */
    .link--accent,
    .u-accentColor--iconNormal {
        color: #347F85;
        fill: #347F85;
    }

    /* btn color  */
    .button--primary {
        color: #347F85;
        border-color: #347F85;
    }

    /* mark */
    mark {background-image: linear-gradient(to bottom, rgba(223, 246, 248, 1), rgba(223, 246, 248, 1)) !important;}
</style>

Theme Blue Dark

<style>
    /*header color links*/
    .header .u-headerColorLink a {color: #C1CBDB}
    .button-nav--toggle span {background-color: #C1CBDB !important}
    .u-headerColorLink a.active,
    .u-headerColorLink a:hover {color: #FCFFFF !important}

    /* Header color description in home page */
    .header-description {color: #dcd6d2 !important }

    /* Background Global color */
    .u-bgColor {background-color: rgba(30, 55, 87, 1) !important}

    /* Color global for links */
    .link--accent,
    .u-accentColor--iconNormal {
        color: #607491;
        fill: #607491;
    }

    /* btn color  */
    .button--primary {
        color: #607491;
        border-color: #607491;
    }

    /* mark */
    mark {background-image: linear-gradient(to bottom, rgba(223, 246, 248, 1), rgba(223, 246, 248, 1)) !important;}
</style>

Theme Red 400

<style>
    /*header color links*/
    .header .u-headerColorLink a {color: #FFBBB4}
    .button-nav--toggle span {background-color: #FFBBB4 !important}
    .u-headerColorLink a.active,
    .u-headerColorLink a:hover {color: #FFF0EC !important}

    /* Header color description in home page */
    .header-description {color: #dcd6d2 !important }

    /* Background Global color */
    .u-bgColor {background-color: rgba(196, 50, 53, 1) !important}

    /* Color global for links */
    .link--accent,
    .u-accentColor--iconNormal {
        color: #BC403E;
        fill: #BC403E;
    }

    /* btn color  */
    .button--primary {
        color: #BC403E;
        border-color: #BC403E;
    }

    /* mark */
    mark {background-image: linear-gradient(to bottom, rgba(255, 220, 214, 1), rgba(255, 220, 214, 1)) !important;}
</style>
```