Logo

dev-resources.site

for different kinds of informations.

This blog changes its theme every day

Published at
3/12/2023
Categories
hugo
githubpages
githubactions
blog
Author
freitzzz
Author
8 person written this
freitzzz
open
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
githubpages Article's
30 articles in total
Favicon
London Perl Mongers on GitHub Pages
Favicon
Create Your Professional Resume Website with GitHub and Quarto
Favicon
Did You Know You Can Use GitHub to Host Your Site for Free?
Favicon
A refresher on GitHub Pages
Favicon
How to Deploy a React App to GitHub Pages
Favicon
How to Deploy an Express.js App on GitHub Pages Using GitHub Actions
Favicon
Create your portfolio with GitHub Pages
Favicon
Deploying React Apps to Github Pages with Github Actions
Favicon
Publicando suas paginas Flutter no Github Pages utilizando GitHub Action
Favicon
From Localhost to Live: Easy Deployment With Github Pages or Netlify
Favicon
Jekyll Docker
Favicon
Guia de Análise de Tráfego para GitHub Pages: Integração com Ferramentas de Analytics
Favicon
Um Guia Simples para Levar Seu Projeto Angular para o GitHub Pages
Favicon
How to: Deploy Angular Website to Github Pages
Favicon
Using GitHub Pages and Miss Hosting for DNS and Hosting
Favicon
Deploying Your Vite Apps to Github Pages is a Breeze with Vite Github Pages Deployer
Favicon
piratematt.com v3—Overview & Getting Started
Favicon
Host React app in GitHub pages
Favicon
404 There isn't a GitHub Pages site here.
Favicon
Deploy your React app using GitHub pages
Favicon
Why your GitHub action is not triggered by other actions
Favicon
Deploying GitHub Pages sites with GitHub Workflows
Favicon
This blog changes its theme every day
Favicon
Como criar um blog com Jekyll no GitHub Pages?
Favicon
Create a free static website using Github Pages and Jekyll
Favicon
Github Pages Tips if your img doesn't appear 🖼️
Favicon
Hosting static websites on GitHub pages
Favicon
Updating GitHub Pages using GitHub Actions
Favicon
What I learned from self-hosting a Supabase Svelte project: Part 2
Favicon
Using GitHub Pages and GitHub Actions to Deploy a React App ✨

Featured ones: