Hacking a custom color scheme for the Castanet Hugo theme

custom-castanet-colors-md

If you use the [Castanet](https://www.github.com/mattstratton/castanet) theme for Hugo you can now have your own special theme (i.e., instead of "orange" or "blue", you want "my-cool-podcast" with your own variable colors). Here's kind of how to do it -  I'll probably write a blog explaining it much better sometime.

Assuming you have the `castanet` theme inside of `themes` in your site's directory, here's the stuff you need to create/do/install. (for purposes of example, let's say your hugo site is called `hugocast`)

1. Install `node` and `npm` (you're on your own to do this)
1. Copy the `hugocast/themes/castanet/package.json` to `hugocast/package.json`
1. Feel free to edit the `hugocast/package.json` file to use your project's name and repo, but it's not strictly required, but it's probably a good practice.
1. Create the directory `hugocast/gulp/tasks`
1. Copy `hugocast/themes/castanet/gulpfile.js` to `hugocast/gulpfile.js`
1. Copy the contents of `sass.js` in this gist to `hugocast/gulp/tasks/sass.js` (replacing `hugocast` in line 8  with the name of your project; I think you get the idea)
1. Create the directories `hugocast/static/scss` and `hugocast/static/css`
1. Copy the contents of `hugocast.scss` and `hugocast_variables.scss` from this gist into the `scss` directory you just created above (rename them to whatever you want; but keep track because you'll need to update the files to reference them, etc)
1. Edit `hugocast.scss` line 2 to reference the variables filename, assuming you didn't actually call it "hugocast" :)
1. Edit `hugocast_variables.scss` with whatever fun variables for colors and such you want!
1. In a terminal, from the root of the `hugocast` directory, run `npm install`
1. In the same terminal, run `gulp sass`
1. This should result in the `hugocast/static/css/hugocast.css` file being created
1. Update `hugocast/config.toml` to set `site_theme = "hugocast"` (or whatever the css file ended up being named)

In theory, this should work. If you have any issues, please leave a comment on this gist.

Note - if you upgrade Castanet, check to see if `static/scss/grey.scss` and/or `static/scss/grey_variables.scss` have been changed; if so, you'll need to update your custom copy.

hugocast.scss

@import "../../themes/castanet/static/scss/site";
@import "hugocast_variables"; //edit this to whatever you named the variables file
@import "../../themes/castanet/static/scss/custom";

hugocast_variables.scss

//** Color scheme via https://coolors.co
// 

$brand-primary:                 #2A2D34;
$body-bg:                       lighten($brand-primary, 20%);
$castanet-main-container-bg:    #BCBDC0;
$castanet-middle-container-bg:   #fff;
$castanet-sidebar-bg:            $brand-primary;
$link-color:                     $brand-primary;

//== Pagination
//
//##

$pagination-color:                     $link-color;
$pagination-bg:                        #fff;
$pagination-border:                    #ddd;

$pagination-hover-color:               $link-hover-color;
$pagination-hover-bg:                  $gray-500;
$pagination-hover-border:              #ddd;

$pagination-active-color:              #fff;
$pagination-active-bg:                 $brand-primary;
$pagination-active-border:             $brand-primary;

$pagination-disabled-color:            $gray-600;
$pagination-disabled-bg:               #fff;
$pagination-disabled-border:           #ddd;

sass.js

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps');

sass.compiler = require('node-sass');

  gulp.task('sass', function () {
    return gulp.src('static/scss/hugocast.scss')
        .pipe(sourcemaps.init())
        .pipe(sass({ style: 'compressed' }).on('error', sass.logError))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('static/css'));
  });