> ## 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 - Teematyyli

> Selaa, kopioi ja joukkomuokkaa kaikkia käytössä olevia teema-asetuksia CSS-muuttujina. Nollaa koko teema oletuksiin.

<Frame caption="Teemaeditori > Teematyyli">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-theme-style.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=4671d0c2ca1cea9d73b382ef828a91e9" alt="Teematyylin asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-theme-style.webp" />
</Frame>

Teematyyli-paneeli näyttää jokaisen käytössä olevan teema-asetuksen CSS-muuttujana vain luettavassa koodilohkossa. Sen avulla tarkastelet nykyisiä arvoja, kopioit muuttujia [mukautettuun CSS:ään](/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css) tai muokkaat useita asetuksia kerralla.

## Koko teeman nollaus

Napsauta **Reset entire theme**, niin kaikkien paneelien asetukset palautuvat TWICE Commercen oletusteemaan. Tämä on yksi toiminto, joka vaikuttaa väreihin, typografiaan, asetteluun, painikkeisiin, syöttökenttiin, kalenteriin, listauskortteihin ja kaikkiin muihin teema-asetuksiin.

<Warning>
  Teeman nollaus hylkää kaikki mukautukset. Nollaus tulee voimaan julkisessa verkkokaupassa heti, kun tallennat — luonnos- tai julkaisuvaihetta ei ole, eikä tallennettua nollausta voi perua. Peru tallentamaton nollaus sulkemalla editori ja valitsemalla tallentamattomien muutosten valintaikkunassa **Discard**.
</Warning>

## Teeman CSS

CSS-lohko näyttää `:root`-säännön, jossa on jokainen teemamuuttuja ja sen nykyinen arvo. Voit:

* **Copy** — kopioi kaikki muuttujat leikepöydälle napsauttamalla kopiointikuvaketta.
* **Unlock** — siirry muokkaustilaan napsauttamalla lukkokuvaketta.
* **Muokkaa** — muokkaa muuttujien arvoja suoraan tekstikentässä. Käytä tavallista CSS-syntaksia.
* **Apply changes** — jäsentää muokatun CSS:n ja päivittää vastaavat teema-asetukset.

<CodeGroup>
  ```css Esimerkkituloste theme={null}
  :root {
    --storefront-logo-width: 120px;
    --storefront-layout-page-width: 1400px;
    --storefront-layout-margin: 32px;
    --storefront-heading-font-family: Inter;
    --storefront-heading-font-scale: 100%;
    --storefront-body-font-family: Inter;
    --storefront-body-font-scale: 100%;
    --storefront-color-background: #FFFFFF;
    --storefront-color-text: #111826;
    --storefront-button-background-color: #212121;
    --storefront-button-border-radius: 6px;
    /* ... all other theme variables */
  }
  ```
</CodeGroup>

<Note>
  CSS-muuttujan muokkaaminen tässä paneelissa päivittää saman asetuksen kuin vastaava visuaalinen paneeli. Esimerkiksi `--storefront-button-border-radius`-arvon muuttaminen täällä vastaa kulmien pyöristyksen liukusäätimen siirtämistä painikepaneelissa.
</Note>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Mukautettu CSS" icon="code" href="/docs/fi/sales-channels/online-store/theme-editor/settings/custom-css">
    Lisää verkkokauppaan mukautettuja CSS-sääntöjä.
  </Card>

  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>
</CardGroup>