merge

Author: Laurie Barth

packages/gatsby-plugin-theme-ui/README.md

@@ -21,6 +21,9 @@ prevent a flash of unstyled colors when using color modes.
 | Key                      | Default value    | Description                                                                      |
 | ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
 | `prismPreset`              | `null` | The name of the preset you'd like to use to style code blocks inside your markdown files. The available presets can be found in the [theme-ui docs](https://theme-ui.com/packages/prism/). You can also use a package string of your own choosing. |
+| `preset`               | `null`            | This can be a JSON theme object or a string package name. Make sure the package you're requiring is installed in your dependencies.               |
+
+> Note that this plugin assumes the theme object is exported as `default`.
 
 The theme module you include in options is considered your base theme. Any further customization and shadowing will be merged with it. 
 
@@ -33,6 +36,7 @@ module.exports = {
     { resolve: 'gatsby-plugin-theme-ui',
       options: {
         prismPreset: 'night-owl'
+        preset: '@theme-ui/preset-funk'
       }
     }],
 }

packages/gatsby-plugin-theme-ui/gatsby-node.js

@@ -1,6 +1,16 @@
 const prismPresetDictionary = require(`./utils/preset-dictionary`)
 
 exports.onPreInit = ({ reporter }, options) => {
+  if (typeof preset === 'string') {
+    try {
+      options.preset = require(preset)
+    } catch {
+      reporter.warn(
+        `It appears your theme dependency is not installed. Only local styles will appear.`
+      )
+    }
+  }
+
   if (prismPreset in prismPresetDictionary) {
     prismPreset = prismPresetDictionary[prismPreset]
   }
@@ -20,17 +30,19 @@ exports.createSchemaCustomization = ({ actions }) => {
   createTypes(`
       type ThemeUiConfig implements Node {
         prismPreset: JSON,
+        preset: JSON,
       }
     `)
 }
 
 exports.sourceNodes = (
   { actions, createContentDigest },
-  { prismPreset = {} }
+  { preset = {}, prismPreset = {} }
 ) => {
   const { createNode } = actions
 
   const themeUiConfig = {
+    preset,
     prismPreset,
   }
 

packages/gatsby-plugin-theme-ui/src/hooks/configOptions.js

@@ -5,6 +5,7 @@ const useThemeUiConfig = () => {
     query {
       themeUiConfig(id: { eq: "gatsby-plugin-theme-ui-config" }) {
         prismPreset
+        preset
       }
     }
   `)

packages/gatsby-plugin-theme-ui/src/provider.js

@@ -6,16 +6,15 @@ import useThemeUiConfig from './hooks/configOptions'
 
 const Root = ({ children }) => {
   const themeUiConfig = useThemeUiConfig()
-  const { prismPreset } = themeUiConfig
+  const { preset, prismPreset } = themeUiConfig
 
-  const themeWithPrism = merge(
-    {},
-    {
-      styles: {
-        pre: prismPreset,
-      },
-    }
-  )
+  const theme = preset.default || preset
+
+  const themeWithPrism = merge(theme, {
+    styles: {
+      pre: prismPreset,
+    },
+  })
 
   const fullTheme = merge(themeWithPrism, localTheme)