Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


@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

inspired by:


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


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


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`,


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



SEO & Performances



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


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',


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


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



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 {


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


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.


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.

© 2023 Gatsby, Inc.