Grav Theme Charm is a fork of the default Quark theme for Grav CMS. This theme has been completely refactored to use Tailwind CSS v4.1 and Vite, replacing the original Spectre.css framework while maintaining the original look and feel through a comprehensive BEM-based port.

• Tailwind CSS v4.1 Framework
• Vite v7.2 Build System for lightning-fast HMR and optimized builds
• Spectre.css Port: Full port of Spectre.css components to Tailwind CSS using BEM methodology
• Dark Mode: Native Dark Mode support with system preference detection and manual toggle
• Mermaid.js Integration: Native support for Mermaid diagrams with automatic dark mode adaptation
• Fontawesome v7.1.0 icon support
• Fully responsive with full-page mobile navigation
• Built-in support for on-page navigation
• Multiple page template types

• Default view template default.md
• Error view template error.md
• Blog view template blog.md
• Blog item view template item.md
• Modular view templates: modular.md
  • Features Modular view template features.md
  • Hero Modular view template hero.md
  • Text Modular view template text.md
  • Note: Gallery Modular view template gallery.md only works in concert with premium plugin Lightbox Gallery

Installing the Charm theme can be done in one of two ways. Our GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install charm

This will install the Charm theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/charm.

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to charm. You can find these files either on GitHub or via GetGrav.org.

You should now have all the theme files under

/your/site/grav/user/themes/charm

Charm comes with a few default options that can be set site-wide. These options are:

enabled: true # Enable the theme
production-mode: true # Enable production mode
grid-size: grid-lg # The max-width of the theme, options include: `grid-xl`, `grid-lg`, and `grid-md`
header-fixed: true # Cause the header to be fixed at the top of the browser
header-animated: true # Allows the fixed header to resize to a smaller header when scrolled
header-dark: false # Inverts the text/logo to work better on dark backgrounds
header-transparent: false # Allows the fixed header to be transparent over the page
sticky-footer: true # Causes the footer to be sticky at the bottom of the page
blog-page: "/blog" # The route to the blog listing page, useful for a blog style layout with sidebar
custom_logo: # A custom logo rather than the default (see below)
custom_logo_mobile: # A custom logo to use for mobile navigation

To make modifications, you can copy the user/themes/charm/charm.yaml file to user/config/themes/ folder and modify, or you can use the admin plugin.

NOTE: Do not modify the user/themes/charm/charm.yaml file directly or your changes will be lost with any updates

To add a custom logo, you should put the log into the user/themes/charm/images/logo folder. Standard image formats are support (.png,.jpg, .gif, .svg, etc.). Then reference the logo via the YAML like so:

custom_logo:
  - name: "my-logo.png"
custom_logo_mobile:
  - name: "my-mobile-logo.png"

Alternatively, you can you use the drag-n-drop "Custom Logo" field in the Charm theme options.

Charm has the ability to allow pages to override some of the default options by letting the user set body_classes for any page. The theme will merge the combination of the defaults with any body_classes set. For example:

body_classes: "header-dark header-transparent"

On a particular page will ensure that page has those options enabled (assuming they are false by default).

The hero template allows some options to be set in the page frontmatter. This is used by the modular hero as well as the blog and item templates to provide a more dynamic header.

hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large
hero_image: road.jpg
hero_align: center

The hero_classes option allows a variety of hero classes to be set dynamically these include:

• text-light | text-dark - Controls if the text should be light or dark depending on the content
• title-h1h2 - Enforced a close matched h1/h2 title pairing
• parallax - Enables a CSS-powered parallax effect
• overlay-dark-gradient - Displays a transparent gradient which further darkens the underlying image
• overlay-light-gradient - Displays a transparent gradient which further lightens the underlying image
• overlay-dark - Displays a solid transparent overlay which further darkens the underlying image
• overlay-light - Displays a solid transparent overlay which further darkens the underlying image
• hero-fullscreen | hero-large | hero-medium | hero-small | hero-tiny - Size of the hero block

The hero_image should point to an image file in the current page folder.

The features modular template provides the ability to set a class on the features, as well as an array of feature items. For example:

class: offset-box
features:
  - header: Crazy Fast
    text: "Performance is not just an afterthought, we baked it in from the start!"
    icon: fighter-jet
  - header: Easy to build
    text: "Simple text files means Grav is trivial to install, and easy to maintain"
    icon: database
  - header: Awesome Technology
    text: "Grav employs best-in-class technologies such as Twig, Markdown & Yaml"
    icon: cubes
  - header: Super Flexible
    text: "From the ground up, with many plugin hooks, Grav is extremely extensible"
    icon: object-ungroup
  - header: Abundant Plugins
    text: "A vibrant developer community means over 200 themes available to download"
    icon: puzzle-piece
  - header: Free / Open Source
    text: "Grav is an open source project, so you can spend your money on other stuff"
    icon: money

The text box provides a single option to control if any image found in the page folder should be left or right aligned:

image_align: right

Charm includes built-in support for Mermaid.js diagrams. Simply use the standard code block syntax with the language identifier mermaid:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

The theme automatically handles rendering and adapts the diagram colors for both light and dark modes.

This project uses a Makefile to standardize common commands. Here are the most important ones:

Contributions are the heart of the open-source community. We welcome every Pull Request!

Please read our CONTRIBUTING.md for details on our Code of Conduct and the process for submitting Pull Requests.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'feat: Add some AmazingFeature') - We use Conventional Commits!
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Please do not report security vulnerabilities in public issues. Instead, send an email to [t-boyke@example.com] or use the Security tab in the repository.

Published under the MIT License. See LICENSE for more information.

Project Maintainer: T-Boyke - t-boyke@example.com Project Link: https://github.com/T-Boyke/grav-theme-charm