From e9a9539fa63f5cae336d3b3569065d834866c126 Mon Sep 17 00:00:00 2001 From: emmanyouwell Date: Mon, 21 Jul 2025 22:14:35 +0800 Subject: [PATCH 1/3] Added dark emerald theme --- README.md | 4 +- src/OGCard.tsx | 5 ++- src/decorations.tsx | 76 ++++++++++++++++++++++++++++++- src/theme.ts | 106 +++++++++++++++++++++++++++----------------- 4 files changed, 147 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index a30ab8e..8dd2bbe 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ## Available Themes -We now have 7 preset themes to choose from! 🎉 +We now have 9 preset themes to choose from! 🎉 - **`light`** (default) - **`dark`** @@ -15,6 +15,8 @@ We now have 7 preset themes to choose from! 🎉 - **`nord`** - **`midnight`** - **`kawaiiCat`** +- **`retro`** +- **`darkEmerald`** To use a preset theme, simply add the `theme` query parameter to the image URL. For example: diff --git a/src/OGCard.tsx b/src/OGCard.tsx index 2c99472..78f87a9 100644 --- a/src/OGCard.tsx +++ b/src/OGCard.tsx @@ -1,7 +1,7 @@ import { Rating } from './rating' import { preset, type Theme } from './theme' import { GitRollLogo } from './logo' -import { KawaiiCatDecoration, RetroThemeDecoration } from './decorations' +import { DarkEmeraldDecoration, KawaiiCatDecoration, RetroThemeDecoration } from './decorations' export interface OGCardProps { @@ -39,6 +39,7 @@ export function OGCard({ width: '100%', height: '100%', backgroundColor: theme.backgroundColor, + backgroundImage: theme === preset.darkEmerald ? theme.backgroundColor : '', color: theme.textColor, borderRadius: '10px', }} @@ -149,8 +150,10 @@ export function OGCard({ height: 80, backgroundColor: bg, borderRadius: 1000, + position: 'relative' }} > + {theme === preset.darkEmerald && ()}
) } + +export function DarkEmeraldDecoration({ color, rating }: DarkEmeraldDecorationProps) { + let endColor='' + switch(rating) { + case 'S': + endColor = '#052e16' + break + case 'A': + endColor = '#1a2e05' + break + case 'B': + endColor = '#3b0764' + break + case 'C': + endColor = '#422006' + break + case 'D': + endColor = '#450a0a' + break + default: + endColor = '#030712' + break + } + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/theme.ts b/src/theme.ts index 14edf6f..499ded8 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -2,16 +2,16 @@ import { Rating } from './rating' export interface Theme { - backgroundColor: string - textColor: string - textColorSecondary: string - badgeColors: Record - badgeTextColors: Record - barBackground: string - barForeground: string - borderColor: string - avatarPlaceholderColor: string - logoColor: string + backgroundColor: string; + textColor: string; + textColorSecondary: string; + badgeColors: Record; + badgeTextColors: Record; + barBackground: string; + barForeground: string; + borderColor: string; + avatarPlaceholderColor: string; + logoColor: string; } const light = { @@ -24,7 +24,7 @@ const light = { [Rating.B]: '#d9f99d', [Rating.C]: '#fef08a', [Rating.D]: '#fed7aa', - [Rating.E]: '#fecaca' + [Rating.E]: '#fecaca', }, badgeTextColors: { [Rating.S]: '#000', @@ -32,7 +32,7 @@ const light = { [Rating.B]: '#000', [Rating.C]: '#000', [Rating.D]: '#000', - [Rating.E]: '#000' + [Rating.E]: '#000', }, barBackground: '#F4F4F5', barForeground: '#18181B', @@ -51,7 +51,7 @@ const dark = { [Rating.B]: '#65a30d', [Rating.C]: '#ca8a04', [Rating.D]: '#ea580c', - [Rating.E]: '#dc2626' + [Rating.E]: '#dc2626', }, badgeTextColors: { [Rating.S]: '#fff', @@ -59,7 +59,7 @@ const dark = { [Rating.B]: '#fff', [Rating.C]: '#fff', [Rating.D]: '#fff', - [Rating.E]: '#fff' + [Rating.E]: '#fff', }, barBackground: '#27272A', barForeground: '#fff', @@ -78,7 +78,7 @@ const sepia = { [Rating.B]: '#eedd82', [Rating.C]: '#ffd700', [Rating.D]: '#daa520', - [Rating.E]: '#cd853f' + [Rating.E]: '#cd853f', }, badgeTextColors: { [Rating.S]: '#5b4636', @@ -86,7 +86,7 @@ const sepia = { [Rating.B]: '#5b4636', [Rating.C]: '#5b4636', [Rating.D]: '#5b4636', - [Rating.E]: '#5b4636' + [Rating.E]: '#5b4636', }, barBackground: '#e8dcc2', barForeground: '#5b4636', @@ -105,7 +105,7 @@ const solarizedLight = { [Rating.B]: '#2aa198', [Rating.C]: '#268bd2', [Rating.D]: '#d33682', - [Rating.E]: '#dc322f' + [Rating.E]: '#dc322f', }, badgeTextColors: { [Rating.S]: '#002b36', @@ -113,7 +113,7 @@ const solarizedLight = { [Rating.B]: '#002b36', [Rating.C]: '#fdf6e3', [Rating.D]: '#fdf6e3', - [Rating.E]: '#fdf6e3' + [Rating.E]: '#fdf6e3', }, barBackground: '#eee8d5', barForeground: '#073642', @@ -132,7 +132,7 @@ const solarizedDark = { [Rating.B]: '#2aa198', [Rating.C]: '#268bd2', [Rating.D]: '#d33682', - [Rating.E]: '#dc322f' + [Rating.E]: '#dc322f', }, badgeTextColors: { [Rating.S]: '#002b36', @@ -140,7 +140,7 @@ const solarizedDark = { [Rating.B]: '#002b36', [Rating.C]: '#002b36', [Rating.D]: '#002b36', - [Rating.E]: '#002b36' + [Rating.E]: '#002b36', }, barBackground: '#073642', barForeground: '#fdf6e3', @@ -159,7 +159,7 @@ const tokyoNight = { [Rating.B]: '#e0af68', [Rating.C]: '#f7768e', [Rating.D]: '#ff9e64', - [Rating.E]: '#bb9af7' + [Rating.E]: '#bb9af7', }, badgeTextColors: { [Rating.S]: '#1a1b26', @@ -167,7 +167,7 @@ const tokyoNight = { [Rating.B]: '#1a1b26', [Rating.C]: '#1a1b26', [Rating.D]: '#1a1b26', - [Rating.E]: '#1a1b26' + [Rating.E]: '#1a1b26', }, barBackground: '#1f2335', barForeground: '#c0caf5', @@ -186,7 +186,7 @@ const nord = { [Rating.B]: '#5e81ac', [Rating.C]: '#a3be8c', [Rating.D]: '#ebcb8b', - [Rating.E]: '#bf616a' + [Rating.E]: '#bf616a', }, badgeTextColors: { [Rating.S]: '#2e3440', @@ -194,7 +194,7 @@ const nord = { [Rating.B]: '#2e3440', [Rating.C]: '#2e3440', [Rating.D]: '#2e3440', - [Rating.E]: '#2e3440' + [Rating.E]: '#2e3440', }, barBackground: '#3b4252', barForeground: '#d8dee9', @@ -204,16 +204,16 @@ const nord = { } const midnight = { - backgroundColor: '#1c1e2d', - textColor: '#d3d7e1', - textColorSecondary: 'rgba(211, 215, 225, 0.7)', + backgroundColor: '#1c1e2d', + textColor: '#d3d7e1', + textColorSecondary: 'rgba(211, 215, 225, 0.7)', badgeColors: { [Rating.S]: '#3A506B', [Rating.A]: '#4C6A92', [Rating.B]: '#5C7A9D', [Rating.C]: '#3D4C6D', [Rating.D]: '#2B3A4A', - [Rating.E]: '#1D2A38' + [Rating.E]: '#1D2A38', }, badgeTextColors: { [Rating.S]: '#ffffff', @@ -221,7 +221,7 @@ const midnight = { [Rating.B]: '#ffffff', [Rating.C]: '#ffffff', [Rating.D]: '#ffffff', - [Rating.E]: '#ffffff' + [Rating.E]: '#ffffff', }, barBackground: '#2c3e50', barForeground: '#ecf0f1', @@ -235,20 +235,20 @@ const kawaiiCat = { textColor: '#7A5C58', textColorSecondary: 'rgba(122, 92, 88, 0.65)', badgeColors: { - [Rating.S]: '#FFCAD4', - [Rating.A]: '#FFD7DE', - [Rating.B]: '#66B2B2', - [Rating.C]: '#80BFBF', - [Rating.D]: '#99CCCC', - [Rating.E]: '#B3D9D9' + [Rating.S]: '#FFCAD4', + [Rating.A]: '#FFD7DE', + [Rating.B]: '#66B2B2', + [Rating.C]: '#80BFBF', + [Rating.D]: '#99CCCC', + [Rating.E]: '#B3D9D9', }, badgeTextColors: { - [Rating.S]: '#7A5C58', - [Rating.A]: '#7A5C58', - [Rating.B]: '#FFFFFF', + [Rating.S]: '#7A5C58', + [Rating.A]: '#7A5C58', + [Rating.B]: '#FFFFFF', [Rating.C]: '#FFFFFF', [Rating.D]: '#7A5C58', - [Rating.E]: '#7A5C58' + [Rating.E]: '#7A5C58', }, barBackground: '#FFCAD4', barForeground: '#66B2B2', @@ -283,7 +283,32 @@ const retro = { avatarPlaceholderColor: '#9ca3af', logoColor: '#ebd9fc', } - +const darkEmerald = { + backgroundColor: 'linear-gradient(to top left, oklch(0.696 0.17 162.48), oklch(0.141 0.005 285.823), oklch(0.141 0.005 285.823))', + textColor: '#ffffffff', + textColorSecondary: '#22c55e', + badgeColors: { + [Rating.S]: '#86efac', + [Rating.A]: '#bef264', + [Rating.B]: '#c084fc', + [Rating.C]: '#fef08a', + [Rating.D]: '#f72585', + [Rating.E]: '#6b7280', + }, + badgeTextColors: { + [Rating.S]: '#0a0a0a', + [Rating.A]: '#0a0a0a', + [Rating.B]: '#0a0a0a', + [Rating.C]: '#0a0a0a', + [Rating.D]: '#0a0a0a', + [Rating.E]: '#fff', + }, + barBackground: '#F4F4F5', + barForeground: 'oklch(0.696 0.17 162.48)', + borderColor: '#1cab90', + avatarPlaceholderColor: '#9ca3af', + logoColor: 'oklch(0.696 0.17 162.48)', +} export const preset: Record = { light, dark, @@ -295,4 +320,5 @@ export const preset: Record = { midnight, kawaiiCat, retro, + darkEmerald } From dc1eb3339296d2d10fdb88d501bbda18778c2d8a Mon Sep 17 00:00:00 2001 From: emmanyouwell Date: Wed, 23 Jul 2025 19:56:27 +0800 Subject: [PATCH 2/3] Updated color scheme and converted oklch to hex code --- src/decorations.tsx | 8 ++++---- src/theme.ts | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/decorations.tsx b/src/decorations.tsx index 146b6e2..d71451d 100644 --- a/src/decorations.tsx +++ b/src/decorations.tsx @@ -130,16 +130,16 @@ export function DarkEmeraldDecoration({ color, rating }: DarkEmeraldDecorationPr let endColor='' switch(rating) { case 'S': - endColor = '#052e16' + endColor = '#1e1b4b' break case 'A': - endColor = '#1a2e05' + endColor = '#052e16' break case 'B': - endColor = '#3b0764' + endColor = '#1a2e05' break case 'C': - endColor = '#422006' + endColor = '#431407' break case 'D': endColor = '#450a0a' diff --git a/src/theme.ts b/src/theme.ts index 499ded8..22cfc7a 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -284,15 +284,15 @@ const retro = { logoColor: '#ebd9fc', } const darkEmerald = { - backgroundColor: 'linear-gradient(to top left, oklch(0.696 0.17 162.48), oklch(0.141 0.005 285.823), oklch(0.141 0.005 285.823))', + backgroundColor: 'linear-gradient(to top left, #00bc7d, #1a1a24, #1a1a24)', textColor: '#ffffffff', textColorSecondary: '#22c55e', badgeColors: { - [Rating.S]: '#86efac', - [Rating.A]: '#bef264', - [Rating.B]: '#c084fc', - [Rating.C]: '#fef08a', - [Rating.D]: '#f72585', + [Rating.S]: '#a78bfa', + [Rating.A]: '#4ade80', + [Rating.B]: '#a3e635', + [Rating.C]: '#fb923c', + [Rating.D]: '#f87171', [Rating.E]: '#6b7280', }, badgeTextColors: { @@ -304,10 +304,10 @@ const darkEmerald = { [Rating.E]: '#fff', }, barBackground: '#F4F4F5', - barForeground: 'oklch(0.696 0.17 162.48)', + barForeground: '#00bc7d', borderColor: '#1cab90', avatarPlaceholderColor: '#9ca3af', - logoColor: 'oklch(0.696 0.17 162.48)', + logoColor: '#00bc7d', } export const preset: Record = { light, From 60d2d7d1c2a56534aedc3b084eb72394d32ff8f6 Mon Sep 17 00:00:00 2001 From: emmanyouwell Date: Wed, 23 Jul 2025 22:29:29 +0800 Subject: [PATCH 3/3] feat: add Dark Emerald theme to profile card --- .changeset/violet-comics-give.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/violet-comics-give.md diff --git a/.changeset/violet-comics-give.md b/.changeset/violet-comics-give.md new file mode 100644 index 0000000..bfa4112 --- /dev/null +++ b/.changeset/violet-comics-give.md @@ -0,0 +1,5 @@ +--- +"@gitroll/profile-card": patch +--- + +Added Dark Emerald theme