frontity-chakra-ui-theme - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #ai #go #machine-learning #rust #deep-learning #docker #nodejs #macos #java #kubernetes #mcp #ios

frontity-chakra-ui-theme

(★ 101)

A Frontity theme built with Chakra UI

파일 탐색기

최종 버전 다운로드 (.zip)

- config.json
- README.md
- - CHANGELOG.md
  - LICENSE
  - package.json
  - README.md
.eslintrc.js
.gitignore
favicon.ico
frontity.settings.js
package-lock.json
package.json
README.md
sandbox.config.json
vercel.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/chakra-ui/frontity-chakra-ui-theme

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd frontity-chakra-ui-theme

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install frontity-chakra-theme

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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:

```sh
npm install frontity-chakra-theme
```

Then 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](https://docs.frontity.org/guides/install-a-new-package#local-packages).

## 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

```js
// 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;
```

**🚨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:

```json
// 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`

```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 ⚡️