budibase/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte

<script>
  import { Select } from "@budibase/bbui"
  import { store } from "builderStore"
  import { get } from "svelte/store"

  const themeOptions = [
    {
      label: "Lightest",
      value: "spectrum--lightest",
    },
    {
      label: "Light",
      value: "spectrum--light",
    },
    {
      label: "Dark",
      value: "spectrum--dark",
    },
    {
      label: "Darkest",
      value: "spectrum--darkest",
    },
  ]

  const onChangeTheme = async theme => {
    await store.actions.theme.save(theme)
    await store.actions.customTheme.save({
      ...get(store).customTheme,
      navBackground:
        theme === "spectrum--light"
          ? "var(--spectrum-global-color-gray-50)"
          : "var(--spectrum-global-color-gray-100)",
    })
  }
</script>

<div>
  <Select
    value={$store.theme}
    options={themeOptions}
    placeholder={null}
    on:change={e => onChangeTheme(e.detail)}
  />
</div>

<style>
  div {
    width: 100px;
  }
</style>