> Markdown version of [Interaction](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/interaction). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Lumo Interaction

`lumo-tokens.ts`

```typescript
import colorScheme from '@vaadin/vaadin-lumo-styles/src/global/color-scheme.css?inline';
import propsStyles from '@vaadin/vaadin-lumo-styles/src/props/index.css?inline';
import utilityStyles from '@vaadin/vaadin-lumo-styles/utility.css?inline';
import { addStylesheet } from 'Frontend/demo/theme';

// Extract dark theme properties. Exclude non-custom properties, so that we don't override docs
// styles (color, background) with Lumo styles.
// eslint-disable-next-line @typescript-eslint/no-base-to-string
const darkThemeProps = colorScheme
  .toString()
  .split('\n')
  .filter((line) => line.trim().startsWith('--'));
const darkThemeStyles = `
[theme~='dark'] {
${darkThemeProps.join('\n')}
}
`;

// Include styles in the page
addStylesheet(propsStyles);
addStylesheet(utilityStyles);
addStylesheet(darkThemeStyles);

// Notify DSP CustomPropertyPreview React component after custom properties have been loaded
window.dispatchEvent(new CustomEvent('custom-properties-changed'));

// Dummy element so that this module can be included as a rendered example in a docs page
export default class LumoTokens extends HTMLElement {}
```

The user may be made aware of the focus of an application with the use of a cursor, or with a focus ring. The Lumo properties may be set to improve the user experience with these visual clues, depending on the situation.

## <a id="cursor"></a>Cursor

Lumo defines a CSS custom property that you can use to adjust the way in which your application signals clickable elements to users of pointer devices — typically a mouse.

You can either follow the *web* approach and use the pointer (i.e., hand) cursor for clickable items, or take the *desktop* approach and use the default (i.e., arrow) cursor.

| Description | CSS Custom Property     |
| ----------- | ----------------------- |
| **Cursor**  | --lumo-clickable-cursor |

## <a id="pointer-focus-ring"></a>Pointer Focus Ring

By default, Vaadin components show a focus ring only when the user navigates using the keyboard. You can enable a focus ring for pointer devices by setting the `--lumo-input-field-pointer-focus-visible` custom property to `1`. This applies only to components with an input field, such as Text Field, Date Picker, etc.

`4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5`