Color utilities

Halfmoon comes with utility classes which can be used to set the color of text and links, and the background-color of containers and other elements.

Text colors #

The class names for setting the text color come in the the following formats:

  • .text-{color}
  • .text-{color}-lm/.text-{color}-dm Since v1.1.0+

The *-lm classes work only in light mode, while the *-dm classes work only in dark mode. Without these extensions, the classes obviously apply to both modes.

The text color utilities can also be used on links. The :hover and :focus states will be automatically taken care of (based on the context). Only the .text-white and .text-muted classes have no additional link styling beyond the underline. The following table shows the base versions of the available classes:

Class Description Example On link
.text-white color: #ffffff White text White link
.text-muted Light mode:
color: var(--lm-muted-text-color)
Dark mode:
color: var(--dm-muted-text-color)
Muted text Muted link
.text-primary color: var(--primary-color) Primary text Primary link
.text-success color: var(--success-color) Success text Success link
.text-secondary color: var(--secondary-color) Secondary text Secondary link
.text-danger color: var(--danger-color) Danger text Danger link
.text-light color: var(--dm-base-text-color) Light text Light link
.text-dark color: var(--lm-base-text-color) Dark text Dark link

Background colors #

The class names for setting the background color come in the the following formats:

  • .bg-{color}
  • .bg-{color}-lm/.bg-{color}-dm Since v1.1.0+

The *-lm classes work only in light mode, while the *-dm classes work only in dark mode. Without these extensions, the classes obviously apply to both modes. The following table shows the base versions of the available classes:

Class Description Example
.bg-transparent background-color: transparent
.bg-white background-color: var(--white-bg-color)
.bg-light background-color: var(--gray-color-light)
.bg-primary background-color: var(--primary-color)
.bg-success background-color: var(--success-color)
.bg-secondary background-color: var(--secondary-color)
.bg-danger background-color: var(--danger-color)
.bg-dark-light background-color: var(--dark-color-light)
.bg-dark background-color: var(--dark-color)
.bg-very-dark background-color: var(--dark-color-dark)

Regarding anti-aliasing # Since v1.1.0+

Anti-aliasing is a technique that can be used for making text smoother (if the browser supports it). It works best on light fonts on dark backgrounds. Otherwise, there is a slight loss of readability, especially if the font size is small. In Halfmoon, anti-aliasing is applied by default to all the light text in dark mode.

When it comes to using the color utility classes (.text-{color}), the anti-aliasing often needs to be adjusted manually. The most common scenario is non-light text becoming slightly hard to read in dark mode. In such a case, the anti-aliasing needs to be turned off. This can be done using the anti-aliasing text utilities (opens in new tab). This scenario is shown in the example below. Please view it in dark mode to see the subtle difference between the two paragraphs.

Primary text

Primary text

<p class="text-primary">
  Primary text
</p>
<!-- Anti-aliasing removed in dark mode -->
<p class="text-primary text-smoothing-auto-dm">
  Primary text
</p>

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.