States

Selection State

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

Part of the Global Preset:useSelectionState is included in the Global Preset (useGlobalPreset) and you can configure it through the preset's selection option. For most projects, applying it via the preset is the recommended approach.

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;

styleframe/index.css

:root {
    --selection--background: var(--color--primary);
    --selection--color: #ffffff;
}

::selection {
    background: var(--selection--background);
    color: var(--selection--color);
}

Default Values

Option	Default	Variable	Export
`background`	`"@color.primary"`	`--selection--background`	`selectionBackground`
`color`	`"#ffffff"`	`--selection--color`	`selectionColor`

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;

styleframe.config.ts

import { styleframe } from 'styleframe';
import { useGlobalPreset } from '@styleframe/theme';

const s = styleframe();

const { selection } = useGlobalPreset(s, {
    selection: {
        background: '@color.info',
        color: '#ffffff',
    },
});

export default s;

styleframe/index.css

:root {
    --selection--background: var(--color--info);
    --selection--color: #ffffff;
}

::selection {
    background: var(--selection--background);
    color: var(--selection--color);
}

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.

Edit this pageorReport an issue

Focus

Apply consistent focus-visible outline styles across all elements with configurable color, width, style, and offset using the useFocusState composable.

Summary

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