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.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
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>
Up next:
Float utilities
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
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.
