@adamquadmon/gatsby-theme-lucifero

@adamquadmon/gatsby-theme-lucifero is released under the MIT license. Current npm package version.

A Satanic Gatsby theme featuring Chakra UI Dark/Light theme with MDX and other suff

Features

  • Chakra UI-based theming
  • Light/Dark mode
  • MDX

Installation

mkdir my-site
cd my-site
yarn init
# install gatsby-theme-lucifero and it's dependencies
yarn add gatsby react react-dom @adamquadmon/gatsby-theme-lucifero

Usage

Theme options

In the src/config/ folder you will find defaultConfig.js

Key Default Value Description
basePath / Root url for the theme

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@adamquadmon/gatsby-theme-lucifero`,
      options: {
        // basePath defaults to `/`
        basePath: `/sideproject`,
      },
    },
  ],
};

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme! Generally speaking you will want to place your files into src/@adamquadmon/gatsby-theme-lucifero/ to shadow/override files. The Chakra UI config can be configured by shadowing its files in src/gatsby-theme-lucifero/@chakra-ui/gatsby-plugin.

What’s inside

This is a list of included plugins, the ones ending in***** are community plugins

Design

Data

SEO & Performances

Design

Theming

This theme uses Chakra UI for css-in-js styling. You can override theming in the src/gatsby-theme-lucifero/@chakra-ui/gatsby-plugin/ folder, the entrypoint is theme.js

Fonts

add a GoolgeFonts from fontsource using yarn:

yarn add @fontsource/im-fell-english

include the font in gatsby-browser.js:

import '@fontsource/im-fell-english';

use the font in theme files, for example in typography.js:

export const typography = {
  fonts: {
    body: 'IM Fell English',
  },
};

Theme Modes

Chakra UI is configured for Dark and Light mode, you can find some example in the components.js file

export const components = {
  components: {
    Heading: {
      baseStyle: ({ colorMode }) => ({
        color: colorMode === 'dark' ? 'gray.300' : 'gray.600',
      }),
    }
  }
}

Colors

Chakra leverage on TailwindCSS base colors. You can find here all Tailwind colors

Components

The theme provide the following components:

  • LayoutPage - Layout for Pages
  • LayoutContainer - Base Container including:
    • NavBar - full responsive navbar with LangSelector, ThemeSwitcher, SocialButtons, Logo, address and cell info
    • Footer - Logo with organization info, navigation items, LangSelector, SocialButtons and a Map
    • SEO - with ogImage and SchemaOrg
  • Cards - Dispaly responsive Cards for content
  • CookieConsent - The GDPR stuff
  • Hero - Hero component for home pages

Data

YAML

adding a data/collection.yaml file

character: a
number: 1

---

character: b
number: 2

you can query for data inside using GraphQL:

{
  allCollectionYaml {
    edges {
      node {
        character
        number
      }
    }
  }
}

MDX

In the pages folder you can add MDX files to create pages and posts

To override the navigation links of the menu you can create the file src/gatsby-theme-lucifero/hooks/use-navItems.js

Changelog

You can find the extensive changelog of changes on GitHub. You’ll be able to see each patch, minor, and major changes and what pull requests contributed to them.

Questions?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby’s documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.