{"componentChunkName":"component---src-components-posts-layout-index-js","path":"/theming-contentful/","webpackCompilationHash":"6fd724ef40842b910a04","result":{"data":{"mdx":{"id":"c96b71a9-1eb5-5b69-beef-a61932a5b2a0","timeToRead":3,"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Theming with Contentful\",\n  \"date\": \"2019-11-26\",\n  \"excerpt\": \"In this post I'll be going over an interesting problem I had to solve for while building out the redesign for Synapse Studios' marketing page. We needed a way to store the colors or the 'theme' for the site and use those colors anywhere, in any component so that they can be edited from one source of truth.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"In this post I'll be going over an interesting problem I had to solve for while building out the redesign for \", mdx(\"a\", {\n    href: \"https://synapsestudios.com/\"\n  }, \"Synapse Studios'\"), \" marketing page.\\nWe needed a way to store the colors or the 'theme' for the site and use those colors anywhere, in any component so that they can be edited from\\none source of truth. If we decide to change the theme, those changes should reflect everywhere the colors are being used on the site.\"), mdx(\"br\", null), mdx(\"p\", null, \"Before diving into the specifics, I wanted to briefly explain the tools this site is built with.\"), mdx(\"br\", null), mdx(\"h2\", null, \"Gatsby\"), mdx(\"p\", null, \"Taken from their site:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps\")), mdx(\"p\", null, mdx(\"a\", {\n    href: \"https://www.gatsbyjs.org/\"\n  }, \"Gatsby\"), \" allows you to build static sites while writing React. It also allows you to pull data from anywhere and then you use graphQL queries to access that data. The data for the Synapse site is coming from \", mdx(\"a\", {\n    href: \"https://www.contentful.com/\"\n  }, \"contentful.\")), mdx(\"br\", null), mdx(\"h2\", null, \"Contentful\"), mdx(\"p\", null, \"Contentul is an \\\"API-based cms\\\" where:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Editors collaborate on content interactively in an easy-to-use editing interface, while developers use the content with the programming language and templating frameworks of their choice.\")), mdx(\"br\", null), mdx(\"h2\", null, \"Using Gatsby w/ contentful\"), mdx(\"p\", null, \"*\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"This isn't a tutorial on how to link the 2 together, but here's a \", mdx(\"a\", {\n    href: \"https://github.com/ryanwiemer/gatsby-starter-gcn\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer\"\n  }, \"great starter package\"), \" that will get you up and running fast.\")), mdx(\"br\", null), mdx(\"p\", null, \"So how can do we use Gatsby with Contentful to create this hero for example:\"), mdx(\"br\", null), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"702px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"81.76638176638177%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsSAAALEgHS3X78AAACTklEQVQ4y5VU227aQBDN5/SlD33pF/WlT+2PVKoqtarUqq1SkuZCEgo0F4kkmGuiEMAQKE24BscYMJDgK9hwul4ImJZIZKXjmV3Pnj3jnfESyCgWS6hUrlEmsHxRFNFud9BqtWGYphWC4XAI+5iZE/9+vmQ9NE2DruvE6tQ3DGOC+0A7gX1tSA4c2taX/j153nhIHSVTlFlCyxkMBhOYNt8KsL+bh9nMF1S4aAYThWexBEKRU1xkfsPPhHEeZxE9jYG74ZFIphFPpHCeYHF5lcdVvgg2lQGbzsB3yECSZIyytF1KJpuD59cBtnY82HC6sLaxA+e2h2wu4Mu3Fbx5+wGfvzroYUf+INZJzOaWG8uO9f+UUsJYPAm3d58QesEEIvjp2aObd/d99JC9Ax++r26iUCzj2B/Cyg8n3r3/hG2XFy73Lt13XeWmClNEPhMI4/A4gD+XeQRCUUROzuhnsIitNUtxkr1Agk1TUiYYQSh8gkAwiiCJrwn1KaGsaGjeKugZA4itDjS9RyHJ6gSKquOuK4/nCp1b+1RSvyqp385td5qyRZIrcihXa6je1MALDYoqL1BbqfIQGiK5JIGkRvx6kyhqgOPqKPEF5CpZdNqS9RVHZdO9k9AUmhAbLbQIaiSQqwsoFbKkjXQYtro0TVvNksK2bN/oj295rLBr9MCpEniCmiajrsrok2BTVUH671H1SAlfpo/whFnG8/AangYceBZaRUXtjuoLo8ZfFJTwYyWFFykfXmUYSv6a2EZPnf4A5vTzg52ySOBjWu8vzwGxjtmE9AwAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Synapse Site Hero\",\n    \"title\": \"Synapse Site Hero\",\n    \"src\": \"/static/d9eb3b8480811f3d0a127b78150cc8f5/79997/synapse-site-hero.png\",\n    \"srcSet\": [\"/static/d9eb3b8480811f3d0a127b78150cc8f5/135ae/synapse-site-hero.png 300w\", \"/static/d9eb3b8480811f3d0a127b78150cc8f5/34e8a/synapse-site-hero.png 600w\", \"/static/d9eb3b8480811f3d0a127b78150cc8f5/79997/synapse-site-hero.png 702w\"],\n    \"sizes\": \"(max-width: 702px) 100vw, 702px\",\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"p\", null, \"Notice we have a headline, a tagline and button text, that's the data being displayed. The data is coming from contentful. In contentful, our corresponding data looks like this:\"), mdx(\"br\", null), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1130px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"76.54867256637169%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAAB4klEQVQ4y51T204UQRCdzzC8ujEIWYISWRGDGkzEReAzjQnhhQd82OWigigJfAQvy2V3Z3ruMz1zqNPsLhNpMFBJpatrek6fqlPtPK03UG98xMSrD3hSe4GxZzMYb3zC9MIKJuc+Y/JNEy/fr5m4NttErbGM+nwTU2+/4PnrJUxIvj6/jOl3q6jNLML53t7FequFrxub+Ca+1drD9s9D7B0cYefXH+zs/zXxtsTt/WO0D07Md+bbsjLP/a7sWz9+w4FYhhKuUnA9haFlusBjzCkK+bEsR4lS4ihO0O258JQPPwih/ACx5LRckmttPElSxMYTE2vJEcshQNVpSZohjOLR3mapnCEYLw+jCLq4rsipMhuuaZYb0DzXZh3tDbsbll1XodPt47RzjkzO3gKsMvSkTCXl9lzPxH0pn6xDYRSnKSJhd3bZw4W0ht+sDIeA/KHnsoeB6SN7SGfMnB8GAhhKBbkpnWzLAYa1ZNIvyvtVrva9KG7IWAHNjf+IZROvuv4X8KFmB6yIwnGguuyR2UscZ1oGXo9UrjrLvlOUIIxwdnEpw903QkRxCi/OoMTT/BqAfc4HztjKcJjMRD3lh4bdfeXZ8vaxkad0LjPGJ8UMn1RBNQfOc5xJPks6K9KDvl8Bd5xjNHVV+3cAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"CMS configuration for Hero\",\n    \"title\": \"CMS configuration for Hero\",\n    \"src\": \"/static/6452b653b6889b9f80dbac9c14e6005a/20783/contentful-home.png\",\n    \"srcSet\": [\"/static/6452b653b6889b9f80dbac9c14e6005a/135ae/contentful-home.png 300w\", \"/static/6452b653b6889b9f80dbac9c14e6005a/34e8a/contentful-home.png 600w\", \"/static/6452b653b6889b9f80dbac9c14e6005a/20783/contentful-home.png 1130w\"],\n    \"sizes\": \"(max-width: 1130px) 100vw, 1130px\",\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"br\", null), mdx(\"p\", null, \"And this is how we access that data via graphQL queries:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const IndexPage = ({ data }) => {\\n  const { headline, tagline, headlineButton } = data.home.edges[0].node\\n  return (\\n    <div>\\n      <h1>{headline}</h1>\\n      <div>{tagline}</div>\\n      <Button>{headlineButton}</Button>\\n    </div>\\n  )\\n}\\n\\nexport const indexPageQuery = graphql`\\n  query indexPageQuery {\\n    home: allContentfulHomePage {\\n      edges {\\n        node {\\n          id\\n          headline\\n          tagline\\n          headlineButton\\n        }\\n      }\\n    }\\n  }\\n`\\n\")), mdx(\"p\", null, \"In a pretty straightforward way, we grab the data we need in our graphQL query, that data becomes available via the data prop and we simply display it in our JSX.\"), mdx(\"br\", null), mdx(\"p\", null, \"An important thing to note is how this query is tied to this specific component.\\nAs in, if for some reason we needed to re-use this data in a separate component, we'd have to re-write this graphQL query.\\nThat isn't so much of an issue in the case of the hero section since it's only going to be displayed on the home page.\\nBut what if we need to access data in many separate places? Which brings us around to our theming issue.\"), mdx(\"br\", null), mdx(\"p\", null, \"Remember we want to use our theme colors anywhere in the site:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"We need a way to store the colors or the \\\"theme\\\" for the site in 1 single source of truth and then use those colors anywhere, in any component.\")), mdx(\"p\", null, \"Not only do we want to use them here on the home page:\"), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"65.59670781893004%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACnUlEQVQ4y41TW0tUURQ+rz0EZSFa6jiamD705kM9dSEQZiJHMxrRMMzQilAafLB3qT9iQYSEWJZlXpqLpqPOJTXDGKVktDnX5tzPfO195oKSD32wOPvsvfa31vrW2kw6nUYqlQLLcqBrTdNAkclkCkZhWhbSskzOddtHpX66gdDuNnqXJ3A3PI44lwRjmqbtoOs66NoiFw8Q0h+yR9f5c2o0AKwMkrKE6b0tfNpNgFXTYHAI9mdnGyHCgb0saS7cARxK+E8AWjIh1UmJqqpBy1VjGgY007LNygVjaCRFUSATfajR0mVZsWWgX4NcohBFCU8GB9DecQdtbR3ouN2Jzc0fBX0pdMsEo6oqRsfe4fXoW0x8nML4+0m8GhnFrD+EFy9HEJxbAPVhWR4u11XU1p7F0WMVKDpZjWg0VpAoT8zoJAN/aB6h+UWsROOYmQ1gYXEJ4aUIpmcCmP0cwtfVbxAEEU0uF5yVDjReqYa3uR6xWIz2hXRfgZ6rxO7yH16CxIp2FqkUC/Y3MV6EKKXBCjw4kQPH82i55oGjsg6xN0dgrR/H+uoykns8dnaS5FzMEiq6hvDONuZ+JrCV2iMaanYJ+fEwzGxkQRDQ2OhGeUUN+rtK8GzQiXg8ClnRkeDZgtbML0nEvcgH3AyPYYrMEoWRm7s8MQXH8XC7Pag+U4dyxznU1l9AJJLVUDP07GySahnaepIWYTHobBBNrILI+wUXRBEXL11G0YkSFBefQlVVDdbW1v9/DvMR869DkiSsLH+BPxCE3x9EMDiHjY3vSCS27G5PTk5hePg5mKGhp/D5BtDTcx+dnV3wetvR2noLzc2t8HhuoKmpxTa3+zq6u3vR3+9DX99jPHzwCA0N5+F01qCsrBKlpeUk89P4CyTwgGYbWhybAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Synapse Site Home Page\",\n    \"title\": \"Synapse Site Home Page\",\n    \"src\": \"/static/9b6ffd08818ef053f4bc9a66c38e879f/6ff5e/synapse-home-page.png\",\n    \"srcSet\": [\"/static/9b6ffd08818ef053f4bc9a66c38e879f/135ae/synapse-home-page.png 300w\", \"/static/9b6ffd08818ef053f4bc9a66c38e879f/34e8a/synapse-home-page.png 600w\", \"/static/9b6ffd08818ef053f4bc9a66c38e879f/6ff5e/synapse-home-page.png 1200w\", \"/static/9b6ffd08818ef053f4bc9a66c38e879f/de63c/synapse-home-page.png 1215w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"br\", null), mdx(\"p\", null, \"We also want to use our theme colors in things like callouts and headers and buttons throughout the site:\"), mdx(\"br\", null), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"906px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"76.26931567328919%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAPCAYAAADkmO9VAAAACXBIWXMAAAsSAAALEgHS3X78AAACNUlEQVQ4y62U3WvTUBjG859tnRXd2hUGiiBTxH9h4oVXXviBDmq7Cd7I8EbQiaCCTjfwQoRt9Ptjda1dm2YtS5MlbZb0I2mTx3OSzH7QXUw88ON9877v85wEcg4jNxrg+TokScZ5lmVZE3OGr4sosRxYrgpVa6PV7kJr0dghsWPXhmNXN2Capi02Ojosw/hrSmHkpgZebEJWNIiSAlFWIEgOp7koDWoNMtfVexC6HcjSCfpk4z55wb7pGpKU+PfoHuf6ZM1sT6wzW3saKJuUrOpGDV/SKjYyKr6R2tfMAFrbIL3vuZYz72ro3LHaB+NZZuF5ymJm2cHjxoXnh/CHOVwKVuALcbj8rGIzv8IhQPAMzVKmnrCIlttgfCEqGDBHRNdeHOL2Wg1Lb46w9JbH3Xc87tC47uQ3X1YxN6abJbp4pUMMV2oYxk9ZrcEbrOJD/ASpchO7hQZ28jLiRRmfU4rdv7XGI7A60MyGq8SwC+bCwyzGmaHxURYLwRyuhn/hSsiB5rTmJb2Lj52ZU6YfZBEtqcRwfhFnMe1fxJRvlGnf6Iw3cMPG47uOaCID5ljgcRYSRZyA2xfrPAQXsX4EQ+/S//D/LkbXdSTTWeznfyNfKOKgxNr5Xm4fBfJcPCijzFZQF0RbQI+dZZnkZJj4lFDweruBVz9l/MhrjmGv10MskUIilUE0lkQ8mcZuJGbn2zsRYsaBzui6MXIRmCSGtyTc/yjg3vs61iOKY/gvN8zw7TLe/wPKSwViyrtU8QAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Synapse Site Examples\",\n    \"title\": \"Synapse Site Examples\",\n    \"src\": \"/static/0de74822271a8f8f8c05b81004f34f5a/5ee4b/site-examples.png\",\n    \"srcSet\": [\"/static/0de74822271a8f8f8c05b81004f34f5a/135ae/site-examples.png 300w\", \"/static/0de74822271a8f8f8c05b81004f34f5a/34e8a/site-examples.png 600w\", \"/static/0de74822271a8f8f8c05b81004f34f5a/5ee4b/site-examples.png 906w\"],\n    \"sizes\": \"(max-width: 906px) 100vw, 906px\",\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"br\", null), mdx(\"p\", null, \"Keep in mind we totally could grab those colors in a query and then just re-write that query\\nin every component we need them. But that's no way to live our lives.\"), mdx(\"br\", null), mdx(\"p\", null, \"So how can we write 1 single query to grab our colors and then access that data anywhere?\"), mdx(\"br\", null), mdx(\"p\", null, \"drum roll please...\\uD83E\\uDD41\\uD83E\\uDD41\\uD83E\\uDD41\"), mdx(\"br\", null), mdx(\"h2\", null, \"useStaticQuery\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { graphql, useStaticQuery } from 'gatsby'\\n\\nuseStaticQuery(graphql`\\n  query {\\n    allContentfulThemeColors {\\n      edges {\\n        node {\\n          primary\\n          secondary\\n          tertiary\\n        }\\n      }\\n    }\\n  }\\n`)\\n\")), mdx(\"p\", null, \"Our solution is one that comes baked in with Gatsby \\uD83D\\uDE4C.\\nThis \", mdx(\"a\", {\n    href: \"https://www.gatsbyjs.org/blog/2019-02-20-introducing-use-static-query/\"\n  }, \"useStaticQuery\"), \" react hook,\\none that Gatsby provides, takes a GraphQL query and returns your data. That\\u2019s it.\"), mdx(\"br\", null), mdx(\"p\", null, \"So running that useStaticQuery function would just return that query object:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"\\nallContentfulThemeColors {\\n    edges {\\n        node {\\n            primary\\n            secondary\\n            tertiary\\n         }\\n    }\\n}\\n\\n\")), mdx(\"p\", null, \"To access the contents of this query in a tidy way we can create a custom hook. We'll call it \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useThemeColors\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import { graphql, useStaticQuery } from 'gatsby'\\n\\nconst useThemeColors = () => {\\n  const { allContentfulThemeColors } = useStaticQuery(graphql`\\n    query {\\n      allContentfulThemeColors {\\n        edges {\\n          node {\\n            primary\\n            secondary\\n            tertiary\\n          }\\n        }\\n      }\\n    }\\n  `)\\n\\n  return allContentfulThemeColors.edges[0].node\\n}\\n\\nexport default useThemeColors\\n\")), mdx(\"p\", null, \"So here we have a custom hook \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useThemeColors\"), \" which composes that \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useStatic\"), \" query hook.\\nWe're de-structuring \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"allContentfulThemeColors\"), \" (which comes from the contentful API) from the query object.\\nWe're sort of grabbing that value off of the query object and then we're just returning the data we need\\nby drilling down further into the object. The result of this query is just going to be the contents of that node object,\\nwhich are the theme colors themselves.\"), mdx(\"br\", null), mdx(\"p\", null, \"Now every time we need our colors, we can just use this custom hook:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"const IndexPage = ({ data }) => {\\n  const { headline, tagline, headlineButton } = data.home.edges[0].node\\n  // our useThemeColors Hook\\n  const colors = useThemeColors()\\n\\n  return (\\n    <div>\\n      <h1>{headline}</h1>\\n      <div>{tagline}</div>\\n      <Button color={colors.primary}>{headlineButton}</Button>\\n    </div>\\n  )\\n}\\n\\nexport const indexPageQuery = graphql`\\n  query indexPageQuery {\\n    home: allContentfulHomePage {\\n      edges {\\n        node {\\n          id\\n          headline\\n          headlineButton\\n          tagline\\n        }\\n      }\\n    }\\n  }\\n`\\n\")), mdx(\"br\", null), mdx(\"p\", null, \"Here we are assigning the constant \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"colors\"), \" to the return value of our \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useThemeColors\"), \"\\nhook then passing it to our button component's color prop.\\nSo now that Button's color is reading from the value stored in contentful.\"), mdx(\"br\", null), mdx(\"p\", null, \"We can also use the colors in our callout component as the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"backgroundColor\"), \".\\nThis time we're de-structuring the secondary color off of that node object and just passing it to the style prop of our surrounding \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"div\"), \".\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"import React from 'react'\\nimport useThemeColors from '../../hooks/useThemeColors'\\n\\nconst Callout = ({ heading, buttonText, description }) => {\\n  // our useThemeColors Hook\\n  const { secondary } = useThemeColors()\\n\\n  return (\\n    <div\\n      style={{\\n        backgroundColor: secondary,\\n      }}\\n    >\\n      <h1>{heading}</h1>\\n      <div>{description}</div>\\n      <Button>{buttonText}</Button>\\n    </div>\\n  )\\n}\\n\\nexport default Callout\\n\")), mdx(\"p\", null, \"And there you have it, the problem we had of editing our theme colors from one source of truth is solved!\"), mdx(\"br\", null), mdx(\"p\", null, \"And if we look at contentful, we just have this theme colors content model where our colors are stored, this is our source of truth.\"), mdx(\"br\", null), mdx(\"p\", null, mdx(\"span\", _extends({\n    parentName: \"p\"\n  }, {\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1015px\"\n    }\n  }), \"\\n      \", mdx(\"span\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"71.5270935960591%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAYAAAAvxDzwAAAACXBIWXMAAAsSAAALEgHS3X78AAABPklEQVQ4y51Sy26DMBDk/3+v6iGXSk17qdIQjI2fmM3OBiNIDKq60srINuN5bPNtOjqdz/T2fqKPzy9qlSbrw7+7CSmR857MYEn1mr8DjTlT5P2Yxmqn8bXLWUOrwkanehqso2maKHNPlZbHYpI1xEgjA5Zq1hdx2DFLzyxRNTAUHoQirNoMFEJc7jflElYXAt3Yw8ySC8Na16rgbAAhAz4mljLtyEUbZtVrI+xUbzaKHoAzqA+QbBhw3JUszPMkKsq6JrWVzC+1NyVmH0mGZ57tAQH8A0UvDAGLUJQeBPAoFIBY50WqdU6sqjIsknEBT+xJ/mMoJDIuv+0yBntz+Dw2+O+FoQx2xKAeJ4zGID86y4pgdkP5uVyXsVmCkETzkiysgX8llFgLpZh95ZQ1y7Gz8dh79g17bj6zdhvKHYPYTxWgFZXAAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  })), \"\\n  \", mdx(\"img\", _extends({\n    parentName: \"span\"\n  }, {\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"CMS configuration of our theme\",\n    \"title\": \"CMS configuration of our theme\",\n    \"src\": \"/static/802eac6ca36b41a280807aa0c3b58cba/25f31/themeContentful.png\",\n    \"srcSet\": [\"/static/802eac6ca36b41a280807aa0c3b58cba/135ae/themeContentful.png 300w\", \"/static/802eac6ca36b41a280807aa0c3b58cba/34e8a/themeContentful.png 600w\", \"/static/802eac6ca36b41a280807aa0c3b58cba/25f31/themeContentful.png 1015w\"],\n    \"sizes\": \"(max-width: 1015px) 100vw, 1015px\",\n    \"loading\": \"lazy\"\n  })), \"\\n    \")), mdx(\"br\", null), mdx(\"p\", null, \"All of the colors we are using in the site are derived from this single source. If we change the primary color for instance from green to blue,\\nthat will be reflected everywhere that primary color is being used on the site, which is many places.\"), mdx(\"br\", null), mdx(\"p\", null, \"Thanks for reading!\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Theming with Contentful","date":"November 26, 2019"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"c96b71a9-1eb5-5b69-beef-a61932a5b2a0","previous":{"id":"6998e50a-a75f-50a4-8ee4-14bfe511d96d","fields":{"slug":"/scrollTo/"},"frontmatter":{"title":"Helpful Snippets: scrollTo()"}},"next":{"id":"43658bb1-e4f8-520e-86ae-5fe72f200715","fields":{"slug":"/implementing-dark-mode/"},"frontmatter":{"title":"Implementing Dark Mode 🌙"}}}}}