Skip to content
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.

Already on GitHub? Sign in to your account

Fixed unintended light mode behavior #49

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fixed unintended light mode behavior #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
97ea80c
Creates explicit theme for light and dark mode while keeping default …
colemmorgan Feb 18, 2025
dad5fd4
Updated ReadMe
colemmorgan Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,6 @@ node_modules

# Vercel.
.vercel

#package-lock
package-lock.json
21 changes: 13 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,14 @@ Copy the markdown below and paste it in your Github Readme.

### Options

| Options | Default | Available |
| ------- | -------- | ------------------------------------------------------------------------------------------- |
| type | vertical | horizontal, vertical |
| theme | light | dark, chartreuse-dark, radical, merko, gruvbox, tokyonight, algolia, monokai, dracula, nord |
| quote | - | Customize your quote |
| author | - | The name of the quote's author |
| border | false | true, false |
| Options | Default | Available |
| ------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| type | vertical | horizontal, vertical |
| theme | light (auto-adjusts to dark if preferred) | light, dark, chartreuse-dark, radical, merko, gruvbox, tokyonight, algolia, monokai, dracula, nord |
| quote | - | Customize your quote |
| author | - | The name of the quote's author |
| border | false | true, false |


## Installation and Development 🚀

Expand Down Expand Up @@ -86,9 +87,13 @@ npx vercel dev

