Colors and styles of tags

[pragdave]

First: thank you all for such a comprehensive system. Very nicely done.

When I converted by blog over, I had a hard time reading the tag names, particularly on dark pages. I found a red word in a red border on a dark gray background too difficult for my old eyes to make out. So I changed my styles to put the tags into filled lozenges with no borders, and change the text to small caps. It looks like this:

It looks like this in light mode:

and like this in dark mode

If anyone's interested, this is what I did in my styles/index.scss

@use "sass:color";
@use "sass:list";
@use "sass:meta";

// override some of the default style for all tags
.tags-wrapper .tag {
  font-variant: small-caps;
  font-size: 100%;
  border: none;
  padding: 0 0.5em;
  border-radius: 0.35rem;
}

// tag colors for dark mode
$dark-colors: [
#bcd,
#bdc,
#cbd,
#cdb,
#dbc,
#dcb,
#bbd,
#bcb,
#cdc
];

// and for light mode
$light-colors: [
#559,
#595,
#955,
#957,
#975,
#795,
#759,
#597,
#579,
];

$dark: 'html[data-theme="dark"]' !default;

@mixin set-tag-colors($colors, $light-dark, $contraster) {
  @for $i from 1 through list.length($colors) {
    $color: list.nth($colors, $i);
    #{$light-dark} .tags-wrapper .tag#{$i - 1} {
      color: $color;;
      border: none;
      background-color: meta.call($contraster, $color);
    }
  }
}

@function make-bg-darker($color) { @return darken($color, 50%); }
@include set-tag-colors($dark-colors, $dark, meta.get-function("make-bg-darker"));

@function make-bg-lighter($color) { @return lighten($color, 45%); }
@include set-tag-colors($light-colors, "", meta.get-function("make-bg-lighter"));

[Mister-Hope]

Thanks for the idea. I will optimize the tag outlook in furture versions.