Frontity Chakra Theme
A Frontity theme made with the Chakra UI library.
You can try it out in codesandbox: https://githubbox.com/chakra-ui/frontity-chakra-ui-theme
Installation guide
To get start quickly with the Chakra UI theme, you can install them like other published packages in Node using npm or yarn.
To install, run this command in your terminal:
npm install frontity-chakra-themeThen add frontity-chakra-theme to your frontity.settings.js file.
If you want to modify this package, you need to install it as a local package. You can do so by following this guide: How to install a local package in Frontity.
Theme Options
Chakra theme can be configures via the frontity.settings.js file. The theme options can be specified in the state.theme property.
| Key | Default Value | Description |
|---|---|---|
menu |
[] | The top level navigation links for your blog |
socialLinks |
[] | The social media links to use in your theme |
logo |
[] | The text or logo image url |
showBackgroundPattern |
true |
If true, will show a backgroung pattern |
showSocialLinks |
true |
If true, will show the social media links |
colors |
The primary and accent colors to use |
Example Usage
// frontity.settings.js
const settings = {
packages: [
{
name: "frontity-chakra-theme",
state: {
theme: {
// The logo can be a text or an image url
logo: "Frontity",
// show background pattern
showBackgroundPattern: true,
// show social links
showSocialLinks: true,
// the top-level navigation labels and links
menu: [
["Home", "/"],
["Portfolio", "/portfolio"],
["About", "/about"],
["Contact", "/contact"],
],
// the social links
socialLinks: [
["pinterest", "https://www.pinterest.com/frontity/"],
["facebook", "https://www.instagram.com/frontity/"],
["twitter", "https://www.twitter.com/frontity/"],
],
// color shades to use in the blog
colors: {
primary: {
50: "#e9f5f2",
100: "#d4dcd9",
200: "#bbc3be",
300: "#a1aba5",
400: "#87938b",
500: "#6d7972",
600: "#555f58",
700: "#323c34",
800: "#232924",
900: "#272727",
},
accent: {
50: "#ede4d3",
100: "#fbe3b2",
200: "#f6d086",
300: "#f1be58",
400: "#eca419",
500: "#d49212",
600: "#a5710b",
700: "#775105",
800: "#483100",
900: "#1d0f00",
},
},
},
},
},
],
};
export default settings;50 - 900. For example, here's what the default colors look like:
// value of theme.colors
{
"primary": {
"50": "#e9f5f2",
"100": "#d4dcd9",
"200": "#bbc3be",
"300": "#a1aba5",
"400": "#87938b",
"500": "#6d7972",
"600": "#555f58",
"700": "#323c34",
"800": "#232924",
"900": "#272727"
},
"accent": {
"50": "#ede4d3",
"100": "#fbe3b2",
"200": "#f6d086",
"300": "#f1be58",
"400": "#eca419",
"500": "#d49212",
"600": "#a5710b",
"700": "#775105",
"800": "#483100",
"900": "#1d0f00"
}
}You can use tools like Smart Swatch (https://smart-swatch.netlify.com/) or Palx (https://palx.jxnblk.com/) to generate color hues based on a single color
Additional Settings
In addition to the theme options, there are a handful of items you can customize via the frontity object in your siteโs frontity.settings.js
// frontity.settings.js
const settings = {
state: {
frontity: {
url: "your website url",
title: "Your website title",
description: "Your website description",
},
},
};If you ever have questions, kindly post issues here or head over to https://community.frontity.org to get more personalizes support.
Enjoy the Chakra Theme