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

README.md

@@ -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"]
+      }
     }
   }
 }

test/index.test.js

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

utils/colors.js

@@ -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(' ')
+  )
 }