diff --git a/.changeset/dracula-theme-add.md b/.changeset/dracula-theme-add.md new file mode 100644 index 0000000..755fc7b --- /dev/null +++ b/.changeset/dracula-theme-add.md @@ -0,0 +1,5 @@ +--- +"@gitroll/profile-card": patch +--- + +Added Dracula theme \ No newline at end of file diff --git a/README.md b/README.md index 8dd2bbe..196c442 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ## Available Themes -We now have 9 preset themes to choose from! 🎉 +We now have 10 preset themes to choose from! 🎉 - **`light`** (default) - **`dark`** @@ -17,6 +17,7 @@ We now have 9 preset themes to choose from! 🎉 - **`kawaiiCat`** - **`retro`** - **`darkEmerald`** +- **`dracula`** To use a preset theme, simply add the `theme` query parameter to the image URL. For example: diff --git a/src/OGCard.stories.tsx b/src/OGCard.stories.tsx index c51e7ee..5bb4e3c 100644 --- a/src/OGCard.stories.tsx +++ b/src/OGCard.stories.tsx @@ -91,3 +91,10 @@ export const Midnight: Story = { } } +export const Dracula: Story = { + args: { + ...baseProps, + theme: preset.dracula, + }, +} + diff --git a/src/theme.ts b/src/theme.ts index 22cfc7a..cdafed4 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -309,6 +309,33 @@ const darkEmerald = { avatarPlaceholderColor: '#9ca3af', logoColor: '#00bc7d', } + +const dracula = { + backgroundColor: '#282A36', + textColor: '#F8F8F2', + textColorSecondary: '#6272A4', + badgeColors: { + [Rating.S]: '#BD93F9', + [Rating.A]: '#50FA7B', + [Rating.B]: '#F1FA8C', + [Rating.C]: '#FFB86C', + [Rating.D]: '#FF79C6', + [Rating.E]: '#FF5555', + }, + badgeTextColors: { + [Rating.S]: '#282A36', + [Rating.A]: '#282A36', + [Rating.B]: '#282A36', + [Rating.C]: '#282A36', + [Rating.D]: '#282A36', + [Rating.E]: '#282A36', + }, + barBackground: '#44475A', + barForeground: '#8BE9FD', + borderColor: '#44475A', + avatarPlaceholderColor: '#6272A4', + logoColor: '#F8F8F2', +} export const preset: Record = { light, dark, @@ -320,5 +347,6 @@ export const preset: Record = { midnight, kawaiiCat, retro, - darkEmerald + darkEmerald, + dracula }