> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Teemaeditori - Värit

> Määritä koko verkkokaupassa käytettävä väripaletti — tausta-, teksti-, reuna-, ohjaus- ja tilavärit.

<Frame caption="Teemaeditori > Värit">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-colors.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=bf23603adca78060887ae25a26283796" alt="Värien asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-colors.webp" />
</Frame>

Värit-paneeli määrittää väripaletin, jota käytetään verkkokaupan jokaisella sivulla. Muutokset vaikuttavat kaikkialle: kun päivität värin täällä, se päivittyy jokaiseen elementtiin, joka viittaa siihen.

Jokainen väri hyväksyy heksadesimaaliarvon (esim. `#111826`). Avaa värivalitsin napsauttamalla värinäytettä tai kirjoita heksakoodi suoraan.

## Tausta

| Asetus       | Oletus    | Kuvaus                                                           |
| ------------ | --------- | ---------------------------------------------------------------- |
| Ensisijainen | `#FFFFFF` | Sivun päätausta.                                                 |
| Toissijainen | `#F7F9FA` | Vaihtoehtoiset pinnat, kuten kortit ja sivupaneelit.             |
| Kontrasti    | `#111826` | Voimakaskontrastiset pinnat, kuten ylätunniste tai tummat osiot. |

## Teksti

| Asetus       | Oletus    | Kuvaus                                |
| ------------ | --------- | ------------------------------------- |
| Ensisijainen | `#111826` | Otsikot ja leipäteksti.               |
| Toissijainen | `#374152` | Tukiteksti, nimikkeet ja kuvaukset.   |
| Kontrasti    | `#FFFFFF` | Teksti kontrastivärisillä taustoilla. |

## Reuna

| Asetus       | Oletus    | Kuvaus                                              |
| ------------ | --------- | --------------------------------------------------- |
| Ensisijainen | `#E4E6EB` | Erottimet, korttien reunat ja osioiden väliviivat.  |
| Toissijainen | `#F2F3F5` | Hienovaraiset erottimet ja toissijaiset väliviivat. |

## Valintaruudut ja valintapainikkeet

| Asetus       | Oletus    | Kuvaus                                                            |
| ------------ | --------- | ----------------------------------------------------------------- |
| Väri         | `#374152` | Valintaruutujen ja valintapainikkeiden oletusväri (ei valittuna). |
| Valitun väri | `#111826` | Väri, kun valintaruutu tai valintapainike on valittuna.           |

## Tila

| Asetus | Oletus    | Kuvaus                                                          |
| ------ | --------- | --------------------------------------------------------------- |
| Virhe  | `#D92D20` | Vahvistusvirheet, loppuunmyynnin ilmaisimet ja muut virhetilat. |

## CSS-muuttujat

Jokainen väri vastaa CSS-muuttujaa, johon voit viitata [mukautetussa CSS:ssä](/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css):

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-color-background: #FFFFFF;
    --storefront-color-background-secondary: #F7F9FA;
    --storefront-color-background-contrast: #111826;
    --storefront-color-text: #111826;
    --storefront-color-text-secondary: #374152;
    --storefront-color-text-contrast: #FFFFFF;
    --storefront-color-border: #E4E6EB;
    --storefront-color-border-secondary: #F2F3F5;
    --storefront-selection-control-color: #374152;
    --storefront-selection-control-selected-color: #111826;
    --storefront-color-error: #D92D20;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Ylätunnistepalkki" icon="browser" href="/docs/fi/sales-channels/online-store/theme-editor/settings/header-bar">
    Mukauta ylätunnisteen tausta-, teksti-, kuvake- ja reunavärit.
  </Card>

  <Card title="Typografia" icon="font" href="/docs/fi/sales-channels/online-store/theme-editor/settings/typography">
    Määritä fonttiperheet ja koot.
  </Card>

  <Card title="Mukautettu CSS" icon="code" href="/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css">
    Ohita mikä tahansa tyyli mukautetulla CSS:llä.
  </Card>
</CardGroup>