[![readme Quotes](https://quotes-github-readme.vercel.app/api?border=true)](https://github.com/piyushsuthar/github-readme-quotes)

### Theme

> The default theme will be light if a user is using light mode and dark themed if they are using dark mode.

### Light

> You don't need to add **?theme=light** parameter.
> You need to add **?theme=light** parameter.

[![readme Quotes](https://quotes-github-readme.vercel.app/api?type=vertical)](https://github.com/piyushsuthar/github-readme-quotes)

Expand Down
105 changes: 88 additions & 17 deletions src/renderer/theme/awesome-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,18 @@ export const themes: Record<string, Theme> = {
background: 'fffefe',
symbol: '4c71f2'
},
light: {
quote: '333',
author: '2f80ed',
background: 'fffefe',
symbol: '4c71f2'
},
dark: {
quote: '9f9f9f',
author: 'fff',
background: '151515',
symbol: '79ff97'
},
defaultDarkModeSupport: {
quote: '9f9f9f',
author: 'fff',
Expand Down Expand Up @@ -110,7 +122,7 @@ export const themes: Record<string, Theme> = {
},
graywhite: {
quote: '24292E',
author: '24292E"',
author: '24292E',
background: 'FFFFFF',
symbol: '24292E'
},
Expand All @@ -133,25 +145,84 @@ export const themes: Record<string, Theme> = {
symbol: '4F0000'
},
shadow_green: {
quote: '007A00',
author: '007A00',
background: '151515',
symbol: '003D00'
quote: '007A00',
author: '007A00',
background: '151515',
symbol: '003D00'
},
shadow_blue: {
quote: '00779A',
author: '00779A',
background: '151515',
symbol: '004490'
quote: '00779A',
author: '00779A',
background: '151515',
symbol: '004490'
}
};

export const renderTheme = (theme: keyof typeof themes) => {
// Check if theme exists in the themes object and is neither default light nor dark mode theme
if (themes[theme] && theme !== 'light' && theme !== 'dark') {
return themes[theme];
}

// Else, return the default (light) theme with dark mode support
return themes.default;
export const renderTheme = (theme?: string): Theme | null => {
if (theme === 'light') return themes.default;
if (theme === 'dark') return themes.defaultDarkModeSupport;
if (theme && themes[theme]) return themes[theme];

// Get the corresponding theme or return null
// If null, the default styling will be used
return null;
};



// Gets dynamic styles for the quote
export const getThemeStyles = (color : Theme | null, border: boolean) : string => {
// If there is a matching theme, use its styles
if (color) {
return `
.container {
background-color: #${color.background};
border: ${border ? "3px solid #"+color.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
}
.container h3 {
color: #${color.quote};
}
.container h3::before, .container h3::after {
color: #${color.symbol};
}
.container p {
color: #${color.author};
}
`;
}
// If there is no theme explicitly provided, render dark/light mode
// based on user's color preferences.
return `
/* Default light theme */
.container {
background-color: #${themes.default.background};
border: ${border ? "3px solid #"+themes.default.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
}
.container h3 {
color: #${themes.default.quote};
}
.container h3::before, .container h3::after {
color: #${themes.default.symbol};
}
.container p {
color: #${themes.default.author};
}

/* Override for dark mode based on system settings */
@media (prefers-color-scheme: dark) {
.container {
background-color: #${themes.defaultDarkModeSupport.background};
border: ${border ? "3px solid #"+themes.defaultDarkModeSupport.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
}
.container h3 {
color: #${themes.defaultDarkModeSupport.quote};
}
.container h3::before, .container h3::after {
color: #${themes.defaultDarkModeSupport.symbol};
}
.container p {
color: #${themes.defaultDarkModeSupport.author};
}
}
`;
}
139 changes: 45 additions & 94 deletions src/renderer/type/horizontal-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,112 +1,63 @@
import { poppinsFontSVG } from '../constants';
import { Theme, themes } from '../theme/awesome-card';
import { getThemeStyles, Theme } from '../theme/awesome-card';

interface Props {
quote: string;
author: string;
color: Theme;
color: Theme | null;
border: boolean;
}

export const renderHorizontal = ({ quote, author, color, border }: Props) => {
const themeStyles = getThemeStyles(color, border); // gets css styling for specific theme

const renderedSVG = `
<svg width="600" height="auto" fill="none" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
${poppinsFontSVG}

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
font-family: Poppins, Arial, Helvetica, sans-serif;
padding: 20px;
width: 600px;
border: ${border ? "3px solid #"+themes.default.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
border-radius: 10px;
}
.container h3 {
font-size: 19px;
margin-bottom: 5px;
font-weight: 500;
font-style: oblique;
}
.container h3::before {
content: open-quote;
font-size: 25px;
}
.container h3::after {
content: close-quote;
vertical-align: sub;
font-size: 25px;
}
.container p {
font-style: italic;
padding: 5px;
text-align: right;
}

/* Default light theme */
.container {
background-color: #${themes.default.background};
}
.container h3 {
color: #${themes.default.quote};
}
.container h3::before, .container h3::after {
color: #${themes.default.symbol};
}
.container p {
color: #${themes.default.author};
}

/* Default dark theme - iff dark mode detected in system settings, overriding default light theme */
@media (prefers-color-scheme: dark) {
.container {
background-color: #${themes.defaultDarkModeSupport.background};
border: ${border ? "3px solid #"+themes.defaultDarkModeSupport.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
}
.container h3 {
color: #${themes.defaultDarkModeSupport.quote};
}
.container h3::before, .container h3::after {
color: #${themes.defaultDarkModeSupport.symbol};
}
.container p {
color: #${themes.defaultDarkModeSupport.author};
}
}

/* Default light/dark mode theme override for any custom theme */
${JSON.stringify(color) !== JSON.stringify(themes.default) &&
JSON.stringify(color) !== JSON.stringify(themes.defaultDarkModeSupport) ?
` .container {
background-color: #${color.background};
border: ${border ? "3px solid #"+color.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
}
.container h3 {
color: #${color.quote};
}
.container h3::before, .container h3::after {
color: #${color.symbol};
}
.container p {
color: #${color.author};
}
` : ''}
</style>

<div class="container">
<h3> ${quote}</h3>
<p>- ${author}</p>
</div>
<div xmlns="http://www.w3.org/1999/xhtml">
${poppinsFontSVG}
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
font-family: Poppins, Arial, Helvetica, sans-serif;
padding: 20px;
width: 600px;
border-radius: 10px;
}
.container h3 {
font-size: 19px;
margin-bottom: 5px;
font-weight: 500;
font-style: oblique;
}
.container h3::before {
content: open-quote;
font-size: 25px;
}
.container h3::after {
content: close-quote;
vertical-align: sub;
font-size: 25px;
}
.container p {
font-style: italic;
padding: 5px;
text-align: right;
}
${themeStyles}
</style>
<div class="container">
<h3>${quote}</h3>
<p>- ${author}</p>
</div>
</div>
</foreignObject>
</svg>
`;
`;

return renderedSVG;
};
Loading