{"id":13422295,"url":"https://github.com/chakra-ui/frontity-chakra-ui-theme","last_synced_at":"2025-03-15T11:31:31.580Z","repository":{"id":40518700,"uuid":"227089953","full_name":"chakra-ui/frontity-chakra-ui-theme","owner":"chakra-ui","description":"A Frontity theme built with Chakra UI","archived":false,"fork":false,"pushed_at":"2024-10-29T16:10:50.000Z","size":3120,"stargazers_count":103,"open_issues_count":15,"forks_count":20,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-01T00:48:15.951Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://githubbox.com/chakra-ui/frontity-chakra-ui-theme","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chakra-ui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-12-10T10:24:52.000Z","updated_at":"2024-12-18T00:51:16.000Z","dependencies_parsed_at":"2024-01-13T17:48:17.521Z","dependency_job_id":"d008b29f-36d7-4a81-a28c-d8065c3a5837","html_url":"https://github.com/chakra-ui/frontity-chakra-ui-theme","commit_stats":{"total_commits":110,"total_committers":6,"mean_commits":"18.333333333333332","dds":0.4636363636363636,"last_synced_commit":"d78956a45874292c6c15e333cda098b4a273de40"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Ffrontity-chakra-ui-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Ffrontity-chakra-ui-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Ffrontity-chakra-ui-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Ffrontity-chakra-ui-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chakra-ui","download_url":"https://codeload.github.com/chakra-ui/frontity-chakra-ui-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243724954,"owners_count":20337655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:41.221Z","updated_at":"2025-03-15T11:31:31.143Z","avatar_url":"https://github.com/chakra-ui.png","language":"JavaScript","funding_links":[],"categories":["🛠️ Tools","JavaScript"],"sub_categories":[],"readme":"# Frontity Chakra Theme\n\nA Frontity theme made with the Chakra UI library.\n\nYou can try it out in codesandbox: https://githubbox.com/chakra-ui/frontity-chakra-ui-theme\n\n## Installation guide\n\nTo get start quickly with the Chakra UI theme, you can install them like other published packages in Node using `npm` or `yarn`.\n\nTo install, run this command in your terminal:\n\n```sh\nnpm install frontity-chakra-theme\n```\n\nThen add `frontity-chakra-theme` to your `frontity.settings.js` file.\n\nIf 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](https://docs.frontity.org/guides/install-a-new-package#local-packages).\n\n## Theme Options\n\nChakra theme can be configures via the `frontity.settings.js` file. The theme options can be specified in the `state.theme` property.\n\n| Key                     | Default Value | Description                                  |\n| ----------------------- | ------------- | -------------------------------------------- |\n| `menu`                  | []            | The top level navigation links for your blog |\n| `socialLinks`           | []            | The social media links to use in your theme  |\n| `logo`                  | []            | The text or logo image url                   |\n| `showBackgroundPattern` | `true`        | If `true`, will show a backgroung pattern    |\n| `showSocialLinks`       | `true`        | If `true`, will show the social media links  |\n| `colors`                |               | The `primary` and `accent` colors to use     |\n\n## Example Usage\n\n```js\n// frontity.settings.js\nconst settings = {\n  packages: [\n    {\n      name: \"frontity-chakra-theme\",\n      state: {\n        theme: {\n          // The logo can be a text or an image url\n          logo: \"Frontity\",\n          // show background pattern\n          showBackgroundPattern: true,\n          // show social links\n          showSocialLinks: true,\n          // the top-level navigation labels and links\n          menu: [\n            [\"Home\", \"/\"],\n            [\"Portfolio\", \"/portfolio\"],\n            [\"About\", \"/about\"],\n            [\"Contact\", \"/contact\"],\n          ],\n          // the social links\n          socialLinks: [\n            [\"pinterest\", \"https://www.pinterest.com/frontity/\"],\n            [\"facebook\", \"https://www.instagram.com/frontity/\"],\n            [\"twitter\", \"https://www.twitter.com/frontity/\"],\n          ],\n          // color shades to use in the blog\n          colors: {\n            primary: {\n              50: \"#e9f5f2\",\n              100: \"#d4dcd9\",\n              200: \"#bbc3be\",\n              300: \"#a1aba5\",\n              400: \"#87938b\",\n              500: \"#6d7972\",\n              600: \"#555f58\",\n              700: \"#323c34\",\n              800: \"#232924\",\n              900: \"#272727\",\n            },\n            accent: {\n              50: \"#ede4d3\",\n              100: \"#fbe3b2\",\n              200: \"#f6d086\",\n              300: \"#f1be58\",\n              400: \"#eca419\",\n              500: \"#d49212\",\n              600: \"#a5710b\",\n              700: \"#775105\",\n              800: \"#483100\",\n              900: \"#1d0f00\",\n            },\n          },\n        },\n      },\n    },\n  ],\n};\n\nexport default settings;\n```\n\n**🚨NOTE**: Since this theme is based on Chakra, we require that the theme colors should be color values from `50` - `900`. For example, here's what the default colors look like:\n\n```json\n// value of theme.colors\n{\n  \"primary\": {\n    \"50\": \"#e9f5f2\",\n    \"100\": \"#d4dcd9\",\n    \"200\": \"#bbc3be\",\n    \"300\": \"#a1aba5\",\n    \"400\": \"#87938b\",\n    \"500\": \"#6d7972\",\n    \"600\": \"#555f58\",\n    \"700\": \"#323c34\",\n    \"800\": \"#232924\",\n    \"900\": \"#272727\"\n  },\n  \"accent\": {\n    \"50\": \"#ede4d3\",\n    \"100\": \"#fbe3b2\",\n    \"200\": \"#f6d086\",\n    \"300\": \"#f1be58\",\n    \"400\": \"#eca419\",\n    \"500\": \"#d49212\",\n    \"600\": \"#a5710b\",\n    \"700\": \"#775105\",\n    \"800\": \"#483100\",\n    \"900\": \"#1d0f00\"\n  }\n}\n```\n\n\u003e 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\n\n## Additional Settings\n\nIn 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`\n\n```js\n// frontity.settings.js\nconst settings = {\n  state: {\n    frontity: {\n      url: \"your website url\",\n      title: \"Your website title\",\n      description: \"Your website description\",\n    },\n  },\n};\n```\n\nIf you ever have questions, kindly post issues here or head over to `https://community.frontity.org` to get more personalizes support.\n\nEnjoy the Chakra Theme ⚡️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Ffrontity-chakra-ui-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchakra-ui%2Ffrontity-chakra-ui-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Ffrontity-chakra-ui-theme/lists"}