Skip to content

Commit 044be68

Browse files
colemmorganPiyushSuthar
colemmorgan
and
PiyushSuthar
authored
Fixed unintended light mode behavior (#49)
* Creates explicit theme for light and dark mode while keeping default theme based on user color preferences * Updated ReadMe * Update awesome-card.ts * fixing typo * return null when no theme --------- Co-authored-by: Piyush Suthar <piyushsuthar100@gmail.com>
1 parent b46efb6 commit 044be68

5 files changed

Lines changed: 139 additions & 163 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,6 @@ package-lock.json
77

88
# Vercel.
99
.vercel
10+
11+
#package-lock
12+
package-lock.json

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,13 @@ Add the **?border=true** parameter.
111111

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

114+
### Theme
114115

115-
### Themes
116+
> The default theme will be light if a user is using light mode and dark themed if they are using dark mode.
117+
118+
### Light
119+
120+
> You need to add **?theme=light** parameter.
116121
117122
dark
118123

‎src/renderer/theme/awesome-card.ts‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,21 @@ export interface CustomColors {
1616

1717
export const themes: Record<string, Theme> = themesData;
1818

19-
export const renderTheme = (theme: keyof typeof themes, customColors?: CustomColors) => {
19+
export const renderTheme = (theme: keyof typeof themes, customColors?: CustomColors): Theme | null => {
2020
let baseTheme: Theme;
2121

22+
// If no theme, return null
23+
if (theme == null) {
24+
return null;
25+
}
26+
2227
if (themes[theme] && theme !== 'light' && theme !== 'dark') {
2328
baseTheme = themes[theme];
29+
} else if (theme == 'dark') {
30+
baseTheme = themes.defaultDarkModeSupport;
2431
} else {
2532
baseTheme = themes.default;
26-
}
33+
}
2734

2835
if (!customColors) {
2936
return baseTheme;
@@ -36,3 +43,60 @@ export const renderTheme = (theme: keyof typeof themes, customColors?: CustomCol
3643
symbol: customColors.symbol || baseTheme.symbol
3744
};
3845
};
46+
47+
// Gets dynamic styles for the quote
48+
export const getThemeStyles = (color : Theme | null, border: boolean) : string => {
49+
// If there is a matching theme, use its styles
50+
if (color) {
51+
return `
52+
.container {
53+
background-color: #${color.background};
54+
border: ${border ? "3px solid #"+color.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
55+
}
56+
.container h3 {
57+
color: #${color.quote};
58+
}
59+
.container h3::before, .container h3::after {
60+
color: #${color.symbol};
61+
}
62+
.container p {
63+
color: #${color.author};
64+
}
65+
`;
66+
}
67+
// If there is no theme explicitly provided, render dark/light mode
68+
// based on user's color preferences.
69+
return `
70+
/* Default light theme */
71+
.container {
72+
background-color: #${themes.default.background};
73+
border: ${border ? "3px solid #"+themes.default.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
74+
}
75+
.container h3 {
76+
color: #${themes.default.quote};
77+
}
78+
.container h3::before, .container h3::after {
79+
color: #${themes.default.symbol};
80+
}
81+
.container p {
82+
color: #${themes.default.author};
83+
}
84+
85+
/* Override for dark mode based on system settings */
86+
@media (prefers-color-scheme: dark) {
87+
.container {
88+
background-color: #${themes.defaultDarkModeSupport.background};
89+
border: ${border ? "3px solid #"+themes.defaultDarkModeSupport.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
90+
}
91+
.container h3 {
92+
color: #${themes.defaultDarkModeSupport.quote};
93+
}
94+
.container h3::before, .container h3::after {
95+
color: #${themes.defaultDarkModeSupport.symbol};
96+
}
97+
.container p {
98+
color: #${themes.defaultDarkModeSupport.author};
99+
}
100+
}
101+
`;
102+
}

‎src/renderer/type/horizontal-card.ts‎

Lines changed: 45 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,63 @@
11
import { poppinsFontSVG } from '../constants';
2-
import { Theme, themes } from '../theme/awesome-card';
2+
import { getThemeStyles, Theme } from '../theme/awesome-card';
33

44
interface Props {
55
quote: string;
66
author: string;
7-
color: Theme;
7+
color: Theme | null;
88
border: boolean;
99
}
1010

1111
export const renderHorizontal = ({ quote, author, color, border }: Props) => {
12+
const themeStyles = getThemeStyles(color, border); // gets css styling for specific theme
13+
1214
const renderedSVG = `
1315
<svg width="600" height="auto" fill="none" xmlns="http://www.w3.org/2000/svg">
1416
<foreignObject width="100%" height="100%">
15-
<div xmlns="http://www.w3.org/1999/xhtml">
16-
${poppinsFontSVG}
17-
18-
<style>
19-
* {
20-
padding: 0;
21-
margin: 0;
22-
box-sizing: border-box;
23-
}
24-
.container {
25-
font-family: Poppins, Arial, Helvetica, sans-serif;
26-
padding: 20px;
27-
width: 600px;
28-
border: ${border ? "3px solid #"+themes.default.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
29-
border-radius: 10px;
30-
}
31-
.container h3 {
32-
font-size: 19px;
33-
margin-bottom: 5px;
34-
font-weight: 500;
35-
font-style: oblique;
36-
}
37-
.container h3::before {
38-
content: open-quote;
39-
font-size: 25px;
40-
}
41-
.container h3::after {
42-
content: close-quote;
43-
vertical-align: sub;
44-
font-size: 25px;
45-
}
46-
.container p {
47-
font-style: italic;
48-
padding: 5px;
49-
text-align: right;
50-
}
51-
52-
/* Default light theme */
53-
.container {
54-
background-color: #${themes.default.background};
55-
}
56-
.container h3 {
57-
color: #${themes.default.quote};
58-
}
59-
.container h3::before, .container h3::after {
60-
color: #${themes.default.symbol};
61-
}
62-
.container p {
63-
color: #${themes.default.author};
64-
}
65-
66-
/* Default dark theme - iff dark mode detected in system settings, overriding default light theme */
67-
@media (prefers-color-scheme: dark) {
68-
.container {
69-
background-color: #${themes.defaultDarkModeSupport.background};
70-
border: ${border ? "3px solid #"+themes.defaultDarkModeSupport.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
71-
}
72-
.container h3 {
73-
color: #${themes.defaultDarkModeSupport.quote};
74-
}
75-
.container h3::before, .container h3::after {
76-
color: #${themes.defaultDarkModeSupport.symbol};
77-
}
78-
.container p {
79-
color: #${themes.defaultDarkModeSupport.author};
80-
}
81-
}
82-
83-
/* Default light/dark mode theme override for any custom theme */
84-
${JSON.stringify(color) !== JSON.stringify(themes.default) &&
85-
JSON.stringify(color) !== JSON.stringify(themes.defaultDarkModeSupport) ?
86-
` .container {
87-
background-color: #${color.background};
88-
border: ${border ? "3px solid #"+color.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
89-
}
90-
.container h3 {
91-
color: #${color.quote};
92-
}
93-
.container h3::before, .container h3::after {
94-
color: #${color.symbol};
95-
}
96-
.container p {
97-
color: #${color.author};
98-
}
99-
` : ''}
100-
</style>
101-
102-
<div class="container">
103-
<h3> ${quote}</h3>
104-
<p>- ${author}</p>
105-
</div>
17+
<div xmlns="http://www.w3.org/1999/xhtml">
18+
${poppinsFontSVG}
19+
<style>
20+
* {
21+
padding: 0;
22+
margin: 0;
23+
box-sizing: border-box;
24+
}
25+
.container {
26+
font-family: Poppins, Arial, Helvetica, sans-serif;
27+
padding: 20px;
28+
width: 600px;
29+
border-radius: 10px;
30+
}
31+
.container h3 {
32+
font-size: 19px;
33+
margin-bottom: 5px;
34+
font-weight: 500;
35+
font-style: oblique;
36+
}
37+
.container h3::before {
38+
content: open-quote;
39+
font-size: 25px;
40+
}
41+
.container h3::after {
42+
content: close-quote;
43+
vertical-align: sub;
44+
font-size: 25px;
45+
}
46+
.container p {
47+
font-style: italic;
48+
padding: 5px;
49+
text-align: right;
50+
}
51+
${themeStyles}
52+
</style>
53+
<div class="container">
54+
<h3>${quote}</h3>
55+
<p>- ${author}</p>
10656
</div>
57+
</div>
10758
</foreignObject>
10859
</svg>
109-
`;
60+
`;
11061

11162
return renderedSVG;
11263
};

‎src/renderer/type/vertical-card.ts‎

Lines changed: 19 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,58 @@
11
import { poppinsFontSVG } from '../constants';
2-
import { Theme, themes } from '../theme/awesome-card';
2+
import { getThemeStyles, Theme, themes } from '../theme/awesome-card';
33

44
interface Props {
55
quote: string;
66
author: string;
7-
color: Theme;
7+
color: Theme | null ;
88
border: boolean;
99
}
1010

1111
export const renderVertical = ({ quote, author, color, border }: Props) => {
12+
const themeStyles = getThemeStyles(color, border); // gets css styling for specific theme
13+
1214
const renderedSVG = `
1315
<svg width="300" height="300" fill="none" xmlns="http://www.w3.org/2000/svg">
1416
<foreignObject width="100%" height="100%">
1517
<div xmlns="http://www.w3.org/1999/xhtml">
1618
${poppinsFontSVG}
17-
1819
<style>
1920
* {
20-
margin:0;
21-
padding:0;
22-
box-sizing:border-box;
21+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
2324
}
2425
.container {
2526
width: 300px;
2627
height: 300px;
2728
font-family: Poppins, Arial, Helvetica, sans-serif;
2829
padding: 15px;
29-
display:flex;
30+
display: flex;
3031
flex-direction: column;
31-
align-items:center;
32-
justify-content:center;
33-
text-align:center;
34-
border: ${border ? "3px solid #"+themes.default.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
32+
align-items: center;
33+
justify-content: center;
34+
text-align: center;
3535
border-radius: 10px;
3636
}
3737
.container h3::before {
3838
content: open-quote;
39+
font-size: 50px;
40+
display: block;
41+
margin-bottom: -20px;
3942
}
4043
.container h3::after {
4144
content: close-quote;
42-
}
43-
.container h3::before, .container h3::after {
4445
font-size: 50px;
45-
display:block;
46-
margin-bottom:-20px;
47-
46+
display: block;
47+
margin-bottom: -20px;
4848
}
4949
.container h3 {
5050
margin-bottom: 15px;
5151
}
5252
.container p {
5353
font-style: italic;
5454
}
55-
56-
/* Default light theme */
57-
.container {
58-
background-color: #${themes.default.background};
59-
}
60-
.container h3 {
61-
color: #${themes.default.quote};
62-
}
63-
.container h3::before, .container h3::after {
64-
color: #${themes.default.symbol};
65-
}
66-
.container p {
67-
color: #${themes.default.author};
68-
}
69-
70-
/* Default dark theme - iff dark mode detected in system settings, overriding default light theme */
71-
@media (prefers-color-scheme: dark) {
72-
.container {
73-
background-color: #${themes.defaultDarkModeSupport.background};
74-
border: ${border ? "3px solid #"+themes.defaultDarkModeSupport.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
75-
}
76-
.container h3 {
77-
color: #${themes.defaultDarkModeSupport.quote};
78-
}
79-
.container h3::before, .container h3::after {
80-
color: #${themes.defaultDarkModeSupport.symbol};
81-
}
82-
.container p {
83-
color: #${themes.defaultDarkModeSupport.author};
84-
}
85-
}
86-
87-
/* Default light/dark mode theme override for any custom theme */
88-
${JSON.stringify(color) !== JSON.stringify(themes.default) &&
89-
JSON.stringify(color) !== JSON.stringify(themes.defaultDarkModeSupport) ?
90-
` .container {
91-
background-color: #${color.background};
92-
border: ${border ? "3px solid #"+color.symbol : "1px solid rgba(0, 0, 0, 0.2)"};
93-
}
94-
.container h3 {
95-
color: #${color.quote};
96-
}
97-
.container h3::before, .container h3::after {
98-
color: #${color.symbol};
99-
}
100-
.container p {
101-
color: #${color.author};
102-
}
103-
` : ''}
55+
${themeStyles}
10456
</style>
10557
<div class="container">
10658
<h3>${quote}</h3>
@@ -109,7 +61,8 @@ export const renderVertical = ({ quote, author, color, border }: Props) => {
10961
</div>
11062
</foreignObject>
11163
</svg>
112-
`;
64+
`;
65+
11366

11467
return renderedSVG;
11568
};

0 commit comments

Comments
 (0)