Adding More Colors with terminal scripts

Credit @Jiogo18

Bash Script

The Bash script defines a function create_custom_color that generates a color swatch image and a corresponding SCSS file with a CSS variable for the color.

Script Breakdown

function create_custom_color () {
  color=$1
  rgb=$2
  mkdir -p static/img/theme-colors assets/css/color
  ffmpeg -f lavfi -i color=$rgb:50x50:d=3,format=rgb24 -frames:v 1 static/img/theme-colors/$color.png -y
  echo -en ":root {\n  --accent: $rgb;\n}" > assets/css/color/$color.scss
}

Parameters

• color: The name of the color (e.g., yellow, cyan).
• rgb: The RGB hex code of the color (e.g., #FFCE02, #00BFBF).

Steps

1. Create Directories
   The script ensures that the directories static/img/theme-colors and assets/css/color exist. If they don't, it creates them using mkdir -p.

2. Generate Color Swatch Image
   Using ffmpeg, the script generates a 50x50 pixel image filled with the specified color. The image is saved as $color.png in static/img/theme-colors/.

3. Create SCSS File
   It writes a SCSS file defining a CSS variable --accent with the specified RGB value. This file is saved as $color.scss in assets/css/color/.

Usage

create_custom_color yellow "#FFCE02"
create_custom_color cyan "#00BFBF"

Run the above commands in your terminal to add the colors "yellow" and "cyan" to your website.

NuShell Script

For those using NuShell, the following script achieves the same functionality with a slightly different syntax.

Script Breakdown

def create_custom_color [color: string, rgb: string] {
	mkdir static/img/theme-colors assets/css/color
	ffmpeg -f lavfi -i $"color=($rgb):50x50:d=3,format=rgb24" -frames:v 1 $"static/img/theme-colors/($color).png" -y
	$":root {(char newline)  --accent: ($rgb);(char newline)}" | save $"assets/css/color/($color).scss" --force
}

Parameters

• color: The name of the color.
• rgb: The RGB hex code of the color.

Steps

1. Create Directories
   Similar to the Bash script, it creates the necessary directories using mkdir.

2. Generate Color Swatch Image
   Utilizes ffmpeg to generate a 50x50 pixel image filled with the specified color. The image is saved as $color.png in static/img/theme-colors/.

3. Create SCSS File
   Constructs a string defining the CSS variable --accent and saves it to $color.scss in assets/css/color/ using the save command with the --force flag to overwrite if necessary.

Usage

create_custom_color yellow "#FFCE02"
create_custom_color cyan "#00BFBF"

Execute these commands in your NuShell environment to add the desired colors.