# Solution CSS picker

## Overview

<div align="center"><figure><img src="/files/Z2Sl4gkQYYrhUTQcHe53" alt=""><figcaption><p>Solution CSS picker</p></figcaption></figure></div>

The **Solution CSS picker** is a dialog used to assign a stylesheet to the active solution. It manages which LESS file (or other stylesheets) the solution will use for its UI.\
You can access it by selecting the [`styleSheet`](/reference/servoycore/object-model/solution.md#stylesheet) property in the `Properties view` of the selected solution node in the [Solution Explorer](/reference/servoy-developer/solution-explorer.md#solution-explorer).

This picker helps maintain a clean and manageable style layer by allowing you to easily:

* Select an existing stylesheet from the media library.
* Create a new stylesheet.
* Add LESS theme support to an existing stylesheet.

## Sections

<div align="center"><figure><img src="/files/W82vbiLNSHdkYgR465Ur" alt=""><figcaption><p>Solution CSS picker sections</p></figcaption></figure></div>

### Filter Field

* Located at the top of the picker dialog.
* Allows you to type part of the stylesheet name to filter the list below.

### Stylesheet List

* Displays all available stylesheets in the media library.
* Selecting `-none-` will remove the assigned stylesheet from the solution.

### Buttons

* **Create New Stylesheet**: Opens the [Create New Stylesheet](/reference/servoy-developer/object-editors/solution-css-picker/new-stylesheet-wizard.md#new-stylesheet-wizard) wizard, a separate dialog to create a brand new LESS stylesheet file.
* **Add Less Theme Support**: Appears only if the selected `.less` file does not already have LESS theme support. Opens the [Setup a Servoy Less Theme](/reference/servoy-developer/object-editors/solution-css-picker/setup-a-servoy-less-theme-wizard.md#setup-a-servoy-less-theme-wizard) wizard, a dialog to initialize theme support on the selected stylesheet.
* **OK**: Applies the selected stylesheet to the solution.
* **Cancel**: Closes the picker without applying changes.

## Using the Solution CSS picker Wizard

Here are the steps for using the **Solution CSS picker**:

1. **Open the CSS Picker**
   * In the [Solution Explorer](/reference/servoy-developer/solution-explorer.md#solution-explorer), select your solution name
   * In the `Properties view`, find the [`styleSheet`](/reference/servoycore/object-model/solution.md#stylesheet) property and double click its value to open the picker.
2. **Filter Stylesheets** (Optional)
   * Use the filter input at the top to quickly narrow down the list of stylesheets by typing part of the filename.
3. **Select a Stylesheet**
   * Click on a stylesheet from the list to highlight it.
   * If you select `-none-`, the solution will no longer use a stylesheet.
4. **Create a New Stylesheet**
   * Click `Create New Stylesheet` to open a dialog where you can specify the name and location of a new LESS file in the media library.
5. **Add LESS Theme Support**
   * If you select a `.less` file that does not yet support LESS themes, click `Add Less Theme Support` to initialize theme capabilities in that file.
6. **Apply or Cancel**
   * Click `OK` to assign the selected stylesheet to the solution.
   * Click `Cancel` to exit without making changes.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/solution-css-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
