Halloween Themes for the user-statistician GitHub Action
Tags: github, hacktoberfest, showdev, webdev
Published: 2022-09-28 12:54:34

Just in time for Halloween, and Hacktoberfest, I recently added a few Halloween themes to the [user-statistician](https://github.com/cicirello/user-statistician) GitHub Action. I've posted about the user-statistician GitHub Action before. It generates an SVG with a detailed summary of your activity on GitHub suitable for inclusion in your GitHub Profile README or on a personal website. The intended use-case is to run on a schedule via a GitHub workflow in your GitHub Profile repository (repository with same name as your username). It is implemented in Python as a Container Action, and uses the GitHub CLI to query the GitHub GraphQL API to gather the data. For a more detailed summary of its functionality, see my earlier DEV post as well as other posts in this series: 

{% link https://dev.to/cicirello/the-user-statistician-github-action-mentioned-in-awesome-readme-5g3o %}

The [user-statistician](https://github.com/cicirello/user-statistician) GitHub Action includes several built-in color themes. Up until now all of the built-in color themes were based on GitHub's various themes as described in [GitHub's Primer documentation](https://primer.style/primitives/colors). Recently, I added three new themes related to Halloween: `halloween`, `halloween-light`, and `batty`. Or if you prefer the existing GitHub-inspired themes, but just want to use the pumpkin (from the new `halloween` and `halloween-light` themes) or the bat (from the new `batty` theme) in place of the GitHub Octocat, then that is supported as well.

The rest of this post shows examples of the new themes, as well as providing example workflows to explain how to configure the new themes.

__Table of Contents:__
* [Dark Halloween Theme](#dark-halloween-theme): Halloween colors with jack-o'-lanterns at the top
* [Light Halloween Theme](#light-halloween-theme): Halloween colors with jack-o'-lanterns at the top
* [A Batty Theme](#a-batty-theme): A light theme with bats at the top
* [How to Use the Pumpkin or Bat with Another Theme](#how-to-use-the-pumpkin-or-bat-with-another-theme)
* [How to Use the Pumpkin or Bat with Custom Colors](#how-to-use-the-pumpkin-or-bat-with-custom-colors)
* [Where You Can Find Me](#where-you-can-find-me)

## Dark Halloween Theme

Let's start with a GitHub workflow using the new `halloween` theme, but otherwise using all of the default inputs. The workflow below, if placed in a `.yml` file within the `.github/workflows` directory of a repository, will run daily at 3am (see the `cron`) and also runs manually via the `workflow_dispatch` event. The theme is configured with the `colors` input to the action. It needs the `GITHUB_TOKEN` as an environment variable in order to query the GitHub GraphQL API. The default permissions that are automatically granted to `GITHUB_TOKEN` are sufficient.

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

Since the above workflow uses the default location, the SVG that is generated will be committed to `images/userstats.svg`. The action has an input that can be used to change the location and/or name of the SVG file. Assuming that you keep the default, then the following Markdown can be used to insert the image into the README of your repository.

```markdown
![My GitHub activity](images/userstats.svg)
```

The `halloween` theme will look like the following sample:

![Example with dark Halloween theme](https://raw.githubusercontent.com/cicirello/user-statistician/samples/images/halloween.svg)


## Light Halloween Theme

The second of the new themes is `halloween-light`, which is a light theme using Halloween colors. Here's a sample workflow:

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: halloween-light
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

The `halloween-light` theme will look like the following sample:

![Example with light Halloween theme](https://raw.githubusercontent.com/cicirello/user-statistician/samples/images/halloween-light.svg)


## A Batty Theme

The third new theme is `batty`, which is a light theme with bats at the top. Here's a sample workflow:

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: batty
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

The `batty` theme will look like the following sample:

![Example with Batty theme](https://raw.githubusercontent.com/cicirello/user-statistician/samples/images/batty.svg)


## How to Use the Pumpkin or Bat with Another Theme

If you'd rather stick with one of the existing GitHub-inspired themes, and just want to use the jack-o'-lantern or the bat instead of the default GitHub Octocat, then that can be accomplished with the `top-icon` input, such as `top-icon: pumpkin` or `top-icon: bat`. Here's an example workflow showing how to use the jack-o'-lantern with the `dark` theme.

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: dark
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

The jack-o'-lantern should look good with the light themes as well. For that, you can either set `colors: light` explicitly or just leave the `colors` input out (it defaults to a light theme if you don't otherwise specify):

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

And here's a workflow for the default `light` theme, but with `top-icon: bat`:

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        top-icon: bat
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

Note, don't try to use `top-icon: bat` with any of the dark themes since the bat will just blend into the background. 


## How to Use the Pumpkin or Bat with Custom Colors

If you don't like any of the built-in themes, you can specify custom colors. Here's an example workflow specifying custom colors, but using the jack-o'-lantern, specified with `top-icon: pumpkin`, instead of the default GitHub Octocat:

```YAML
name: user-statistician

on:
  schedule:
    - cron: '0 3 * * *'
  workflow_dispatch:

jobs:
  stats:
    runs-on: ubuntu-latest
      
    steps:
    - uses: actions/checkout@v2

    - name: Generate the user stats image for GitHub profile
      uses: cicirello/user-statistician@v1
      with:
        colors: '#ffffff #368cf9 #0349b4 #0349b4 #0E1116'
        top-icon: pumpkin
      env:
        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
```

See the [documentation of the `colors` input](https://github.com/cicirello/user-statistician#colors) for complete details of how this input works. As in the prior examples, you can simply pass a theme name to this input. But you can also pass a sequence of five colors, each specified either with an SVG color name, or in this example with hex (both 6-digit and 3-digit hex colors are supported). The colors in this example happen to be those of the `light-high-contrast` theme, and are specified in the order: background color, border color, icons color, title color, and text color. The icons color only affects the icons for the various statistics, and is not used for the icons (e.g., Octocat, pumpkin, bat) in the top corners. If you use the default Octocat (e.g., by not specifying `top-icon`), the color of the Octocat is set to maximize contrast with your chosen background color. If you don't want any icon at the top, you can pass `top-icon: none`.


## Where You Can Find Me

On the Web:

{% embed https://www.cicirello.org/ %}

Follow me here on DEV:

{% user cicirello %}

Follow me on GitHub:

{% github cicirello/cicirello %}