feat(color)!: move colors to `.meta.themeOptions`

This commit is contained in:
Rafael Bardini 2023-09-17 00:54:31 +02:00
parent 5575556d76
commit 6ecc806add
3 changed files with 20 additions and 13 deletions

View File

@ -56,19 +56,21 @@ npx jsonresume-theme-even < resume.json > resume.html
### Colors
You can override theme colors via the `.meta.colors` resume field. Each entry defines a tuple of light and (optional) dark color values. If only one array value is defined, it will be used in both light and dark modes.
You can override theme colors via the `.meta.themeOptions.colors` resume field. Each entry defines a tuple of light and (optional) dark color values. If only one array value is defined, it will be used in both light and dark modes.
Here's an example using the default theme colors:
```json
{
"meta": {
"colors": {
"background": ["#ffffff", "#191e23"],
"dimmed": ["#f3f4f5", "#23282d"],
"primary": ["#191e23", "#fbfbfc"],
"secondary": ["#6c7781", "#ccd0d4"],
"accent": ["#0073aa", "#00a0d2"]
"themeOptions": {
"colors": {
"background": ["#ffffff", "#191e23"],
"dimmed": ["#f3f4f5", "#23282d"],
"primary": ["#191e23", "#fbfbfc"],
"secondary": ["#6c7781", "#ccd0d4"],
"accent": ["#0073aa", "#00a0d2"]
}
}
}
}

View File

@ -8,8 +8,10 @@ const resume = {
...sampleResume,
meta: {
...sampleResume.meta,
colors: {
background: ['lightgray', 'darkgray'],
themeOptions: {
colors: {
background: ['lightgray', 'darkgray'],
},
},
},
basics: {

View File

@ -1,6 +1,9 @@
export default function colors(meta = {}) {
const { colors } = meta
return colors && Object.entries(colors)
.map(([name, [light, dark = light]]) => `--color-${name}-light:${light}; --color-${name}-dark:${dark};`)
.join(' ')
const { colors } = meta.themeOptions || {}
return (
colors &&
Object.entries(colors)
.map(([name, [light, dark = light]]) => `--color-${name}-light:${light}; --color-${name}-dark:${dark};`)
.join(' ')
)
}