8000 feat: Add custom themes by cpcramer · Pull Request #1465 · coinbase/onchainkit · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

feat: Add custom themes #1465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

8000

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Oct 21, 2024
Merged

feat: Add custom themes #1465

merged 3 commits into from
Oct 21, 2024

Conversation

cpcramer
Copy link
Contributor
@cpcramer cpcramer commented Oct 21, 2024 •
edited
Loading

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 */
  }
}
Screenshot 2024-10-21 at 10 23 30 AM Screenshot 2024-10-21 at 2 04 15 PM

Notes to reviewers

How has it been tested?

@github-actions github-actions bot added documentation Improvements or additions to documentation pkg: styles labels Oct 21, 2024
@vercel Vercel
Copy link
vercel bot commented Oct 21, 2024 •
edited
Loading

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 cpcramer changed the title feat: Add custom theme feat: Add custom themes Oct 21, 2024
@cpcramer cpcramer force-pushed the paul/add-custom-theme branch from f204aef to ed7c71f Compare October 21, 2024 20:46
@cpcramer cpcramer force-pushed the paul/add-custom-theme branch from e02f25c to a58a457 Compare October 21, 2024 21:02
@cpcramer cpcramer force-pushed the paul/add-custom-theme branch from b8265f6 to 68dd6d1 Compare October 21, 2024 21:03
cpcramer
cpcramer commented Oct 21, 2024
View reviewed changes
src/types.ts
| 'cyberpunk'
| 'default'
| 'hacker'
| string;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is to enable custom classes

@cpcramer cpcramer merged commit f881e7c into main Oct 21, 2024
14 checks passed
@github-actions github-actions bot mentioned this pull request Oct 21, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@alessey alessey alessey approved these changes

@0xAlec 0xAlec 0xAlec approved these changes

Assignees
No one assigned
Labels
documentation Improvements or additions to documentation pkg: styles
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@cpcramer @alessey @0xAlec
0