---
layout: blank
title: Create
permalink: "/docs/themes/edit/"
override:tags: [themes, pro]
isPro: true
order: 99
unlisted: true
---

{% block head %}
<link href="/assets/styles/docs.css" rel="stylesheet" />
<link href="/assets/styles/ui.css" rel="stylesheet" />
<link href="{{ page.url }}style.css" rel="stylesheet" />
<script src="{{ page.url }}index.js" type="module"></script>
{% endblock %}

<wa-page id="theme-app">
  <header slot="header">
    <a href="/" aria-label="Web Awesome">
      {% include "logo-simple.njk" %}
    </a>

    <div class="title">
      <h1><editable-text :model-value="title" label="theme name" @submit="newTitle => save({title: newTitle})" blur="cancel"></editable-text></h1>
      <wa-button v-if="saved" class="delete" @click="deleteSaved" appearance="plain" size="small">
        <wa-icon name="trash" label="Delete theme"></wa-icon>
      </wa-button>
    </div>

    <wa-button v-if="tweaked || uid" @click="save()" :disabled="!unsavedChanges"
      :variant="unsavedChanges ? 'success' : 'neutral'" size="small" :appearance="unsavedChanges ? 'accent' : 'outlined'">
      <span v-content="unsavedChanges ? 'Save' : 'Saved'">Save</span>
    </wa-button>
    <wa-button size="small" @click="ui.showCode = !showCode" appearance="outlined">
      <wa-icon name="code" variant="solid"></wa-icon>
      Code
    </wa-button>
    <wa-drawer label="Theme code" :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
      <wa-tab-group class="import-stylesheet-code" :active="ui.code" @wa-tab-show="ui.code = $event.detail.name">
        <wa-tab panel="css">CSS</wa-tab>
        <wa-tab-panel name="css">
          <p>
            <wa-button variant="brand" :href="code.css.blob" :download="cssFilename">
              <wa-icon name="arrow-down-to-line" variant="solid" slot="start"></wa-icon>
              Download <code v-text="cssFilename"></code>
            </wa-button>
          </p>

          <pre class="language-css"><code v-content:html="code.css.highlighted"></code></pre>

          <wa-divider></wa-divider>

          <p>To use this theme, add this code snippet to the <code>&lt;head&gt;</code> section of your HTML file:</p>

          <pre class="language-html"><code v-content:html="codeToUse.highlighted"></code></pre>

          <wa-callout size="small" variant="warning" appearance="filled">
            <wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
            Don't forget to replace <code v-text="'path/to/' + cssFilename"></code> with your local path!
          </wa-callout>
        </wa-tab-panel>

        <wa-tab panel="html">HTML</wa-tab>
        <wa-tab-panel name="html">
          <p>To use this theme, add this code snippet to the <code>&lt;head&gt;</code> section of your HTML file:</p>
          <pre class="language-html"><code v-content:html="code.html.highlighted"></code></pre>
        </wa-tab-panel>
      </wa-tab-group>
    </wa-drawer>
  </header>

  <ui-panel-container class="sidebar" slot="navigation" v-model="ui.panel">
    <ui-panel v-model="ui.panel" value="styles" title="Styles" :step="0">
      <theme-card :theme="computed.base" size="small" :action="e => ui.panel = 'theme'" title="Starting Theme"></theme-card>

      <wa-divider></wa-divider>

      <palette-card :palette="computed.palette" size="small" :action="e => ui.panel = 'color'" role="button" tabindex="0"
                    title="Colors" :subtitle="`${ palettes[computed.palette]?.title } palette &bull; ${ capitalize(computed.brand) } brand`">
      </palette-card>

      <fonts-card :theme="computed.typography" title="Fonts" size="small" :action="e => ui.panel = 'typography'">
      </fonts-card>

      <icons-card size="small" :action="e => ui.panel = 'icons'" :family="computed.icon.family" :style="computed.icon.style"
                  title="Icons" :subtitle="`${ capitalize(computed.icon.family) } &bull; ${ capitalize(computed.icon.style) }`">
      </icons-card>

      <theme-card type="dimensionality" :theme="computed.dimensionality" title="Elements" size="small" :action="e => ui.panel = 'elements'"></theme-card>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="theme" :step="1">
      <template #title>
        <label for="starting-theme">Starting Theme</label>
      </template>

      <wa-callout v-if="customizations.length > 0" variant="danger" size="small">
        <wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
        Editing the starting theme will reset your <span v-text="customizations.length + ' customization' + (customizations.length > 1 ? 's' : '')"></span>.
      </wa-callout>

      <wa-radio-group id="starting-theme" class="card-picker" :value="theme.base" @input="e => resetTo(e.target.value)">
        <template v-for="(themeMeta, themeId) in themes">
          <wa-radio v-if="themeId !== 'custom'" :value="themeId" size="small" :aria-selected="!theme.base && themeId === 'default' ? 'true' : null">
            <theme-card :theme="themeId"></theme-card>
          </wa-radio>
        </template>
      </wa-radio-group>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="color" title="Colors" :step="1">
      <palette-card :palette="computed.palette" size="small" :action="e => ui.panel = 'color-palette'" role="button" tabindex="0"
                    title="Color Palette" :subtitle="palettes[computed.palette]?.title">
      </palette-card>
      <swatch-select label="Brand Color" shape="rounded"
                     :get-color="hue => palettes[computed.palette].colors[hue].key"
                     :model-value="computed.brand" @update:model-value="value => theme.brand = value"
                     :values="hues"></swatch-select>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="color-palette" title="Color Palette" :step="2">
      <wa-radio-group class="card-picker" v-model="theme.palette" size="small">
        <wa-radio v-for="(palette, paletteId) in palettes" :value="paletteId">
          <palette-card :palette="paletteId" size="small" :aria-selected="!theme.palette && paletteId === themes[computed.base].palette ? 'true' : null">
            <template #extra><wa-badge appearance="outlined" variant="neutral" v-if="paletteId === themes[computed.base].palette">Default</wa-badge></template>
          </palette-card>
        </wa-radio>
      </wa-radio-group>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="typography" title="Fonts" :step="1">
      <wa-radio-group class="card-picker" v-model="theme.typography" >
        <wa-radio v-for="pairing of pairings" :value="pairing.id" size="small">
          <fonts-card :pairing :aria-selected="!theme.typography && pairing.id === theme.base ? 'true' : null">
            <template #extra><wa-badge appearance="outlined" variant="neutral" v-if="pairing.id === theme.base">Default</wa-badge></template>
          </fonts-card>
        </wa-radio>
      </wa-radio-group>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="icons" title="Icons" :step="1">
      <wa-select label="Library" value="default" disabled style="display: none;">
        <wa-option value="default" selected>Font Awesome</wa-option>
      </wa-select>

      <icons-card type="family" vary="style" size="small" :action="e => ui.panel = 'icon-family'" :defaults="computed.icon"
                  title="Icon Family">
      </icons-card>

      <icons-card type="style" size="small" :action="e => ui.panel = 'icon-style'" :defaults="computed.icon"
                  title="Icon Style">
      </icons-card>

      <wa-input label="Font Awesome Pro Kit Code" v-model="theme.icon.kit" placeholder="e.g. f0nta7e50e">
        <info-tip slot="end"><template #content>You need a Font Awesome Pro license to use certain families and styles.</template></info-tip>
        <a href="https://fontawesome.com/kits" target="_blank" slot="hint" class="wa-caption-m wa-cluster wa-gap-2xs">
          <span>Find your kit code here</span>
          <wa-icon name="arrow-up-right-from-square" variant="regular" style="font-size: 0.75em"></wa-icon>
        </a>
      </wa-input>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="elements" title="Elements" :step="1">
      <ui-slider label="Rounding" :default-value="1" :min="0" :max="2" :step="0.125" format="{value}x" :model-value="computed.rounding" @update:model-value="value => theme.rounding = value">
        <template #min>
          <div class="corner" style="--border-radius: 0;"></div>
        </template>
        <template #max>
          <div class="corner" style="--border-radius: var(--wa-border-radius-l);"></div>
        </template>
      </ui-slider>
      <ui-slider label="Spacing" :default-value="1":min="0.5" :max="2" :step="0.125" format="{value}x" :model-value="computed.spacing" @update:model-value="value => theme.spacing = value">
        <template #min>
          <div class="spacing" style="--spacing: 0.5;"><div></div><div></div><div></div></div>
        </template>
        <template #max>
          <div class="spacing" style="--spacing: 1.5;"><div></div><div></div><div></div></div>
        </template>
      </ui-slider>

      <ui-slider label="Border thickness" :default-value="1" :min="0.5" :max="3" :step="0.5" format="{value}x" :model-value="computed.borderWidth" @update:model-value="value => theme.borderWidth = value">
        <template #min>
          <div class="borders" style="--border-width: 1px;"></div>
        </template>
        <template #max>
          <div class="borders" style="--border-width: var(--wa-border-width-l);"></div>
        </template>
      </ui-slider>

      <!--
      <theme-card type="dimensionality" :theme="computed.dimensionality" title="Dimensionality" :subtitle="computed.dimensionality ? undefined : 'Flat'" size="small" :action="e => ui.panel = 'dimensionality'"></theme-card>
      -->
    </ui-panel>

    <!--
    <ui-panel v-model="ui.panel" value="dimensionality" title="Dimensionality" :step="2">
      <template #title>
        <label for="dimensionality-radio-group">Dimensionality</label>
      </template>
      <wa-radio-group id="dimensionality-radio-group" class="card-picker" v-model="theme.dimensionality">
        <wa-radio value="" size="small" :aria-selected="!theme.dimensionality || theme.dimensionality === computed.base ? 'true' : null">
          <theme-card type="dimensionality" :theme="computed.base"></theme-card>
        </wa-radio>
        <template v-for="(themeMeta, themeId) in themes">
          <wa-radio v-if="themeId !== computed.base && themeMeta.dimension" :value="themeId" size="small" :aria-selected="theme.dimensionality === themeId ? 'true' : null">
            <theme-card type="dimensionality" :theme="themeId"></theme-card>
          </wa-radio>
        </template>
      </wa-radio-group>
    </ui-panel>
    -->

    <ui-panel v-model="ui.panel" value="icon-family" title="Icon Family" :step="2">
      <template #title>
        <label for="icon-family-radio-group">Icon Family</label>
      </template>
      <wa-radio-group id="icon-family-radio-group" class="card-picker" v-model="theme.icon.family">
          <wa-radio v-for="family of iconLibraries.default.family" :value="family" size="small" :aria-selected="computed.icon.family === family ? 'true' : null">
            <icons-card type="family" vary="style" :family="family"  :library="computed.icon.library"></icons-card>
          </wa-radio>
      </wa-radio-group>
    </ui-panel>

    <ui-panel v-model="ui.panel" value="icon-style" title="Icon Style" :step="2">
      <template #title>
        <label for="icon-style-radio-group">Icon Style</label>
      </template>
      <wa-radio-group id="icon-style-radio-group" class="card-picker" v-model="theme.icon.style">
          <wa-radio v-for="style of iconLibraries.default.style" :value="style" size="small" :aria-selected="computed.icon.style === style ? 'true' : null">
            <icons-card type="style" :style="style" :defaults="computed.icon"></icons-card>
          </wa-radio>
      </wa-radio-group>
    </ui-panel>
  </ui-panel-container>

  <div class="preview-container">
    <wa-comparison position="80">
      <iframe slot="before" class="preview" ref="previewInvert" :src="`{{ page.url }}../preview/${ui.preview}/${urlParamsInvert}`"></iframe>
      <iframe slot="after" class="preview" ref="preview" :src="`{{ page.url }}../preview/${ui.preview}/${urlParams}`"></iframe>
    </wa-comparison>
  </div>
</wa-page>
