AppearanceSettings() — ui Function Reference

Architecture documentation for the AppearanceSettings() function in appearance-settings.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AppearanceSettings() — ui Function Reference

Dependency Diagram

graph TD
  460ebb7d_d654_1573_cffd_d57bb99290d5["AppearanceSettings()"]
  6d300fa7_2b5f_83d7_65d7_43526198e3ae["appearance-settings.tsx"]
  460ebb7d_d654_1573_cffd_d57bb99290d5 -->|defined in| 6d300fa7_2b5f_83d7_65d7_43526198e3ae
  style 460ebb7d_d654_1573_cffd_d57bb99290d5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx lines 66–168

export function AppearanceSettings() {
  return (
    <FieldSet>
      <FieldLegend>Appearance</FieldLegend>
      <FieldDescription>
        Configure appearance. accent, scroll bar, and more.
      </FieldDescription>
      <FieldGroup>
        <FieldSet>
          <FieldLegend variant="label">Mode</FieldLegend>
          <FieldDescription>
            Select the mode to use for the appearance.
          </FieldDescription>
          <RadioGroup
            className="flex flex-col gap-4 @min-[28rem]/field-group:grid @min-[28rem]/field-group:grid-cols-3"
            defaultValue="light"
          >
            {modes.map((mode) => (
              <FieldLabel
                htmlFor={mode.value}
                className="gap-0 overflow-hidden"
                key={mode.value}
              >
                <Image
                  src={mode.image}
                  alt={mode.name}
                  width={160}
                  height={90}
                  className="hidden aspect-video w-full object-cover @min-[28rem]/field-group:block dark:brightness-[0.2] dark:grayscale"
                />
                <Field
                  orientation="horizontal"
                  className="@min-[28rem]/field-group:border-t-input @min-[28rem]/field-group:border-t"
                >
                  <FieldTitle>{mode.name}</FieldTitle>
                  <RadioGroupItem id={mode.value} value={mode.value} />
                </Field>
              </FieldLabel>
            ))}
          </RadioGroup>
        </FieldSet>
        <FieldSeparator />
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Accent</FieldTitle>
            <FieldDescription>
              Select the accent color to use for the appearance.
            </FieldDescription>
          </FieldContent>
          <FieldSet aria-label="Accent">
            <RadioGroup className="flex flex-wrap gap-2" defaultValue="#007AFF">
              {accents.map((accent) => (
                <Label
                  htmlFor={accent.value}
                  key={accent.value}
                  className="flex size-6 items-center justify-center rounded-full"
                  style={{ backgroundColor: accent.value }}
                >
                  <RadioGroupItem
                    id={accent.value}
                    value={accent.value}
                    aria-label={accent.name}
                    className="peer sr-only"
                  />
                  <CheckIcon className="hidden size-4 stroke-white peer-data-[state=checked]:block" />
                </Label>
              ))}
            </RadioGroup>
          </FieldSet>
        </Field>
        <FieldSeparator />
        <Field orientation="responsive">
          <FieldContent>
            <FieldLabel htmlFor="icon-size">Sidebar Icon Size</FieldLabel>
            <FieldDescription>
              Select the size of the sidebar icons.
            </FieldDescription>
          </FieldContent>
          <Select>
            <SelectTrigger id="icon-size" className="ml-auto">
              <SelectValue placeholder="Select" />