Selection Styling

FrontAlign styles selected text globally through the ::selection pseudo-element. The highlight color and text color both draw from CSS custom properties derived from your primary color token, so selection automatically stays on-brand in both light and dark mode — with no utility class required.

The styling is applied globally as part of the FrontAlign base layer.

Quick reference

How it works

FrontAlign injects a single ::selection rule that maps to two CSS custom properties.

::selection {
  background-color: var(--selection);
  color: var(--selection-text);
  text-shadow: none;
}

Both tokens are derived from your theme rather than hardcoded hex values. --selection uses the OKLCH color space to compute a light, semi-transparent tint from --primary. --selection-text inherits from --body-text so readable contrast is always maintained.

Default values

Light mode

:root {
  --selection:      oklch(from var(--primary) 0.88 calc(c * 0.85) h / 0.24);
  --selection-text: var(--body-text);
}

The formula lightens the primary color (L 0.88), slightly reduces chroma (c * 0.85), keeps the same hue (h), and applies 24% opacity — producing a soft, brand-consistent highlight in light mode.

Dark mode

[data-theme="dark"] {
  --selection:      oklch(from var(--primary) 0.62 calc(c * 0.9) h / 0.38);
  --selection-text: var(--body-text);
}

In dark mode the lightness drops to 0.62 and opacity rises to 38% so the highlight remains clearly visible against dark backgrounds.

Token reference

Customization

Override with a static color

Replace either token in :root with a fixed value to bypass the derived formula.

:root {
  --selection:      #6366f140;
  --selection-text: #1e293b;
}

Adjust opacity only

Keep the derived hue but change how prominent the highlight appears.

:root {
  --selection: oklch(from var(--primary) 0.88 calc(c * 0.85) h / 0.4);
}

Scoped selection color

Apply a different highlight color to a specific element without affecting the rest of the page.

.code-block::selection {
  background-color: oklch(from var(--primary) 0.75 calc(c * 0.9) h / 0.32);
  color: var(--body-text);
}

Usage notes

• No utility class is needed — selection styling is part of the FrontAlign base layer and applies globally.
• text-shadow: none is set by default to prevent shadows from interfering with selected text readability.
• Both tokens are derived from --primary using the OKLCH from syntax, so they follow your brand color automatically when --primary changes.
• Dark mode values are scoped to [data-theme="dark"] — update this selector if your dark mode strategy differs.
• Override --selection with a semi-transparent color so the underlying text remains visible through the highlight.
• Use a scoped ::selection rule on specific elements such as code blocks or headings to apply a contextually different highlight color.