A few simple theme options can be configured in the theme.json file located in src/_data.
Editing
Your Git provider probably supports editing files directly:
Commit your edits to trigger a new deployment in Netlify, rebuilding your blog with the latest changes.
If you’re comfortable working with Git repositories, you can work locally as well
Colors
By default, the site navigation and header use a white-on-indigo color scheme. You can change this by updating the header property in theme.json:
"header": {
"background": "#f6e05e",
"text": "#1a202c"
}
Ditto for the footer:
"footer": {
"background": "#1a202c",
"text": "#f6e05e"
}
Icons
You may have noticed the catchy sunglasses icon in the site navigation and placeholder for posts without images. This template project includes a few other icons you can choose from.
To try a different icon, set icon.filename and icon.alt in theme.json and see what you think:
"icon": {
"filename": "ice-cream.svg",
"alt": "ice cream"
}
If you decide to keep one of the included icons, you’ll need to attribute it to the artist. See the Credits page for details.
Bring your own
If you’d like to supply your own SVG icon, add it to src/icons then set icon.filename and icon.alt in theme.json to match.
To add support for theming your custom icon, use var( --theme-color-icon ) as the fill color. For example:
<g fill="var(--theme-color-icon)" fill-rule="nonzero">
Doing so will ensure that the glyph always matches the color used for header.text any time you update your theme.