{"componentChunkName":"component---node-modules-gatsby-theme-dox-src-templates-doc-js","path":"/customization","result":{"data":{"doc":{"id":"0030e84f-7871-5a10-b814-7335fc73591b","slug":"/customization","title":"","description":null,"excerpt":"Customization Theme UI gatsby-theme-dox  uses  Theme UI  for styling the theme. For customizing the default theme, follow the steps below…","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\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(\"h1\", {\n    \"id\": \"customization\"\n  }, \"Customization\"), mdx(\"h2\", {\n    \"id\": \"theme-ui\"\n  }, \"Theme UI\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"gatsby-theme-dox\"), \" uses \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://theme-ui.com\"\n  }), \"Theme UI\"), \" for styling the theme.\"), mdx(\"p\", null, \"For customizing the default theme, follow the steps below:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create a \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"theme.js\"), \" file in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src/gatsby-theme-dox\"), \" directory.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Import the default theme and override the values you want to change.\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// src/gatsby-theme-dox/theme.js\\nimport theme from 'gatsby-theme-dox/src/theme'\\n\\nexport default {\\n  ...theme,\\n  colors: {\\n    ...theme.colors,\\n    primary: '#FFCD00'\\n  }\\n}\\n\")), mdx(\"h2\", {\n    \"id\": \"syntax-highlighting\"\n  }, \"Syntax Highlighting\"), mdx(\"p\", null, \"You can use your own favorite \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://prismjs.com\"\n  }), \"Prism\"), \" theme for Syntax Highlighting.\"), mdx(\"p\", null, \"Follow the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://theme-ui.com/prism#gatsby-plugin\"\n  }), \"@theme-ui/prism documentation\"), \" for Gatsby plugin.\"), mdx(\"h2\", {\n    \"id\": \"logo\"\n  }, \"Logo\"), mdx(\"p\", null, \"You can show a logo instead of the site's title at the top of the Sidebar. For doing that, follow these steps:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Create a React component called \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Logo.js\"), \" in the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src/gatsby-theme-dox/components\"), \" directory.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Be sure to spread the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"props\"), \". For example:\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"// src/gatsby-theme-dox/components/Logo.js\\nimport React from 'react'\\n\\nfunction Logo(props) {\\n  return <img src=\\\"/logo.png\\\" alt=\\\"Go to homepage\\\" {...props} />\\n}\\n\\nexport default Logo\\n\")), mdx(\"h2\", {\n    \"id\": \"footer\"\n  }, \"Footer\"), mdx(\"p\", null, \"For customizing the footer create a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"footer.mdx\"), \" file in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/gatsby-theme-dox\"), \" directory.\"));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"value":"Customization"},{"value":"Theme UI"},{"value":"Syntax Highlighting"},{"value":"Logo"},{"value":"Footer"}]}},"pageContext":{"id":"0030e84f-7871-5a10-b814-7335fc73591b","slug":"/customization","previous":{"id":"a0cd63ab-d1b1-59a6-b1ce-1d59daf3b7e3","slug":"/how-to-publish"},"next":{"id":"f8770990-1d78-5d2e-bcdb-fd6887d9da6c","slug":"/documentation"}}},"staticQueryHashes":["3159585216","63159454"]}