DEV Community

João Freitas
João Freitas

Posted on • Originally published at joaomagfreitas.link on

This blog changes its theme every day

Minimalistic blogs may get boring sometimes. We want to reduce visual polution, but our brain needs some visual sugar from time to time! That's why I configured a workflow for this blog that changes its theme color every day. Today you're seeing this color (yellow), but tomorrow you might see this color (red).

How

If you have read my about page, you know that this blog is built with the following stack: Hugo, Bear Blog Theme and GitHub Pages. Content is published to the web whenever my pages GitHub repository is updated, triggered by a GitHub Action.

The process to update theme color is seemingly the same: have a GitHub Action that is triggered every day by midnight.

name: update-theme-color

on:
  schedule:
    - cron: "0 0 * * *"

jobs:
  cron:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod

      - name: Change color
        run: bash scripts/update_theme_color.bash

      - name: Commit and push
        run: bash scripts/action_repo_commit_and_push_all.bash "Update theme color"

Enter fullscreen mode Exit fullscreen mode

But how is each color chosen? Initially I thought that randomizing a color using the updating date as a seed (e.g., 2023-03-12), but then I remembered that could lead to undesirable situations such as:

  • (#FFFFFF) "really light" text on light theme
  • (#000000) "really dark" text on dark theme
  • (#4A412A) or even this! (light theme users, can you point the differences?)

To overcome this issue, I decided that the best option is to handfully pick a set of colors and then choose at random one of them. All I needed to do is create a source of great colors

#F94144
#F3722C
#F8961E
...
#A9DEF9
#E4C1F9
Enter fullscreen mode Exit fullscreen mode

and then use bash scripting commands to chose one from the source and updated it in my blog config.toml file.

#!/usr/bin/env bash
script_dir_path=$(dirname "$(realpath $0)")

colors_file_path="$script_dir_path/good_colors.lst"

random_color=$(shuf -n 1 $colors_file_path)

config=$(awk '{sub(/link_color.*/, "link_color = \"'$random_color'\"")}1' config.toml)

echo "$config" > config.toml
Enter fullscreen mode Exit fullscreen mode

Top comments (0)