Styleframe Logo
Composables

Selection State

Style text selection with configurable background and text color using the useSelectionState composable.

Overview

The useSelectionState composable styles the ::selection pseudo-element to customize how selected text looks. It creates CSS variables for the selection background color and text color.

useSelectionState

function useSelectionState(
    s: Styleframe,
    options?: WithThemes<SelectionStateConfig>
): SelectionStateResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useSelectionState } from '@styleframe/theme';

const s = styleframe();

const { selectionBackground, selectionColor } = useSelectionState(s);

export default s;

Default Values

OptionDefaultVariableExport
background"@color.primary"--selection--backgroundselectionBackground
color"#ffffff"--selection--colorselectionColor

The default configuration includes a dark theme override: color: "@color.white".

Custom Values

styleframe.config.ts
import { styleframe } from 'styleframe';
import { useSelectionState } from '@styleframe/theme';

const s = styleframe();

const { selectionBackground, selectionColor } = useSelectionState(s, {
    background: '@color.info',
    color: '#ffffff',
});

export default s;

Best Practices

  • Use your brand color: The default @color.primary reinforces brand identity in text selection.
  • Ensure contrast: Use white or light text on dark selection backgrounds, and dark text on light selection backgrounds.
  • Customize per-theme: Use theme overrides to adjust selection colors for dark mode. The default dark theme references @color.white for the text color.

Paragraphs

Style paragraph elements with configurable top and bottom margins using the useParagraphElement composable.

Summary

Set the cursor style on summary elements using the useSummaryElement composable.