^Components Utilities

Auto-dark #

.dark-auto automatically creates a simple dark version of any element:

How it works:

/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
:root {
  --blades-dark-filter: invert(100%) hue-rotate(180deg);
}
.dark-auto {
  /* Dark color scheme (Auto) */
  @media (prefers-color-scheme: dark) {
    filter: var(--blades-dark-filter);
  }
  /* Dark color scheme (Forced) */
  &[data-theme="dark"],
  &:where([data-theme="dark"] *) {
    filter: var(--blades-dark-filter);
  }
}

Faded #

.faded reduces the opacity of an element:

How it works:

.faded {
  opacity: 50%;

  &:hover {
    opacity: 87.5%;
  }
}