Dynamic Color Settings in Theme App Extensions

Retired Boards Appdev Extensions
1

I have inherited the development of Theme App Extensions from my predecessor.

Previously, merchants could customize elements like button colors by fetching values from settings_data.json in Liquid, as illustrated below:

import React from 'react'
import { Clickable } from 'components'
import classNames from 'classnames'

interface ButtonProps {
  className?: string
  onClick: () => void
  disabled?: boolean
  loading?: boolean
  children: React.ReactNode
  kind: 'primary' | 'bare'
  ariaLabel?: string
}

export const Button: React.FC<ButtonProps> = ({
  className,
  onClick,
  disabled,
  children,
  kind,
  loading,
  ariaLabel,
}) => {
  const stylesByKind = {
    primary: `${
      disabled
        ? 'tw-bg-gray-500'
        : window?.Shopify
        ? 'tw-cursor-pointer color-accent-2 hover:tw-opacity-90'
        : 'tw-cursor-pointer tw-bg-primary hover:tw-bg-primary-dark'
    } tw-text-white-100 tw-rounded`,
    bare: '',
  }
  return (
    <Clickable
      className={classNames(stylesByKind[kind], className)}
      loading={loading}
      onClick={onClick}
      disabled={disabled}
      ariaLabel={ariaLabel}
    >
      {children}
    </Clickable>
  )
}

However, this method had limitations; it could not be directly applied to certain themes, requiring modifications to settings_data.json.
What are the best practices for enabling merchants to configure the colors of components within Theme App Extensions individually?

translated