feat: Add custom themes

[cpcramer]

What changed? Why?
Add custom field class. Users can completely override all variables in this class and pass 'custom' through the

Automatic Light/Dark Mode Switching:
To automatically switch between light and dark versions of your custom theme:

  config={{
    appearance: {
      mode: 'auto', 
      theme: 'custom',
    },
  }}

Single Theme Version:
To use only one version of your custom theme at all times:

  config={{
    appearance: {
      mode: 'light', // or 'dark'
      theme: 'custom',
    },
  }}

@layer base {
  .custom-light {
    /* Font and Shape */
    --ock-font-family: 'your-custom-value';
    --ock-border-radius: 'your-custom-value';
    --ock-border-radius-inner: 'your-custom-value';

    /* Text Colors */
    --ock-text-inverse: 'your-custom-value';
    --ock-text-foreground: 'your-custom-value';
    --ock-text-foreground-muted: 'your-custom-value';
    --ock-text-error: 'your-custom-value';
    --ock-text-primary: 'your-custom-value';
    --ock-text-success: 'your-custom-value';
    --ock-text-warning: 'your-custom-value';
    --ock-text-disabled: 'your-custom-value';

    /* Background Colors */
    --ock-bg-default: 'your-custom-value';
    --ock-bg-default-hover: 'your-custom-value';
    --ock-bg-default-active: 'your-custom-value';
    --ock-bg-alternate: 'your-custom-value';
    --ock-bg-alternate-hover: 'your-custom-value';
    --ock-bg-alternate-active: 'your-custom-value';
    --ock-bg-inverse: 'your-custom-value';
    --ock-bg-inverse-hover: 'your-custom-value';
    --ock-bg-inverse-active: 'your-custom-value';
    --ock-bg-primary: 'your-custom-value';
    --ock-bg-primary-hover: 'your-custom-value';
    --ock-bg-primary-active: 'your-custom-value';
    --ock-bg-primary-washed: 'your-custom-value';
    --ock-bg-primary-disabled: 'your-custom-value';
    --ock-bg-secondary: 'your-custom-value';
    --ock-bg-secondary-hover: 'your-custom-value';
    --ock-bg-secondary-active: 'your-custom-value';
    --ock-bg-error: 'your-custom-value';
    --ock-bg-warning: 'your-custom-value';
    --ock-bg-success: 'your-custom-value';
    --ock-bg-default-reverse: 'your-custom-value';

    /* Icon Colors */
    --ock-icon-color-primary: 'your-custom-value';
    --ock-icon-color-foreground: 'your-custom-value';
    --ock-icon-color-foreground-muted: 'your-custom-value';
    --ock-icon-color-inverse: 'your-custom-value';
    --ock-icon-color-error: 'your-custom-value';
    --ock-icon-color-success: 'your-custom-value';
    --ock-icon-color-warning: 'your-custom-value';

    /* Line Colors */
    --ock-line-primary: 'your-custom-value';
    --ock-line-default: 'your-custom-value';
    --ock-line-heavy: 'your-custom-value';
    --ock-line-inverse: 'your-custom-value';
  }

  .custom-dark {
    /* Define dark mode custom classes here */
  }
}

Notes to reviewers

How has it been tested?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
onchainkit-coverage	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 9:08pm
onchainkit-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 9:08pm
onchainkit-routes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 9:08pm

[cpcramer]

This is to enable custom classes